What does workflow for a JS developer constitutes?
Scafolding of a project
Setup of the development enviroment
Setting up of IDE
Setting up of new project with various tasks automated
Various tasks of scafolding
Directory structure
Setting pre-processors
Linting tools for code analysis
Test suite
Build tools
Various approaches, but the popular organizing patterns are below
1) By modules
common - {js|css|scss}
admin
blog
2) By resources
js - {common|admin|blog)
css
scss
Things to consider
Keep external dependencies separate
Do not mix source files and generated files
Organize client side code according to language guidance (service/filters/controllers/directives etc..)
Javascript pre processors
A program that modifies the data to conform with the input and output data of another program
1) Non JS to JS: PyJS, Dart2JS
2) Between versions of JS: Babel, es6-transpiler, traceur
Developers use the transpilers to convert non-js code to JS, the popular languages which people use as an alternative for JS are Python and Dart (language by Google)
Use the features of a future version today. Common used JS
features are arrow functions, classes, generators, modules,
CSS pre processors
They provide simple "programming" ability on top of CSS
Linters
They will help in static code analysis and avoid trivial errors. code formatters as well
Common pitfalls that can identified with linters
Variable not defined
Missing semicolons
Equality checks (undefined == null)
Types of linters
Javascript linter
CSS linter
HTML linter- to verify the semantic tag, W3C spec
Test suite
Run unit, integration, UI tests. Many choices of assertion libraries and test frameworks exist. Choose either TDD/BDD style
Think hard about integrating with Contineous integration with below support
Test runners
Assertion libraries
Cross platform environment
Choosing a proper build tools is tricky since it might not fit in your stack!
Ant
Maven
Grunt
Gulp
Make
What features should my build tool have to support dev productivity?
Support for minification and concatenation
Pre compiling of templates
File watch support
Resizing of images
Pre-processors plugins (Sass/Less/Traceur)
Yeoman(yo) - A scafollding tool for a modern webapp
Analytics (D3Js, Python)
Services (Node, Go)
Design (foundation, ejs)
JS web app (angularjs, mongodb)
Various starter kits for various types of projects.
Battles of vim v/s emacs is ever ending! #DontFight
Choose whichever you like but prefer a modern IDE!
Sublime
Webstorm
Atom
Features to have
Highlighting, navigating
Support for custom templates
Very good support for shortcuts
A good plugin support and community
Popular plugins AngularJS templates Emmet ES6 toolkit Markdown JSlint Auto prefixer
How to measure?
What constitutes it?
Page rendering performance
Runtime performance
Time to serve content
Number of resources
Initial time to load the page
What to optimize?
Critical Rendering Path (CRP)
A sequence of steps the browser goes through to turn “the code and resources required to render the initial view of a web page” into actual pixels on the screen. - Google
HTML => DOM
CSS => CSSOM
How does browser display a page?
It converts the HTML into DOM and CSS into CSSOM, merges them to create a Layer tree.
CSS
Defines how a page has to shown, colors, fonts etc.
Hence browser waits till all css is loaded (render blocking)
Javascript
It can change the structure of the HTML/DOM!
Hence browser waits the parsing of a page when a JS is needed untill it is downloaded and evaluated.
(parser blocking)
Javascript is evil!
It can not only modify the structure of the DOM, but also can tell how it has to look.
Lessons to learn
KISS (Keep it Simple, Short)
Since CSS is render blocking, only put css that is absolutely neccessary.
Separate out CSS into various files based on orientation, media (print/screen)
Since JS is parser blocking, keep the JS which modifies the DOM to minimum
If you don't have any DOM modifying JS, load it asynchronously (defer/async)
Demo time!