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'));
Front-end Development @ LT
By Kurt Farao
Front-end Development @ LT
Analyse current FE Stack and what other options are out there.
- 133