Curso Javascript do Futuro - ES6/7 / Webpack 2 / TypeScript
4.4 (142 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
920 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso Javascript do Futuro - ES6/7 / Webpack 2 / TypeScript to your Wishlist.

Add to Wishlist

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

Aprenda como codificar hoje o Javascript que você certamente vai ter que saber amanhã. Cupom LANCAMENTO75 75% OFF
4.4 (142 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
920 students enrolled
Last updated 4/2017
Portuguese
Curiosity Sale
Current price: $10 Original price: $40 Discount: 75% off
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Dominar novos recursos ECMAScript 2015
  • Aprender a usar o Babel para transpilar e garantir abrangência de browsers
  • Dominar novas recursos ECMAScript 2016
  • Criar bundles Webpack 2 otimizados para produção
  • Tirar o máximo da eficiência ao desenvolver com Webpack Dev Server / Webpack Dev Middleware
  • Dominar Typescript 2.2
View Curriculum
Requirements
  • Noções básicas de Javascript
  • Noções básicas de HTML
  • Noções elementares de CSS não são necessárias mas ajudam :)
Description

A especificação 262 do padrão ECMAScript que rege o Javascript vem evoluindo rapidamente. Podemos nos arriscar a dizer que rápido como nenhuma outra linguagem no mercado atual. Manter-se antenado é fundamental.

Neste curso você aprenderá as mais importantes features das edições 2015, 2016 e mesmo 2017, também conhecidas como ES6, ES7, ES8 ... ESNext. Para desenvolver, empacotar e rodar, você não pode deixar de conhecer o Webpack 2, o mais evoluído e popular JS bundler do mercado, recomendado pelos desenvolvedores do React e do Angular Cli. Aprenda como integrar o Webpack com o Babel para "transpilar" código ESNext em algo que os browsers suportam atualmente.

Aprenda ainda a programar em TypeScript, uma linguagem superset do Javascript que adiciona definições de tipos com flexibilidade e elegância impressionantes.

Elaborado de forma prática e didática, este curso visa mantê-lo sempre atualizado sobre as mais quentes features do Javascript.

Who is the target audience?
  • Estudantes de engenharia ou ciência da computação
  • Front End Developers
  • Back End Developers
  • Front End Designers
  • Full Stack Developers
  • Nenhum acima. Qualquer pessoa com noções fundamentais de web (HTML/CSS/Javascript)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
33 Lectures
06:40:20
+
Iniciar aqui
4 Lectures 34:38

Apresentação geral do curso, ementa e projeto de apoio.

Preview 07:54

Como instalar o NodeJS através de gestor de versões como n ou nvm.

Instalando NodeJS e NPM
08:36

Instalação e configuração do Visual Studio Code para uso durante o curso. Além de dicas de plugins para qualidade e produtividade.

Visual Studio Code
17:44

Script de configuração total no Mac OS
00:24
+
ES6 / ES2015 / Ecmascript 2015
8 Lectures 01:37:53

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
Preview 19:11

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
ES6 - Herança
06:58

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

Sobre o Git, NPM scripts e Lint (eslint)
14:34

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

ES6 Funções
06:14

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.

ES6 Escopo
19:20

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

ES6 Arrays e Collections
11:57

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.

Javascript Modules e ferramentas
10:57

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

ES6 Modules
08:42

Classes, herança, arrow functions, destructuring, spread, let, const, módulos, vamos revisar todos esses tópicos abordados até aqui.

Fixando conceitos ES6
4 questions
+
Webpack 2
10 Lectures 02:09:46

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

Preview 15:06

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

O arquivo webpack.config.js
05:47

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.

Webpack Dev Server e Webpack Dev Middleware
13:25

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.

HMR - Hot Module Replacement
08:21

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.

Webpack 2 Plugins e Loaders
14:50

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

Transpiling com Babel
08:52

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

CSS e SASS Loaders
15:47

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.

Carregando imagens
13:20

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.

Multi entries e Code Splitting
19:10

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

Tree Shaking, Dead Code Elimination e Performance Tuning
15:08
+
TypeScript
10 Lectures 02:07:48

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.

Preview 15:33

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

Inferência de tipos e declarations
04:56

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.

Aprofundando nas configurações - Parte 1
11:21

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.

Aprofundando nas configurações - Parte 2
12:11

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

Classes e modificadores
16:25

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

Preview 19:17

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.

Generics - Parte 2
15:01

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.

Structural Typing e Interfaces
15:31

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

Tipos compostos, types aliases e classes abstratas
11:54

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.

Módulos e namespaces
05:39
+
Above & beyond
1 Lecture 10:16

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

ES7 Decorators
10:16
About the Instructor
Jose Berardo Cunha
4.4 Average rating
251 Reviews
1,592 Students
3 Courses
Desenvolvedor e professor na Especializa

Sou desenvolvedor desde 1999, certificado pela Sun/Oracle nos níveis Java Programmer (SCJP) e Java Web Component Developer (SCWCD). Certificado pela Zend em PHP 4 e PHP 5.

Sou professor há mais de 15 anos, tendo ministrado cursos de Java, PHP, Javascript, HTML5, Android e Bancos de Dados PostgreSQL, na Especializa Treinamentos, empresa a qual também sou diretor desde 2005.

Atualmente moro em Sydney, Austrália, onde atuo como Software Engineer na Freelancer.com. Empresa com mais de 20 milhões de clientes entre employers e freelancers.