{"id":4102,"date":"2012-12-24T23:12:49","date_gmt":"2012-12-24T19:12:49","guid":{"rendered":"http:\/\/blog.denivip.ru\/?p=4102"},"modified":"2013-08-05T14:10:34","modified_gmt":"2013-08-05T10:10:34","slug":"workflow-and-frontend-development-tools","status":"publish","type":"post","link":"http:\/\/blog.denivip.ru\/index.php\/2012\/12\/workflow-and-frontend-development-tools\/?lang=en","title":{"rendered":"Workflow and Frontend Development Tools"},"content":{"rendered":"<p style=\"text-align: center;\"><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/developer_challenge.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4061\" title=\"developer_challenge\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/developer_challenge.jpeg\" alt=\"\" width=\"493\" height=\"265\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/developer_challenge.jpeg 616w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/developer_challenge-300x161.jpg 300w\" sizes=\"(max-width: 493px) 100vw, 493px\" \/><\/a><\/p>\n<p>Sooner or later, all developers come to selecting tools best-fitting their needs.&nbsp;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. <!--more--><\/p>\n<h2><strong>Tools<\/strong><\/h2>\n<p>Professionals are distinct not just by the quality of his work but also by their choice of tools.<\/p>\n<h3><strong><em>Text Editor<\/em><\/strong><\/h3>\n<p><center><strong><em><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/images.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4062\" title=\"images\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/images.jpeg\" alt=\"\" width=\"204\" height=\"204\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/images.jpeg 204w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/images-150x150.jpg 150w\" sizes=\"(max-width: 204px) 100vw, 204px\" \/><\/a><\/em><\/strong><\/center><\/p>\n<p>Let&#8217;s start with a text editor. Most people do not use even 50% of its capacity.&nbsp;Most probably, if you use anything beyond the Notepad, you might have used such features as:<\/p>\n<ul>\n<li><span style=\"font-weight: bold;\">Zen Coding<\/span><\/li>\n<\/ul>\n<p>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 <a href=\"http:\/\/code.google.com\/p\/zen-coding\/\">here).<\/a><\/p>\n<ul>\n<li><span style=\"font-weight: bold;\">Live Templates<\/span><\/li>\n<\/ul>\n<p>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.<\/p>\n<ul>\n<li><span style=\"font-weight: bold;\">File Templates<\/span><\/li>\n<\/ul>\n<p>File templates allow you to quickly deploy new modules of your project. Also, similarly to Live Templates, you can expand the set of templates.<\/p>\n<ul>\n<li><span style=\"font-weight: bold;\">Live Edit<\/span><\/li>\n<\/ul>\n<p>With this feature, you can avoid refreshing the browser after each layout edit, as this action is automated!<\/p>\n<p>We can recommend a superb text editor, <a href=\"http:\/\/www.sublimetext.com\/2\">Sublime Text 2.<\/a> It offers multi-purpose plugin support, code highlight, cross-platform features: all this makes it a great editor. Last but not least, it&#8217;s free.<\/p>\n<p>But for really large-scale projects we use <a href=\"http:\/\/www.jetbrains.com\/phpstorm\/\">PHPStorm<\/a> \/ <a href=\"http:\/\/www.jetbrains.com\/webstorm\/\">WebStorm<\/a> 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.<\/p>\n<p>Both SublimeText and PHPStorm support many shortcuts with which you can edit your text more quickly and easily. To explore possible shortcuts, use the <a href=\"https:\/\/www.shortcutfoo.com\">Shortcut Foo<\/a> service. Learning is fun, so this is a great way to mix business with pleasure.<\/p>\n<h3><em>Technology<\/em><\/h3>\n<p>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.<\/p>\n<p><center><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/sassless.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4063\" title=\"sassless\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/sassless.jpeg\" alt=\"\" width=\"501\" height=\"239\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/sassless.jpeg 501w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/sassless-300x143.jpg 300w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/a><\/center><\/p>\n<p>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.<\/p>\n<p>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 <a href=\"http:\/\/ru.bem.info\/\">here.<\/a> There is also a set of tools called <a href=\"https:\/\/github.com\/bem\/bem-tools\">bem-tools<\/a> which allows you to quickly deploy style files.<\/p>\n<h2><strong>Workflow<\/strong><\/h2>\n<p>By streamlining your code development process, you can improve performance and quality.<\/p>\n<p>To ensure parallel coding, standard tools such as <a href=\"http:\/\/git-scm.com\/\">git<\/a> (<a href=\"http:\/\/nvie.com\/posts\/a-successful-git-branching-model\/\">here<\/a> you can read about a successful git workfow) To coordinate tasks, a bug tracking system, such as <a href=\"http:\/\/www.atlassian.com\/software\/jira\/overview\/\">Jira<\/a> or <a href=\"http:\/\/www.redmine.org\/\">Redmine<\/a>, are used<\/p>\n<h3><strong><em>Project Deployment<\/em><\/strong><\/h3>\n<p>To deploy your ready application to the production environment, we use <a href=\"http:\/\/jenkins-ci.org\/\">Jenkins.<\/a> 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, <a href=\"http:\/\/www.phing.info\/\">phing<\/a> is used.<\/p>\n<p>Another issue is project preparation for rollout. For a frontend run in a local development environment this usually includes:<\/p>\n<ul>\n<li>Converting of sass\/less to css<\/li>\n<li>Control of dependencies<\/li>\n<li>File concatenation<\/li>\n<li>Running autotests<\/li>\n<\/ul>\n<p>For the production version, preparation also includes:<\/p>\n<ul>\n<li>File minification<\/li>\n<li>Code obfuscation<\/li>\n<li>Image optimization<\/li>\n<\/ul>\n<p>Automation of the above is core to optimizing the development process.<\/p>\n<p>To perform these tasks, we use <a href=\"http:\/\/yeoman.io\/\">Yeoman<\/a>. You can streamline the entire process of frontend development workflow. It implements all of the above items.<\/p>\n<h3><em>Yeoman based development<\/em><\/h3>\n<p><center><strong><em><a href=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/index.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4064\" title=\"index\" src=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/index.png\" alt=\"\" width=\"374\" height=\"324\" srcset=\"http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/index.png 374w, http:\/\/blog.denivip.ru\/wp-content\/uploads\/2012\/12\/index-300x259.png 300w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/a><\/em><\/strong><\/center><\/p>\n<p>Yeoman allows you to quickly deploy folder structure for standard frontend projects. For this purpose, in the project directory, enter command:<\/p>\n<p><em>yeoman init<\/em><\/p>\n<p>This starts a dialogue; answer its questions to deploy auxiliary files and folders in the project directory.<\/p>\n<p>Also, in Yeoman you can configure the type of your project.&nbsp; In this case, it will prepare a tree of folders and files for the specified framework.<\/p>\n<p>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:<\/p>\n<p><em>yeoman server<\/em><\/p>\n<p>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.<\/p>\n<p>To build the project, Yeoman uses <a href=\"http:\/\/gruntjs.com\/\">Grunt.<\/a> By changing its configuration file, you can flexibly control the processes of concatenation, optimization, etc. To launch the build procedure, run:<\/p>\n<p><em>yeoman build<\/em><\/p>\n<p>For unit testing, Yeoman uses JQunit and PhantomJS. For more, please read our post <a href=\"http:\/\/blog.denivip.ru\/index.php\/2012\/07\/%D1%82%D0%B5%D1%81%D1%82%D1%8B-javascript-%D0%B8-%D0%B8%D1%85-%D0%B0%D0%B2%D1%82%D0%BE%D0%BC%D0%B0%D1%82%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F\/\">&quot;JavaScript Tests and Their Automation.&quot;<\/a><\/p>\n<p>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.<\/p>\n<h3><em>Summary<\/em><\/h3>\n<p>So, putting it all together, our model of the developer workflow consists of the following steps:<\/p>\n<ul>\n<li>Deploying the project framework using Yeoman.<\/li>\n<li>Creating elements using bem-tools.<\/li>\n<li>Writing the code.<\/li>\n<li>Building and testing the code with Yeoman and browser\/IDE debugging tools.<\/li>\n<li>Rolling the project out to the git repository.<\/li>\n<li>Launching deploy on the server via Jenkins.<\/li>\n<\/ul>\n<h3><strong><em>Learn more<\/em><\/strong><\/h3>\n<p>Have fun watching a stunning Yeoman presentation by Paul Irish.<\/p>\n<p><object width=\"500\" height=\"281\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/Mk-tFn2Ix6g?hl=ru_RU&amp;version=3\"><\/param><param name=\"allowFullScreen\" value=\"true\"><\/param><param name=\"allowscriptaccess\" value=\"always\"><\/param><embed src=\"http:\/\/www.youtube.com\/v\/Mk-tFn2Ix6g?hl=ru_RU&amp;version=3\" type=\"application\/x-shockwave-flash\" width=\"500\" height=\"281\" allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object><\/p>\n<h2>Helpful links<\/h2>\n<ul>\n<li><a href=\"http:\/\/habrahabr.ru\/post\/151931\/\">Pros of BEM Based Design &#8212; Case Studies (in Russian)<\/a><\/li>\n<li><a href=\"http:\/\/klierik.com\/blog\/howto-use-bem-tools\">How to use the BEM tools? (In Russian)<\/a><\/li>\n<li><a href=\"http:\/\/net.tutsplus.com\/tutorials\/javascript-ajax\/meeting-grunt-the-build-tool-for-javascript\/\">Meet Grunt: The Build Tool for JavaScript<\/a><\/li>\n<li><a title=\"Permalink to Improved Developer Tooling and Yeoman\" rel=\"bookmark\" href=\"http:\/\/addyosmani.com\/blog\/improved-developer-tooling-and-yeoman\/\">Improved Developer Tooling and Yeoman<\/a><\/li>\n<li><a href=\"http:\/\/yeoman.io\/\">Yeoman<\/a><\/li>\n<li><a href=\"http:\/\/lesscss.org\/\">Less<\/a><\/li>\n<li><a href=\"http:\/\/sass-lang.com\/\">Sass<\/a><\/li>\n<li><a href=\"http:\/\/gruntjs.com\/\">Grunt<\/a><\/li>\n<li><a href=\"http:\/\/phantomjs.org\/\">PhantomJS<\/a><\/li>\n<li><a href=\"http:\/\/code.google.com\/p\/jqunit\/\">JQunit<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Sooner or later, all developers come to selecting tools best-fitting their needs.&nbsp;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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[23,17,485,277,102],"_links":{"self":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/4102"}],"collection":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/comments?post=4102"}],"version-history":[{"count":6,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/4102\/revisions"}],"predecessor-version":[{"id":4835,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/4102\/revisions\/4835"}],"wp:attachment":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/media?parent=4102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/categories?post=4102"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/tags?post=4102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}