Ajudamos empresas a criar produtos digitais de sucesso

A era “moderna” do JS e as SPA’s

Agustín Albertengo / Patrick Porto

SPA (Single Page Application)

1. Uma request http carrega o HTML inicial, js e css . (/index.html)

2. O conteúdo é gerenciado no front-end em vez do back-end, os dados são consultados via API, que retorna em formato json. O servidor não renderiza HTML.

3. As rotas são gerenciadas no front-end, o back-end redireciona todas as requests para o /index.html e a App vai renderizar o conteúdo para essa url.

Características

Goodbye pages, welcome states.

código fonte index.html:

Resultado após chamar /index.html:

Html renderizado apos chamar /index.html

Ferramentas para desenvolver uma SPA

● Linguagem JS (versão ES, subset): ES6, ES7, TypeScript,

CoffeeScript

● Transpilers e Polyfills: Babel, features do ES6

● Frameworks / Libs: React, Angular2, CycleJs

● Module Bundler: WebPack, Browserify, SystemJs.

● Ferramentas de Test: Mocha, Chai, Sinon, Enzyme.

● Gerenciador de Dependências: NPM, Bower, Component.

● Linter: JSHint, ESlint, TSLint.

SPA (Single Page Application)

● Separa a UI do back-end. A mesma API pode ser usada para outro

aplicativo (por ex: mobile)

● Facilita a cobertura da app (testes).

● Simples de escalar

● O look & feel parece com um app mobile, muito mais suave e rápido.

Vantagens:

SPA (Single Page Application)

● Curva de aprendizado forte das ferramentas (frameworks, libs, bundler)

● Mais complexidade em questões de segurança (Auth, XSS)

● Os motores de busca têm problemas para indexar o conteúdo.

● O desenvolvimento de linguagem, novas técnicas e ferramentas é muito

acelerado, difícil escolher.

Problemas:

Modularização

Por que não devo utilizar jQuery?

● O código pertence ao escopo global por padrão.

● Arquivos e módulos não possuem qualquer conexão.

● Dependências implicitamente declaradas.

● Ordem de carregamento substitui ou altera qualquer coisa.

Por que devo utilizar pacotes e módulos?

● O código não pertence ao escopo global por padrão.

● Cada arquivo expõe um módulo.

● Dependências explicitamente declaradas.

● Ordem de carregamento não é relevante.

Web Components

“Um componente pode ser reutilizado diversas vezes em qualquer lugar sem sofrer alterações

acidentais por códigos externos ou modificar outros elementos”

Por que devo utilizar Web Components?

● O código é facilmente reutilizável

● O componente é autossuficiente

● O código possui identidade semântica

● Menos conflitos entre códigos

A hora do código

Considerações finais

www.concretesolutions.com.brblog.concretesolutions.com.br

Rio de Janeiro – Rua São José, 90 – cj. 2121Centro – (21) 2240-2030

São Paulo - Rua Sansão Alves dos Santos, 433 4º andar - Brooklin - (11) 4119-0449