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

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

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