Large-scale Angular apps with ES6 and Webpack
Daniel Popescu | Computer Scientist
Adobe Systems Romania
"The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application"
Justin Meyer, author JavaScriptMVC
ES6 Template Strings
const someData = 'My Data';
const myString = `This is my string: ${someData}`;
console.log(myString); // This is my string: My Data
const longString = `First line
Second line
Third line`;
ES6 Arrow Functions
var obj = {
test: 'test',
items: ['a'],
doStuff(){
this.items.forEach((item)=>{
console.log(`${this.test} - ${item}`); // test - a
});
}
};
ES6 Classes
class Base {
constructor(name = 'Default'){
this._name = name;
}
sayHello(){
return `Hello, ${this._name}`;
}
}
const baseInstance = new Base();
baseInstance.sayHello(); // Hello, Default
class ExtendedBase extends Base {
sayHello(){
return `Extended - ${super.sayHello()}`;
}
}
const extendedInstance = new ExtendedBase('Dude');
extendedBase.sayHello(); // Extended - Hello, Dude
ES6 Getters And Setters
class Test {
constructor(name){
this._name = name;
}
get name(){
return this._name;
}
set name(value){
this._name = value;
}
}
const test = new Test('Dude');
test.name // Dude
test.name = 'Another Dude';
test.name // Another Dude
Webpack Loaders
import 'MyStyle.css';
// The css file will be included inline.
import 'MyStyle.scss';
// The sass file will be compiled and included inline as css
import MyTemplate from 'MyTemplate.html';
// The html will be included as raw test in a variable
import MyAwesomeClass from 'MyAwesomeClass.js';
// The JS class will be imported as a variable
import MyAwesomeClass from 'MyAwesomeClass.es6';
// The ES6 JS class will be transpiled to ES5 and then imported as a variable
import MyAwesomeClass from 'MyAwesomeClass.ts';
// The TypeScript JS class will be transpiled to ES5 and then imported as a variable
And many more loaders and plugins...
Coding Time :)
Thank you
Large-scale Angular apps with ES6 and Webpack
By Daniel Popescu
Large-scale Angular apps with ES6 and Webpack
- 289