Front-end engineer differs from front-end developer
This is not very long time ago, when the front-end engineering term has coined for the first time in web development industry. Often I read conversation about the difference between these two. Since the term front-end engineer is not so much old, there are controversy and discussion still going on and new web designs are constantly being confused about what to choose to proceed the learning curve since there are lots of choices in the arsenal.
A website has a physical 2 ends which are front-end and back-end. Front-end involves mostly dealing with the website or application layout or view which is the ultimate end point for visual presentation and interecting with the end users.
There are different approaches for developing a website or web applications whether it’s a static or dynamic. In the recent years, the magic and effectiveness of JavaScript is garbing more and more attention than ever. Apart from the new HTML5 element tags, JavaScript and it’s APIs are the main barebone of the HTML5 development which means, JavaScript has become inevitable and future for web development.
Now, Front-end engineering, in my opinion is related to more of JavaScript based development. Because in early 2000, we weren't familiar with Grunt, Gulp or Yeoman which automatize front-end workflows and make a developer’s life easier. The revolution has occurred mainly because of the JavaScript server technology - NODE.js.
So, what differs engineers from developers in front-end actually?
Well, it’s mostly the approach of website development. In typical ways, a front-end developer either starts working with a pre design Photoshop or sketched wire-frame to develop layout. In that case, most of the developers used to grab Eric Meyers CSS reset to gain more control over different browsers pitfalls and cross browser compatibility. In that case, a developer’s main tool was his very code editor and stack of latest browsers which means developer’s default PC or Mac environment was good enough for head start a project. The front end development mostly comprised of either slicing a PSD file to grab necessary page elements and code them into a cross browser compatible working HTML page. No page load speed optimization, no reducing HTTP requests, no performance issues were deeply considered.
But the booming of smart phone devices, iOS and Android OS, more than 50% of the users are now considered as mobile browsers in different networks including 3G, 4G, Wifi etc which brings much of a headache to a typical developer about speed optimization, script concatenation, minification etc.
Since, with the help of CSS3 media query developers are now able to target large scale of end users from Desktop, laptops, smart phones and tabs, loading speed and mobile usability become crucial and that’s where engineering terms coined.
Engineering approach of development
A modern engineering approach of web development differs from typical development process in many ways. Firstly, with the development environment and then page loading and performance issues. By the blessings of NODE.js and it’s package manager NPM, a modern front-end engineer now has to deal with CLI (Command line interface) for using build task commands.
Front-end automation or build task includes compiling CSS pre-processor code to original CSS code, concatenating multiple CSS and JS files into one to substantially reduce HTTP request which plays a very important role in front end performance. The less HTTP request the better your page performance. Build tasks also include CSS and Js minification, compression, debugging etc. which also have vital influence in performance.
With the help of many famous front end development framework like Twitter Bootstrap, Foundation and many more, it is now relatively easy to develop a cross browser compatible html layout quickly. The main problem of a framework is, they are loaded with too much pre built markups, style classes and properties and JS codes which are not used in the respective project and often ignored.
For a real world project, if you use a twitter bootstrap, you may use 30–50% of it’s pre built resources (HTML/CSS classes and JS plugins). The abandoned assests are then just garbase for your webpage or application weighing your page way more than actual page content. So, for the grabase cleanup you must rely on the built tasks from NPM based Grunt, Gulp, Bower or Yeoman. As for example a grunt package for concatenation of scripts and style files will convert all of your files into one. Grunt will also minify/uglify your CSS and JS file for fast loading page performance.
A simple guide to front end engineering
Here are some bare bone front-end engineering methods which are proven effective and best practice throughout the web development industry. In short, while a typical frontend developer ingonrs page loadin speed, usability, extra markup, CSS and JS garbase, a frontend engineer consider each of these issues way too seriously.
01. Master semantic coding approach.
02. Master moduler CSS or use a CSS pre processors like LESS, SCSS, Stylus and so on. Here is a current list of top 6 CSS pre processors. Also adapt with CSS best practices, using sprite sheet t load assests, short CSS selectors and maintainable CSS coding.
03. Know your main front-end engine “Browsers”. Learn how browser’s load and render assets including browser engine structure. Here is a very detailed and awesome article by Tali Garsiel about how the browser engine works.
03. Learn DOM — Document Object Model or how JS treats a browser rendered HTML page. Master the method of DOM traversal, DOM events and related topics. MDN is a great resource to start learning in depth DOM.
04. Learn RAW Javascript before learning jQuery — a lot of newbies directly jump into jQuery without learning the main programming concepts and Javascript. Code Academy and W3 Schools are 2 good options to start the JS learning. There is an awesome book for beginners called Eloquent JavaScript which has a free online version. If you more keen to learn Javascript very deeply then there is an awesome guideline from Eric Elliott on here at Medium — Learn JavaScript Essentials (For all skill levels)
05. Master any of the one HTML/CSS frameworks such as Twitter Bootstrap and it’s components. There are tools for bootstrap to quickly generate codes and clean up extra garbase at production level.
06. Gain knowledge of client- server architecture and network performance evaluation to see the assets loading to your page using chrome or firefox developer tools or your favorite developer tools.
07. Learn HTTP and HTTP VERBS as well as HTTP REQUEST — There is a very short and great free book on HTTP named HTTP succinctly.
08. Master CLI or terminal or bash — There is a great step by step guide for learning CLI or terminal which is named, “The Command Line Crash Course”. Believe me, when you are going to work with build or automation process for your project you gonna need some command line skills and understandings.
09. Master any of the one automation/build tools like Grunt — about how to build your package to minify/uglify your CSS and JS files, cleaning extra markups and style classes in production version of your page.
10. Learn render blocking object or critical rendering path along with Google page speed scoring rules.
11. Lean how to use GIT version controlling using Github. Even if you are working alone in a project using Github is a top notch professional approach and your employer would definitely give an extra consideration if you have intermediate-advanced Git skills.
12. Try to deploy your project on cloud platform like Heroku and learn how to directly deploy projects by connecting Github and Cloud platform using CLI.
13. Learn the difference between development environment and production environment and try to use virtual development environment using Vagrant.
14. If you want to learn Apache and/or NGNIX web server and it’s configuration, read the .htaccess full file from the legendary HTML5 boilerplate which is also an indispensable tool for modern front-end engineering by implementing thousands of developers years of practice and browser hacks.
Extra resources list for Front-End engineering :
01. AFRONT END ENGINEER’S MANIFESTO by @ZACHLEAT
02. Tooling For The Modern WebApp Developer by Addy Osmani
03. So, You Want to Be a Front-End Engineer? by David Mosher
04. How To Stay Up To Date on Web Technology by Chris Coyier
05. A Modern Web Designer’s Workflow by Chris Coyier
06. Preparing For A Front-End Job Interview gives you some tips for preparing for a front-end engineer job.
07. Interviewing as a Front-End Engineer by Chris Coyier gives some thought about the needs of computer engineering fundamentals for a modern front-end engineer.
08. Interviewing the front-end engineer — is a short interesting read about gathering ideas of front-end engineering must know topics.
09. Finally, a great Git-hub repo about front-end interview questions ☺
Are you afraid to see the topics covered in this article? You may be wondering how the hell I am supposed to learn all those things at once?
Well, the answer is, if you compare the academic 4 year graduate engineering degree, you should get the answers. But, hat doesn't mean that you exactly needs 4 years to be a front-end engineer. Somebody with advanced learning capability with fast pace can complete all of the above topic in 6 months to 1 year and some may take more than that. In gist, you need years of practice or learning background in order to master all of the technologies related to front-end engineering.
Conclusion
By now, you should have an idea of what differs real world engineering development approach to typical development approach. A typical front-end developer can just learn HTML/CSS and jQuery and can then dive into project. But a front-end engineer can’t do that since a lot of factors are related to this term.
