Ecossistema Front-End

Transcript

1. Ecossistema Front-End Thiago Alves @taltk9
2. Thiago Alves Luiz Front-End Developer @taltk9 /taltk9
3. codeminer42.com
4. Estamos contratando!!! thiago.alves@codeminer.com
5. Codeminer 42 Novo Hamburgo - RS
8. Papo de Dev
9. github.com
10. linkedin.com
11. Ecossistema
12. Conjunto de elementos que interagem a fim de constituir um sistema estável — O'Neil
13. Front-End
14. Camada de apresentação visual de um site ou aplicação web
15. Conjunto de elementos que interagem a fim de estruturar informações visuais que permitam a comunicação de usuários com aplicações web
17. · HTML · CSS · JavaScript · UX · SEO · Acessibilidade
21. Entender ao máximo as necessidades
23. jquery.com
24. // jQuery $('#element-id') // JavaScript document.getElementById('element-id')
25. // jQuery $('.element-className') // JavaScript document.querySelector('.element-className')
26. AJAX
31. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="my-list"><!-- empty --></ul> </body> </html>
32. 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); }); } });
33. 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>
34. Template Engines
35. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="my-list"><!-- empty --></ul> <script id="template" type="text/template"> {{#each data}} <li>{{ title }}</li> {{/each}} </script> <script src="template-engine.js"></script> </body> </html>
36. 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); }); } });
37. 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)); } });
38. handlebarsjs.com
39. mozilla.github.io/nunjucks
40. Mas isso é o básico...
41. Alguns padrões foram estabelecidos
42. Boilerplates
43. html5boilerplate.com
44. modernizr.com
45. necolas.github.io/normalize.css
46. github.com/seanpowell/Email-Boilerplate
47. Bootstrap
48. getbootstrap.com
49. foundation.zurb.com
50. purecss.io
51. Muitas requisições e updates
52. Controle do fluxo de dados e aplicação
53. Frameworks
54. backbonejs.org
55. emberjs.com
56. angularjs.org
57. Aplicações tornaram-se mais complexas
58. ... <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> ...
60. · Projetos mais complexos · Manutenção · DRY - Don't Repeat Yourself
61. Tooling
64. · Linha de Comando · Automatizar tarefas · Transformar arquivos · Controlar libs e plugins
65. gruntjs.com
66. gulpjs.com
67. bower.io
68. Manter CSS é chato!!!
69. Desculpem :(
70. Pré-Processadores
71. · Separar CSS por feature · Criar variáveis e funções · Automatizar sprites etc
72. sass-lang.com
73. lesscss.org
74. compass-style.org
75. JavaScript com novas features
76. ES2015 (ES6)
77. // Antes var fn = function (x) { return x + 1; }; // Depois const fn = (x) => x + 1
78. Navegadores não suportam totalmente a nova versão
79. babeljs.io
80. Modularizar aplicações web se tornou uma solução viável
81. webpack.github.io
82. Componentizar interfaces surgiu como uma nova abordagem
83. polymer-project.org
84. facebook.github.io/react
85. · Testes · Acessibilidade · Meta Data
86. Comunidade
87. html5rocks.com
88. jsrocks.org
89. maujor.com
90. Eventos
91. braziljs.org/conf
92. frontinsm.com.br
93. Obrigado! @taltk9