Front-end Development at LT

Current FE Stack

• AngularJS 1
• ReactJS
• Ionic 1
• Cordova
• Laravel Blade Templates
• Umbraco??

FE Frameworks 2016

Modern JS Workflow

• ES6 Codebase
• JS transpiler
• App Dependency Bundler
• Development Server
• Linter
• Unit tests

Modern JS Workflow

• ES6 Codebase
• JS compiler
• Build System
• Development Server
• Linter
• Unit tests

Current JS Version @ LT

ES5 === normal javascript

ES6 - ECMAScript 2015

• Latest JS Spec/Standard
• Significant feature upgrades to JS
• Not all browsers support ES6
• Very well documented
• Improves coding standards
• Encourages de-coupled code
• Makes code more readable & maintable

ES6 Notable Features

• Modules
• Arrow functions
• Classes
• Template strings
• Rest/Spread
• Let keyword
• Destructuring

ES6 - To the rescue

var vm = this;
vm.countClick = 0;

• JS compiler
• Transform ES6 to ES5
• Write ES6 in your project, run ES5 in
  any browser

setTimeout(() => {
  console.log('es6 today!')
}, 1000)

setTimeout(function () {
  console.log('es6 today!');
}, 1000);

ES5

ES6

.babelrc file

{ "presets": ["es2015"] }

Specify babel-plugins:

npm install --save-dev babel-preset-es2015

Build System
Dependency Bundler

<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="js/services/authentication.js"></script>
<script src="js/utility.js"></script>
<script src="js/controllers/splashCtrl.js"></script>
<script src="js/controllers/introCtrl.js"></script>
<script src="js/controllers/dashboard/termsCtrl.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/controllers/signup/verifyNumberCtrl.js"></script>
<script src="js/controllers/signup/verifyCodeCtrl.js"></script>
<script src="js/controllers/signup/createPinCtrl.js"></script>
<script src="js/controllers/signup/createPinConfirmCtrl.js"></script>
<script src="js/controllers/signup/successCtrl.js"></script>
<script src="js/controllers/userDocuments/scanBarCodeCtrl.js"></script>
<script src="js/controllers/userDocuments/uploadIDCtrl.js"></script>
<script src="js/controllers/userDocuments/previewIDCtrl.js"></script>
	

<script src="bundle.js"></script>

Problem:

Solution:

Webpack Config File

module.exports = {
	entry: './index.js',
	output: {
		filename: 'bundle.js',
		path: './dist'
	}
}

webpack --config webpack.config.js --watch

CLI:

Webpack Entry File

import angular from 'angular'
import MainController from './MainController'

angular
    .module('app', [])
    .controller('mainController', MainController);

angular.bootstrap(document, ['app']);

<script src="bundle.js"></script>

Bundled:

Webpack Loaders

module.exports = {
	entry: './index.js',
	output: {
		filename: 'bundle.js',
		path: './dist'
	},
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    }
}

Transform a file before bundling step

JS Fatigue

• Built by Facebook
• UI library
• Un-opinionated
• Ships with no Router
• Integrates easily into any existing app
• Focussed on JS with very little helpers
• State is managed inside components
• React Native for mobile development

ReactJS Code

import React from 'react'
import ReactDOM from 'react-dom'
import HomePageModal from './components/HomePageModal'

const Home = React.createClass({

	getInitialState: function() {
    		return {
		    modalIsOpen: true,
		}
	},

	closeModal(){
		this.setState({modalIsOpen: false})
	},

	
	render: function() {
		return (
    			<HomePageModal closeModal={this.closeModal}  />
		)
	}
});

ReactDOM.render(<Home />, document.getElementById('advent-calendar'));