Specializations

Thursday, January 10, 2013

Web Development: What are the most important HTML5 + CSS3 + JS concepts to have mastered for an interview as a Front End Web App Developer

Here is a short list of what any good HTML5 front-end application developers should know:
  1. Understand that HTML5 is HTML and that the same application model is applicable. So, no new magical development paradigm was brought with HTML5 (outside of Canvas/WebGL, which is totally new), just browsers are more robust, much faster, and more capable.
  2. Understand that many of the effects in CSS3 are available in IE7 & IE8  with proprietary Microsoft CSS attributes. (rounded corners being the main exception). So, if a client wants to do "HTML5" looking app in IE7+, it is totally possible by use the "MS/IE7" old CSS properties and JavaScript animation lib like jQuery animate.
  3. Understand that JavaScript is completely Object Oriented, and that there is no need to have some meta-framework like Sencha to do good OO in Javascript. See an article I wrote here: http://britesnow.com/html5/javas...
  4. Understand the power of HTML and CSS for good component layout. Twitter/Bootstrap is a great (and probably the best) example of this. Simple HTML structure with simple CSS classes, and you can get some great reusable UI elements. 
  5. Understand that decoupling UI layout/style from behavior (i.e. JS) brings a great deal of performance and flexibility. This could be described as the Twitter/Boostrap way vs the Sencha one. The former has a great decoupling between the HTML/CSS code and the JavaScript (which is not needed to get the layout/style), and the later, Sencha intermingles everything in a foreign all-in-one component UI and OO language (high-learning curve and high-degree of lock-in). (in other words, avoid Sencha like frameworks)
  6. Understand the pros/cons of CSS animations vs JavaScript ones. The pros for CSS transitions is that it is easier for browsers to optimize them, Safari on Mobile/PC and Chrome on PC  even move them to GPUs. The cons is that CSS transitions do not work on older browsers (IE 7 & 8) and that they do not offer much controls (e.g., can't really stop them and no curve path).
  7. Understand the benefits and the "Why" of the Web Workers. In short, it's a way to do multi-threaded work in a single threaded environment. Before HTML5, the only way was with Ajax, and therefore including a server in the picture, now it can just be all local.
  8. Understand the Canvas vs SVG. This one is a tricky one, as there are lot of "social-engineering" baggage behind the technical aspects. On the technical side, SVG is a DOM approach to vector graphic (and consequently retained mode) whereas Canvas is a programmatic and immediate mode approach. The catch is that sometime it seems that Canvas gets a little bit more "love" from the browser vendor developers as SVG always had a love and hate relationship with HTML from its beginning.
  9. DOM Centric MVC. Ok, this is more an opinion than a fact, but given my expertise, HTML5 application developer (not web page developers) needs to have a good understanding of what is MVC, and realize that they do not need "do-it-all" meta frameworks do do MVC in HTML. In fact, with little DOM extension, it is relatively easy do do MVC the DOM way.
  10. onload
    vs jQuery
    $
    (
    document
    ).
    ready
    : which one trigger first? This is a great low level question to ask to anybody that claim they know jQuery. In short, onload trigger after, and
    $
    (
    document
    ).
    ready
    trigger before and is a normalization brought by jQuery.

No comments:

Post a Comment