O ecossistema Front-End

O ECOSSISTEMA FRONT-END

Thiago Alves Luiz Thiago Alves Luiz taltk9 taltk9 Santa Maria
- RS Santa Maria - RS

ECOSSISTEMA

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

FRONT-END

FRONT-END Também conhecido como client-side, é toda a parte de
apresentação visual de um site ou aplicação da Web.

O ECOSSISTEMA FRONT-END Conjunto de elementos que interagem a fim
de estruturar informações, aplicar design e permitir interações do usuário em aplicações da Web.

O ECOSSISTEMA HTML CSS JAVASCRIPT FRONT-END

O AMBIENTE DO FRONT-END

O AMBIENTE DO O AMBIENTE DO FRONT-END

http://salveaweb.com/

WEBPLATAFORM

http://www.webplatform.org/

PRIMEIRO COMPONENTE DE QUALQUER PÁGINA WEB DEFINE A ESTRUTURA E
OS ELEMENTOS DO DOCUMENTO LINGUAGEM DE MARCAÇÃO

DOCTYPE <!doctype html> CODIFICAÇÃO DE CARACTERES <meta charset="utf-8"> SEM ATRIBUTO
TYPE <link> <script> DRAG AND DROP CONTENT EDITABLE FORMS 2.0 NOVAS TAGS <audio> <video> <canvas> <figure> DATA ATRIBUTES <tag data-foo=”value”> SEMÂNTICA

FALANDO DE SEMÂNTICA <article> <header> <footer> <aside>

http://www.html5rocks.com/

ANIMATIONS AND TRANSITIONS FUNCTIONS calc() ADICIONAR CONTEÚDO content: “Text” ADVANCED
SELECTORS E:nth-last-child(n) E:hover GRADIENTS WEBFONTS BORDER IMAGES MULTIPLE BACKGROUNDS 3D TRANSFORMS

http://www.maujor.com/index.php

https://github.com/necolas/idiomatic-css

JAVASCRIPT

MELHORA A EXPERIÊNCIA DO USUÁRIO CONTROLA EVENTOS COMPORTAMENTOS EM GERAL

GEOLOCALIZAÇÃO WEB AUDIO API WEBGL WEB SOCKETS WEB WORKERS AJAX
XMLHttpRequest

ASYNCHRONOUS JAVASCRIPT AND XML AJAX INFORMAÇÕES DE FORMA ASSÍNCRONA TORNAR
NAVEGAÇÃO MAIS AGRADÁVEL REAPROVEITAMENTO DE INFORMAÇÃO

$( '.minha-classe' ) document.querySelector( '.minha-classe' )

ECMASCRIPT 6

ARROW FUNCTIONS CLASSES PARAMETROS TEMPLATE STRINGS BLOCK SCOPES MODULES PROMISSES

ECMASCRIPT6 ARROW FUNCTIONS

ECMASCRIPT6 CLASSES

ECMASCRIPT6 PARAMETROS

ECMASCRIPT6 TEMPLATE STRINGS

ECMASCRIPT6 BLOCK SCOPES

ECMASCRIPT6 MODULES

ECMASCRIPT6 PROMISSES

https://github.com/google/traceur-compiler

http://es6rocks.com/

http://www.jstherightway.org/

http://eloquentjavascript.net/

sudo apt-get install -y nodejs

BOILERPLATE

http://html5boilerplate.com/

http://modernizr.com/

http://necolas.github.io/normalize.css/

http://htmlemailboilerplate.com/

BOOTSTRAP

http://getbootstrap.com/

http://foundation.zurb.com/

http://purecss.io/

PROCESSADORES PRÉ

CSS PODE SER REPETITIVO MONTAR SPRITES É CHATO CONSISTÊNCIA QUALIDADE
DOCUMENTAÇÃO

http://sass-lang.com/

http://lesscss.org/

http://compass-style.org/

FRAMEWORKS

http://jqueryui.com/

http://alloyui.com/

http://backbonejs.org/

http://emberjs.com/

https://angularjs.org/

http://sennajs.com/

TEMPLATES

DRY ~ DON'T REPEAT YOURSELF PERFORMANCE PRODUTIVIDADE

http://handlebarsjs.com/

http://mozilla.github.io/nunjucks/

COMPONENTES A ERA DOS

https://www.polymer-project.org/

http://customelements.io/

http://facebook.github.io/react/

MOBILE DESENVOLVIMENTO

COMUNIDADE

SOBRE COMUNIDADE VÁ A EVENTOS, FAÇA NETWORKING PARTICIPE DE PROJETOS
OPENSOURCE FAÇA UMA CONTA NO GITHUB

BOLHA CONHEÇA A

OBRIGADO!!! OBRIGADO!!! twitter.com/taltk9 twitter.com/taltk9 github.com/taltk9 github.com/taltk9

O ecossistema Front-End

O ecossistema Front-End

More Decks by Thiago Alves Luiz

Other Decks in Technology

Featured

Transcript