This post is also available in: Russian
Sooner or later, all developers come to selecting tools best-fitting their needs. Choosing of proper tools can significantly boost development efficiency and improve code quality. In this post, we are going to describe tools we use to create the frontend of our projects and enable the coding workflow.
Tools
Professionals are distinct not just by the quality of his work but also by their choice of tools.
Text Editor
Let’s start with a text editor. Most people do not use even 50% of its capacity. Most probably, if you use anything beyond the Notepad, you might have used such features as:
- Zen Coding
Using it, you can easily create HTML markup. It saves your time and initiates you an intricate coding Zen. (You can read about this plugin here).
- Live Templates
We often have to type the same design elements: Declarations of functions, objects, language constructions. Live Templates allow you to automate pre-defined templates of code and focus on more important elements of your application. Moreover, you can easily extend the set of templates by creating them for frameworks you use most often.
- File Templates
File templates allow you to quickly deploy new modules of your project. Also, similarly to Live Templates, you can expand the set of templates.
- Live Edit
With this feature, you can avoid refreshing the browser after each layout edit, as this action is automated!
We can recommend a superb text editor, Sublime Text 2. It offers multi-purpose plugin support, code highlight, cross-platform features: all this makes it a great editor. Last but not least, it’s free.
But for really large-scale projects we use PHPStorm / WebStorm from JetBrains. These products provide the developer with all the necessary functionality, the features described above, as well as highlight of the code and dependencies between all the project files.
Both SublimeText and PHPStorm support many shortcuts with which you can edit your text more quickly and easily. To explore possible shortcuts, use the Shortcut Foo service. Learning is fun, so this is a great way to mix business with pleasure.
Technology
Use the technology that will allow you to write less code to achieve the same result. Remember, however, that support of the resulting code needs to be as cheap as possible.
For example, it is a good practice to use sass/less to enhance css by adding variables. Once your CSS files are ready, just run the processor program to convert sass/less to the normal css.
The BEM methodology will help large-scale projects not to become embogged in the layout code. A clear separation of styles across individual files ordered by folders will save your time spent on maintaining the code. The basic principles of BEM are formulated here. There is also a set of tools called bem-tools which allows you to quickly deploy style files.
Workflow
By streamlining your code development process, you can improve performance and quality.
To ensure parallel coding, standard tools such as git (here you can read about a successful git workfow) To coordinate tasks, a bug tracking system, such as Jira or Redmine, are used
Project Deployment
To deploy your ready application to the production environment, we use Jenkins. Its purpose is to download the latest version from the repository and then, after build and file preparation, to roll the results to the servers. To enable such processes, phing is used.
Another issue is project preparation for rollout. For a frontend run in a local development environment this usually includes:
- Converting of sass/less to css
- Control of dependencies
- File concatenation
- Running autotests
For the production version, preparation also includes:
- File minification
- Code obfuscation
- Image optimization
Automation of the above is core to optimizing the development process.
To perform these tasks, we use Yeoman. You can streamline the entire process of frontend development workflow. It implements all of the above items.
Yeoman based development
Yeoman allows you to quickly deploy folder structure for standard frontend projects. For this purpose, in the project directory, enter command:
yeoman init
This starts a dialogue; answer its questions to deploy auxiliary files and folders in the project directory.
Also, in Yeoman you can configure the type of your project. In this case, it will prepare a tree of folders and files for the specified framework.
Above, we have mentioned such a helpful tool as Live Edit. And you know what? For your applications Yeoman will run a Live Edit enabled Web server. To do this, call the following command:
yeoman server
In a few seconds, your browser will run the application. Now any changes to the html, css or js files are immediately displayed in the browser. Your sass files will also be compiled into css after each save.
To build the project, Yeoman uses Grunt. By changing its configuration file, you can flexibly control the processes of concatenation, optimization, etc. To launch the build procedure, run:
yeoman build
For unit testing, Yeoman uses JQunit and PhantomJS. For more, please read our post "JavaScript Tests and Their Automation."
After the tests are complete, Yeoman returns a success message. Along with that, it will create the dist folder containing the project ready for production rollout.
Summary
So, putting it all together, our model of the developer workflow consists of the following steps:
- Deploying the project framework using Yeoman.
- Creating elements using bem-tools.
- Writing the code.
- Building and testing the code with Yeoman and browser/IDE debugging tools.
- Rolling the project out to the git repository.
- Launching deploy on the server via Jenkins.
Learn more
Have fun watching a stunning Yeoman presentation by Paul Irish.