Front end workflow 

&

Performance optimization

 Front end workflow

What does workflow for a JS developer constitutes?

  • Scafolding of a project
  • Setup of the development enviroment
  • Setting up of IDE

 Workflow - Scaffolding 

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

 

 Scaffolding - Dir structure

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..)
 

 Scaffolding - Pre processors

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, 

 Scaffolding - Pre processors

CSS pre processors

They provide simple "programming" ability on top of CSS

  • Simple loops
  • Variables
  • Functions
  • Macros
  • LESS
  • SASS
  • Stylus

 Scaffolding - Linting

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

 Scaffolding - Test suite

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

  • Jasmine
  • Mocha
  • Qunit

Assertion libraries

  • Should JS
  • Chai
  • assert js
  • Code coverage report
  • Cross browser compatiblity

Cross platform  environment

  • BrowerStack
  • Karma

 Scaffolding - Build tools

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)

 

 Workflow - Development setup

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.

 Workflow - IDE

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

Front - end performance

How to measure?

  • Page speed insights
  • YSlow
  • Chrome dev tools

What constitutes it?

Page rendering performance

Runtime performance

 

Time to serve content

Number of resources

Initial time to load the page

 

What to optimize?

Performance - Page rendering

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

Performance - Page rendering

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)

Performance - Page rendering

Javascript is evil!

It can not only modify the structure of the DOM, but also can tell how it has to look.

Performance - Page rendering

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) 

Performance - Page rendering

Demo time!

References

Thank you

Made with Slides.com