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

https://github.com/flipkart-incubator/phrontend

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

More on http://webpack.github.io/

phrontend-webpack

https://github.com/flipkart-incubator/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