Curso Javascript do Futuro - ES6/7 / Webpack 2 / TypeScript

Aprenda como utilizar recursos ECMAScript 2015. Nesta aula, vamos focar em orientação a objetos, com os seguintes tópicos.

• Classes
• Constructor
• toString
• Getter / Setter
• Extra: String interpolation

Seguindo a linha dos novos recursos voltados a orientação a objetos no ES6, vamos tratar de:

• Herança
• Sobrescrita de métodos
• Extra: Property shorthand

Antes de seguir adiante, vamos aprofundar no git e forçar lint rules mais criteriosas para padronizar melhor nosso código.

Na continuação das features ES6 mais utilizadas em projetos Angular 2, vamos focar em funções, com as novas arrow functions.

Nessa aula vamos deixar de declarar variáveis com var, e conhecer let e const. Vamos tratar de questões de escopo de variáveis e this léxico através de arrow e shorthand functions. Em nosso exemplo, criamos e consumimos uma promise. Caso você ainda não trabalhe com promises, confira dois links adicionais.

Array destructuring, items spread, filter, Set e Map são novos recursos para ampliar o suporte a coleções de dados.

Uma conversa sobre CommonJS (CJS), Asynchronous Module Definition (AMD), ES6 Modules e ferramentas chamadas package managers, bundlers, loaders e transpilers como Bower, Browserify, SystemJS, Babel, Rollup e Webpack.

Aprenda a exportar e importar através do padrão ES6.

Aprenda conceitos básicos de configuração do webpack.config.js como entries, outputs, context e o que são loaders e plugins.

O webpack.config.js é o arquivo de configuração básico do Webpack. Nesta aula, você aprenderá sua estrutura e conceitos principais como entry, output, loaders e filters.

Com o Webpack Dev Server é possível rodar sua aplicação em um servidor web capaz de atualizar o browser automaticamente sempre que seus fontes forem salvos (vejamos aqui o Hot Reload, já o Hot Module Replacement na próxima). Com o Webpack Dev Middleware, é possível chamar o webpack para servir seu front-end a partir de servidores web como o Express.

Vamos conhecer como adicionar um plugin para mudar o comportamento padrão do Webpack. Através do HotModuleReplacementPlugin, veja como é possível realizar atualizações incrementais de código sem precisar recarregar toda a página.

Embora já tenhamos adicionado um primeiro plugin (HotModuleReplacementPlugin), discutir um pouco mais esse assunto e instalar o HTML Webpack Plugin. Aprenda também o que são loaders. Vamos trabalhar com um que eu mesmo preparei e publiquei no NPM/GitHub, o HTML ES6 Template Loader.

Vamos mergulhar no Babel para entender a utilidade de um transpiler loader e compilar, ou melhor transpilar, código ES6 para ES5.

Aprenda como encadear loaders para manipulação de estilos CSS e auto pre-compilação Sass.

Vamos trabalhar com url-loader para carregar imagens a partir de CSS url(), HTML (por exemplo tags img) ou JS (através de import). Imagens podem ser salvas em arquivos separados ou mesmo serializadas no bundle. Vamos ainda trabalhar com compressão automática de imagens.

Vejamos como inserir mais de um entry point no mesmo bundle (multi entries) e como dividir o processo em bundles diferentes (code splitting). Além de utilizar o HtmlWebpackPlugin para inserir o bundle correto em cada Html template de entrada e o CommonsChunkPlugin para extrair para bundles separados chunks comuns a mais de um entry point.

Confira como o Webpack evita exports desnecessários (tree shaking) e código não inalcançável (DCE - dead code elimination). Vamos ajustar performance budgets realizando minifying e mangling através do UglifyJsPlugin e compressão de assets através do CompressionPlugin

Vamos instalar o compilador TypeScript (tsc) e aprender a tipagem básica do TypeScript, além dos tipos especiais any, void e never, e como lidar melhor com null e undefined.

Continuando a prática anterior, vamos discutir ainda inferência de tipos e geração de arquivos .d.ts

Nesta aula vamos instalar o Awesome TypeScript Loader para compilar arquivos .ts durante o building no Webpack, definir configurações no tsconfig.json e lintar o código através do tslint.

Continuando a resolução de problemas encontrados quando o arquivo index.js foi renomeado para index.ts. Vamos conhecer o projeto @types para resolver tipagens de bibliotecas Javascript, utilizar type assertions para informar ao compilador que funções nativas como getElementById, que por padrão são entendidas como se declarassem o retorno HTMLElement | void, vão na prática retornar o elemento que esperamos. Configuramos também o loader e finalmente garantimos o mesmo pre-requisito para que o tree shaking possa ser efetuado.

Revisitando conceitos acerca de classes, abordamos modificadores de acesso public, private e protected, o modificador readonly e atributos declarados e inicializados no construtor.

Introdução a generics, porém em uma aula prática onde vamos trabalhar com promises, fetch e expressões regulares. - Giphy public key: dc6zaTOxFJmzC

O foco dessa aula é conhecer como criar generics (e o real significado do termo).
Vamos criar uma generic store de messages para colecionar mensagens em Set de Message e persistir em localStorage. Vamos editar o old-messages.js (renomeado old-messages.ts) para carregar essas mensagens salvas em localStorage.

De volta ao playground.ts, vamos dissecar o poder de tipagem do TypeScript. Serão três aulas em sequência. Nesta primeira, trataremos de structural typing e interfaces.

Continuando a aula anterior (mesma branch), vamos tratar de Union e Intersect types, type aliases, literal types e classes abstratas.

Fechando a sequência de três aulas na mesma branch (TypesTypes), vamos abordar os antigos módulos internos do Typescript, rebatizados de namespaces. Vamos discutir também as razões da sua não recomendação face aos módulos ES6.

Primeira aula da série sobre ES7 Decorators, vejamos como criar um ClassDecorator e como exatamente as coisas funcionam após a compilação to TypeScript

Nessa vamos realizar uma atividade prática aplicando decorators tanto a classes quanto a métodos.