tl;dr
Highly recommend using a framework, one such as Backbone.js and it is completely worthwhile doing the tutorial from http://addyosmani.github.io/backbone-fundamentals/. For other possible framework combos, see http://todomvc.com/.
Intro
Companies such as Facebook and Twitter, Google and Apple arguably leads the frontend experience for webapps, both in design and interaction. The current status quo for webapps is Single Page Applications (SPAs). These applications are expected to be high performance, responsive, functional and simple to use.
If you are a seasoned devop, well versed in your favourite programming language and a wizard with modern day webstack/tools, such as Varnish Cache :), where would you begin to dabble in frontend development? What frameworks (if any) would you use and where would you start? Join me on an epic journey through the frontend development world. This blog series aims to demystify frontend technologies and provide a new starting point for anybody who is well versed in the backend but wishes to dabble in modern day frontend development.
Part 1 of this series aim to serve as a clear starting point amongst the plethora of information available on the web. It is written for anybody looking to get going with front end development for the first time. Details on the frameworks, tooling, automated testing and various other full-stack topics will be discussed in the following blogs in the series. And in case you are wondering, yes, TDD/BDD, CI and test automation has all found its way into frontend development and looks to be rather stable and well defined.
All technologies mentioned are currently used within my product development team. The blog is a real-life account of my journey through the frontend development world.
Children of the 80s, Geocities much?
Traditional frontend development has gone through quite an amazing transformation. Harking back to the late 90s, where JavaScript and Cascading Style Sheets were gaining adoption and momentum, coupled with HTML, these three technologies and their respective tooling has gone through tremendous transformation.
Like most children of the 80s, Geocities was the bomb in the 90s. Like most basketball-card-collecting and 90210-watching Aussie kid, I jumped on this bandwagon back in high school and started creating my very first website with simple HTML and JS component, mostly written with the help of HotDog by Sausage Software. This was the very bleeding edge of WYSIWYG editor for HTML at the time. It had very limited JS support if I recall correctly, mostly in the form of prepaid snippets that allowed very rudimentary animations on your awesome Geocities website. CSS was out the window as we stayed true blue with background colours and crude inline CSS. But we knew. We knew that this holy trinity of JS, HTML and CSS would change the world. We just needed somebody tear us away from the countless amazing Geocities website dedicated warez, phreaking and cracks.
As the following terms “newbs”, “zomg”, and “hax0r” made its way into online chat, server-side rendering technologies such as JSP, Servlets, Spring garnered much popularity amongst B2B and enterprise applications. Technologies like Google Web Toolkit was emergent and Google arguably lead the charge in realising the power of client-side process. A truly distributed platform, where single-page-application (SPA) demonstrated the potential in providing both a scalable architecture and beautiful user interactions. Then it all changed in 2009. Node.js was released.
Node.js leverage the power of Chrome’s V8 JS engine. It allowed JS to run server-side. This, ironically, opened the gateway to standardising frontend development. As build frameworks and package manager started to appear, it highed the lack of standardised approach for JS apps that are developed and deployed for the browsers.
JS frameworks and libraries
There are numerous combination of frameworks, not to mention there are quite a few thought leaders in frontend development. In order to start making sense of the massive permutation of possibilities, and to avoid wading through a ton of out dated material, my whole hearted suggestion is to pick a framework that is current and relevant, maintained, established, matured and ships with solid documentation. I recommend Backbone.js and the starting point is http://addyosmani.github.io/backbone-fundamentals/ and http://todomvc.com/.
There are quite a number of JS frameworks out there. Go with jQuery as a starting point. Note that it has fallen out of favour of late. But without hands on, it would be hard pressed to form your own opinion.
For those that would like to try out some hispter functional programming and wishes to include awesome words such as functors, morphisms and monads into their daily vocabulary, have a look at Underscore.js.
CSS framework
With a name like Syntactically Awesome Stylesheets (SASS), how can you say no? This is a good starting point to jump into the deep end of pre-processed CSS. You will be compiling CSS in no time! Also SASS is more than LESS.
Project scaffolding
Projects, build tools and tooling. Your frontend project deserves a package manager and mechanism to integrate with continuous integration servers via build scripts.
Go with Grunt. When starting a new project, you could also consider yeoman. Personally, I have gone down the Grunt path, as I wish to understand the rationale and the reason behind yeoman’s frontend development process.
something else 