Ecossistema Front-End

Ecossistema Front-End Thiago Alves @taltk9

Thiago Alves Luiz Front-End Developer @taltk9 /taltk9

codeminer42.com

Estamos contratando!!! [email protected]

Codeminer 42 Novo Hamburgo - RS

Papo de Dev

github.com

linkedin.com

Ecossistema

Conjunto de elementos que interagem a fim de constituir um
sistema estável — O'Neil

Front-End

Camada de apresentação visual de um site ou aplicação web

Conjunto de elementos que interagem a fim de estruturar informações
visuais que permitam a comunicação de usuários com aplicações web

· HTML · CSS · JavaScript · UX · SEO
· Acessibilidade

Entender ao máximo as necessidades

jquery.com

// jQuery $('#element-id') // JavaScript document.getElementById('element-id')

// jQuery $('.element-className') // JavaScript document.querySelector('.element-className')

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>
<body> <ul id="my-list"></ul> </body> </html>

jQuery var $myList = $('#my-list'); $.ajax({ url: 'https://api.domain.com/some-list', success: function
(resp) { var data = resp.data; data.map(function (value) { var $myListItem = $('<li>').html(value.title); $myList.append($myListItem); }); } });

HTML Resultante <!DOCTYPE html> ... <body> <ul id="my-list"> <li>Item 1</li>
<li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>

Template Engines

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>
<body> <ul id="my-list"></ul> <script id="template" type="text/template"> {{#each data}} <li>{{ title }}</li> {{/each}} </script> <script src="template-engine.js"></script> </body> </html>

Sem template engine var $myList = $('#my-list'); $.ajax({ url: 'https://api.domain.com/some-list',
success: function (resp) { var data = resp.data; data.map(function (value) { var $myListItem = $('<li>').html(value.title); $myList.append($myListItem); }); } });

Com template engine var $myList = $('#my-list'); var source =
$("#template").html(); var template = TemplateEngine.compile(source); $.ajax({ url: 'https://api.domain.com/some-list', success: function (resp) { $myList(template(resp)); } });

handlebarsjs.com

mozilla.github.io/nunjucks

Mas isso é o básico...

Alguns padrões foram estabelecidos

Boilerplates

html5boilerplate.com

modernizr.com

necolas.github.io/normalize.css

github.com/seanpowell/Email-Boilerplate

Bootstrap

getbootstrap.com

foundation.zurb.com

purecss.io

Muitas requisições e updates

Controle do fluxo de dados e aplicação

Frameworks

backbonejs.org

emberjs.com

angularjs.org

Aplicações tornaram-se mais complexas

... <link rel="stylesheet" href="style-1.css"> <link rel="stylesheet" href="style-2.css"> <link rel="stylesheet" href="style-3.css">
<link rel="stylesheet" href="style-4.css"> <link rel="stylesheet" href="style-5.css"> <link rel="stylesheet" href="style-6.css"> ... <script src="script-1"></script> <script src="script-2"></script> <script src="script-3"></script> <script src="script-4"></script> <script src="script-5"></script> <script src="script-6"></script> <script src="script-7"></script> <script src="script-8"></script> <script src="script-9"></script> <script src="script-10"></script> <script src="script-11"></script> <script src="script-12"></script> <script src="script-13"></script> <script src="script-14"></script> <script src="script-15"></script> ...

· Projetos mais complexos · Manutenção · DRY - Don't
Repeat Yourself

Tooling

· Linha de Comando · Automatizar tarefas · Transformar arquivos
· Controlar libs e plugins

gruntjs.com

gulpjs.com

bower.io

Manter CSS é chato!!!

Desculpem :(

Pré-Processadores

· Separar CSS por feature · Criar variáveis e funções
· Automatizar sprites etc

sass-lang.com

lesscss.org

compass-style.org

JavaScript com novas features

ES2015 (ES6)

// Antes var fn = function (x) { return x
+ 1; }; // Depois const fn = (x) => x + 1

Navegadores não suportam totalmente a nova versão

babeljs.io

Modularizar aplicações web se tornou uma solução viável

webpack.github.io

Componentizar interfaces surgiu como uma nova abordagem

polymer-project.org

facebook.github.io/react

· Testes · Acessibilidade · Meta Data

Comunidade

html5rocks.com

jsrocks.org

maujor.com

Eventos

braziljs.org/conf

frontinsm.com.br

Obrigado! @taltk9

Ecossistema Front-End

Ecossistema Front-End

More Decks by Thiago Alves Luiz

Other Decks in Programming

Featured

Transcript