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

Introducing Webpack

 

https://webpack.github.io/

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

Made with Slides.com