Building a JavaScript Development Environment=Cory House;Note=Erxin.txt

Building a JavaScript Development Environment=Cory House;Note=Erxin

# You need a starter kit 
- 


# Editors and configuration 
- what to look for a javascript editor 
    + support ES2015+ 
    + parse es6 imports 
    + report unused import 
    + automated refactoring 
    
    + framwork intelligence 
    + built-in terminal(optional)
    
- editors 
atom 
webstorm 
brackets 
vscode 

    + not exactly javascript edtors 
    vs 
    eclipse 
    netbreans 
    
    + front end vs back end 
    use different editor for front and back end development, choose best tool for the job 
    
    
# Transpiling 
- history and future 
- javascript versions 
1997        1998        1999        2009        2015    2016                                        2017 
es1     -> es2    ->  es3     ->  es5   ->   es6  -> es7(two new features)    ->   es8 (async await, class props)
- transpilers, there are 100s of language could transpile to javascript 
    + babel
    modern standards-based js, today 
    levarage full js ecosystem 
    eslint not support typescript but support babel very good 
    use experimental features earlier 
    no type defs, annotations required 
    es6 imports are statically analyzable 
    test, lint, babel, great libs, ide=safety 
    
    + typescript, superset of javascript
    add type safty 
    enhanced autocompletion 
    safer refactoring 
    clearer intent 
    
    some ide may not handle typescript 
    
    + elm
    compiles dwon to js 
    clean syntax 
    immutable data structures 
    friendly errors 
    all errors are comple-time errors 
    interops with js 
    
    there is a learning curve it use difference syntax 
    
# Bundling 
- CommonJS doesn't work in web browsers 
- package project into file(s)
- improve node performance, node require is slow 
- module formats 
AMD
CommonJS 
Bundlers 
Implement ES6 modules and bundling 

- select a module format 
IIFE 
AMD 
CJS CommonJS
UMD, universal module definition 
ES6 modules 

    + IIFE 
    global; //bad 
    
    (function(){
    
    })();
    
    + AMD 
    define(['jq', function(jq) {
    });
    
    + CommonJS 
    var jquery = require('jquery');
    
    + ES6 module, this is good for feature development 
    import jQuery from 'jquery'
    
    + for future development we should use es6 modules 
    standardized 
    statically analyzable, you can't declare module dynamically 
        * improve autocompletion
        * intelligent refactoring 
        * fails fast 
        * tree shaking 
    easy to read , support named imports 
    default exports 
    
- select a bundler 
    + requirejs 
    first popular bundler, utilzes and helped popularize AMD pattern 
    
    + browserify, the first bundler to reach mass adoption 
    bundle npm packages for the web, use CommonJS pattern 
    it is design plugin based 
    
    + webpack, bundles more than just js 
    import css, images, etc like js 
    support inline 
    built in hot reploading web server to reflactor code changes 
    support bundle splitting 
    hot module reloading for client changes without need webpage reload 
    webpack 2 comming soon support tree shaking 
    
    + rollup, support tree shaking 
    faster loading production code 
    it is a new tool maybe less document and have bugs 
    no hot reloading and code splitting yet 
    
    + jspm 
    uses systemjs a universal module loader 
    can load modules at runtime 
    has its own package manager 
    can install from npm git 
    uses rollup 
    
    + bundlers 
    browserify, simple you have to handle css, image by yourself 
    webpack, comprehensive 
    rollup, tree-shaking, performance 
    jspm, runtime loader package manager 
    
    this course choose webpack 
   

# Linting 
- why lint 
- lint tools 
- configuration approaches for eslint 
- setup eslint 


# Testing and continue integration 
- 6 key testing decisions 


# Project structure 

# Production build 
- minification 
shorten variable and function names 
remove comments 
remove whitespace and new lines 

    + configure webpackge 
- sourcemaps 
- dynamic html handling 
- cache busting 
- bundling splitting, don't have to download the entire application when just parts of changes 
- error logging 

# Production deploy 
- separating the UI from the API 
- hosting providers 
- automated depolyment 
- handling starter kit updates 
    + yeoman 
    + github 
    + npm 
    
- inspiration 
- challenge 

# VSCode javascript documentation 
https://code.visualstudio.com/Docs/languages/javascript