The modern

front-end engineer's toolbox

Jai Santhosh

UI Engineer @ Flipkart

@jaisanth

@nodeday

#nodejs

Node.js 

changed the way

we developed 

web applications

 

 

developer productivity went to

a whole new level

What does it involve?

Transpiling

Linting

CSS  Preprocessors

Task runners

Bundling 

DEVELOPMENT

What does it involve?

Transpiling

Linting

CSS  Preprocessors

Task runners

Bundling 
Unit Tests 

Functional Tests

Test reports

DEVELOPMENT

TESTING

What does it involve?

Transpiling

Linting

CSS  Preprocessors

Task runners

Bundling 
Unit Tests 

Functional Tests

Test reports
Minification

Hashing filenames

Deployment

 

Multiple ENVs

DEVELOPMENT

TESTING

DEPLOYMENT

What DID

we develop?

  • Richer Web into our Native Apps
  • Single-page apps in Webviews
  • Some amount of precaching the static assets of SPAs
  • Smoother experience
  • Native-like behaviour

plethora of tools!!

babel

traceur

babel

traceur

jscs

eslint

jshint

babel

traceur

jscs

eslint

jshint

sass

less

cssinjs

stylus

postcss

babel

traceur

gulp

grunt

broccoli

brunch

jscs

eslint

jshint

sass

less

cssinjs

stylus

postcss

webpack

jspm

browserify

requirejs

babel

traceur

gulp

grunt

broccoli

brunch

jscs

eslint

jshint

sass

less

cssinjs

stylus

postcss

webpack

jspm

browserify

requirejs

babel

traceur

gulp

grunt

broccoli

brunch

jscs

eslint

jshint

sass

less

cssinjs

stylus

postcss

jsdom

selenium

phantomjs

mocha

chai

jest

webpack

jspm

browserify

requirejs

babel

traceur

gulp

grunt

broccoli

brunch

jscs

eslint

jshint

sass

less

cssinjs

stylus

postcss

jsdom

selenium

phantomjs

mocha

chai

jest

 

 

jenkins

express

node-haste

yeoman

 

 

What Did

we choose?

webpack

jspm

browserify

requirejs

babel

traceur

gulp

grunt

broccoli

brunch

jscs

eslint

jshint

sass

less

cssinjs

stylus

postcss

jsdom

selenium

phantomjs

mocha

chai

jest

 

 

jenkins

express

node-haste

yeoman

 

 

phrontend JS

webpack

babel

  • ES6/ES2015 syntax
  • Developer Goodness
  • Clean Readable Code

phrontend js

in-house js framework for simple, reactive interfaces

simple flux implementation

phrontend JS

phrontend js

OPEN sourced!!

phrontend JS

REACT

  • No longer just a View Library
  • Evolved as a framework 
  • react core  & react-dom are separated
  • react-native, react-canvas
  • react-motion & a lot more react-*

 

https://github.com/reactjs/react-future

DATA in REACT

  • Huge forays done of late
  • Relay & GraphQL
  • falcor
  • redux
  • Applications have become more "reactive"

 

 

POSTcss

  • JS framework to manipulate CSS
  • Its so damn fasstttt!!
  • Lots and lots of css plugins!
  • "cssnext" - write future proof css
  • "autoprefixer" 
  • you can still write sass code -      but try not to!
  • Can be used with gulp, grunt, webpack, etc.

POSTcss

to

CSS MODULES

SASS & LESS are not CSS

 

Localize CSS for your application "components"

 

Composition is everything

 

Single responsibility modules

 

"Interoperable CSS" - http://glenmaddern.com/articles/interoperable-css

webpack

Module Bundler

 

Modules with dependencies -> Static Assets

 

Code splitting

 

Webpack loaders

 

Plugin system

 

Highly modular and configurable

 

 

webpack

Module Bundler

 

 

 

webpack

Module Bundler

 

 

 

webpack

Modules with dependencies -> Static Assets

 

 

 

 

$ webpack ./index.js bundle.js
$ webpack -w --devtool source-map

with Watch, Source Maps

webpack

Modules with dependencies -> Static Assets

 

 

 

 

You can also use a config file - webpack.config.js

{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}
$ webpack -w

webpack

Modules with dependencies -> Static Assets

 

 

 

 

You can also use a config file - webpack.config.js

{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        // Make sure to use [name] or [id] in output.filename
        //  when using multiple entry points
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}
$ webpack -w

webpack

webpack loaders

 

 

 

 

module.loaders: [
  {
    // "test" is commonly used to match the file extension
    test: /\.jsx$/,

    // "include" is commonly used to match the directories
    include: [
      path.resolve(__dirname, "app/src"),
      path.resolve(__dirname, "app/test")
    ],

    // "exclude" should to used to exclude exceptions
    // try to prefer "include" when possible

    // the "loader"
    loader: "babel-loader"
  }
]

webpack

webpack-dev-server

 

webpack-dev-middleware

 

 

 

 

module hot-loading

$ webpack-dev-server --content-base build/
$ webpack-dev-server --content-base build/ --hot

webpack plugins

phrontend-webpack

A webpack config maker

 

testing

  • jest
  • istanbul
  • Pick whatever works for you! :)

 

What is the future?

  • ES7/ ES2016
  • Node 4.0 - ES6 in Node
  • ES6 modules vs loader in Node 
  • Macros in JavaScript  (sweet.js)

Questions?

@nodeday

#nodejs

Thank you!! 

@nodeday

#nodejs