Stack de Desenvolvimento web

Apresentação no 3º FEMUG-AM(Front-end Meet-up Group manaus) que ocorreu no auditório da FUCAPI no dia 22 de outubro de 2016

Transcript

1. Stack de Desenvolvimento Front- end Kirmayr Tomaz
2. Quem sou eu ? Bacharel em Sistemas de Informação pela Universidade Federal do Amazonas Trabalhei em projetos na UFAM/INDT, PoP-AM/RNP, Neemu(Linx) e Startup Fermen.to.
3. Quem sou eu ? Atualmente organizo eventos mensais voltados para a comunidade FEMUG-AM (Front- end Meet-up Group do Amazonas) Participo do Ajuda-Manaus no projeto Open-source Adota-eu. Contato: Twitter : kirmayrtomaz Email : tomaz.kirmayr@gmail.com Github: kirmayrtomaz StackOverflow : http://pt.stackoverflow.com/users/544 62/kirmayr-tomaz
4. Por que é importante pensar numa Stack Front End ? Definir padrões de projetos Ajuda a manter melhor o projeto Reuso A comunidade pode te ajudar
6. Anomalias se tornam comum
7. Melhor integração com outros membros Todos falam a mesma língua
8. Editores
9. Editores Sublime Vantagens Rápido Customização Templates Plugins Gerenciador de pacotes Desvantagens Valor da licença Código proprietário
10. Editores Visual Studio Code • Vantagens • Debugador • Código Livre • Plugins • Autocomplete • Desvanges • Lento • Github • Start: 18.722 • Fork : 5.495
11. Editores Atom • Vantagens • Customizado • Código Livre • Área de configuração • Desvantagens • Lento • Github • star: 31.757 • Forks 5.495
12. Editores Brackets • Vantagens • Código Livre • Extract PSD • Live Preview • Desvantagens • Lento MUuuuuuito lento • Github • Start: 26.225 • Fork: 5.541
14. Google Trands - Editores
15. State of Js - favorite Editor
16. Editores - Editconfig Ajuda no guia de estilo do projeto
17. Git • Projeto projetado e desenvolvido pelo Linus Torvalds para o desenvolvimento do kernel do linux • A Maioria das empresas adotaram esse sistemas de versionamento de código • Github .gitignore • extra Pagar.me - Talk Digging deep into Git
18. Google Trends - Git x SVN
19. Node.js Rodar Javascript no back-end Versões 2015 - v 0.12 Atual - 6.9.1 Motor Chrome V8 Microsoft - Chakra Mozilla - spidernode
20. Gerenciador de pacotes Bower NPM Yarn
21. Gerenciador de pacotes Bower Vantagens Instalador de pacotes bower.json • Desvantages excesso de conteúdoi inserir tags manualmente • Github Star : 14.682 Fork : 1.915
22. Gerenciador de pacotes NPM • Vantagens Principal gerenciador de pacotes do node repositório online de pacotes para node.js Arquivo de configuração Package.json npm-shrinkwrap • Desvantagens Não cachea os arquivos Precisa baixar toda a internet do mundo
24. Gerenciador de pacotes Yarn Desenvolvido pelo facebook a mais de um ano e liberado para a comunidade recentemente Vantagens Trabalhar offline rápido yarn.lock
27. HTML Semântica HEAD Novas API Progressives web apps WebGL Notification Web Works Mobile vibração Bluetooth(Desenvolvimento) Luz do ambiente Batteria Orientação
28. HTML Semântica HEAD Novas API Progressives web apps WebGL Notification Web Works Mobile vibração Bluetooth(Desenvolvimento) Luz do ambiente Batteria Orientação
29. Extração de Assets Photoshop Gimp/PhotoGimp Brackets Avacode
30. Photoshop Photoshop Vantagens Maioria dos designs utiliza Desvantagens Pagar Licença Não tem versão pra linux
31. Gimp / PhotoGimp PhotoGimp Vantagens Código Livre Multiplataforma Editar arquivos Desvantagens Poucas pessoas utilizam ele Compatibilidade com arquivos do photoshop
32. Avacode Avacode Vantagens Extrai assets do photoshop, Exporta css Multiplataforma Desvantagens Pagar licença
33. CSS Mantendo a integridade entre os browsers Normalize Reset
34. Dando manutenção no css sem padrões
35. CSS - Pré processadores Organização de código Mais conhecidos SASS/SCSS LESS Stylus Vatangens Modularização do código Funções Variáveis Nesting
37. Frameworks CSS Bootstrap Foundation MDL Materialize
38. Bootstrap Desenvolvido pelo Twitter Revolucionou a forma de se trabalhar com o css Indo para a versão 4 Vantagens Facilidade de inserir no projeto Muito customizados e milhares de templates Mobile first Código Livre Desvantagens Todos os sites ficaram parecidos Muito pesado Github Start : 102.585
39. Sites com Bootstrap
40. Foundation Vantagens Código Livre Facilidade de utilização Desvantagens Menos configurável Apoio menor da comunidade Github Start : 24.310
41. MDL Desenvolvido pela google para suporte ao material Design Vantagens Utilização de uma interface do MD Pequeno comparado ao Bootstrap Desvantagens Muito verboso Github Start : 23,902
42. Materializecss Baseado do material Design da google Vantagens Trabalhar com SASS Menos verboso Desvantagens Poucos temas Menor suporte comparado ao bootstrap Github Star : 22,169
43. Javascript - Preprocessadores BABEL - ES6 TypeScript
44. ES6 Let const Arrow functions Destructuring Módulos String template functional programming
45. ES6
46. TypeScript Porque você tem um javascript fortemente tipado; Você aproveita o seu conhecimento da POO para escrever melhores aplicativos JavaScript pequenos e grandes; O Angular2 recomenta o uso do TypeScript para o seu desenvolvimento; Equipes globais se beneficiarão do uso do TypeScript visto que os erros podem ser detectados enquanto o código é digitado; http://www.macoratti.net/16/05/net_typscr1.htm
47. TypeScript Porque você tem um javascript fortemente tipado; Você aproveita o seu conhecimento da POO para escrever melhores aplicativos JavaScript pequenos e grandes; O Angular2 recomenta o uso do TypeScript para o seu desenvolvimento; Equipes globais se beneficiarão do uso do TypeScript visto que os erros podem ser detectados enquanto o código é digitado;
50. Frameworks Javascripts Jquery - Angular - 52.875 Angular 2 - 17.513 Aurelia - 8.114 Vuejs - 31.108 React - 52.262
51. Jquery Vantagens facilidade de aprendizado código livre Comunidade grande Plugins Desvantagens programador jquery tamanho Github 41.934
52. Angular Mantido pelo time da google Vantagens Padronização de código Data-binding Componetização Desvantagens Pesado Dificuldade de inserir bibliotecas que não são do angular
53. React Biblioteca desenvolvida pelo Facebook Rápido Facilidade do aprendizado webcomponents Facilidade de se integrar com outros frameworks Precisa utilizar JSX Webpack cr eat e- r eact - app
54. Angular 2 Desenvolvido pelo time da google Vantagens / Desvantagens Typescript Web Components Completamente diferente do primeiro Código mais limpo
55. Vuejs Components Reativo Sintaxe performance versão 2
58. Javascript Teste Mocha Jasmine Enzyme Protactor
59. Javascript - Linter Ajuda a manter a qualidade do código Eslint Jslint https://github.com/airbnb/javascript/tree/master/packages/eslint- config-airbnb
60. Automatizador de tarefas Importância de executar tarefas Concatenação de arquivos Comprimir arquivos js, css, imagens Obfuscar arquivos Gerar Build Testar css e js Grunt Gulp Npm Scripts
61. Grunt Vantagens Grande quantidade de Plugins Código Livre registrador de tarefas Desvantagens lento precisa de plugin específico para determinada situação
62. Gulp Vantagens Grande quantidade de Plugins Código Livre Mais rápido que o Grunt Desvantagens precisa de plugin específico para determinada situação
63. NPM Scripts Não precisa utilizar grunt ou gulp para automatizar tarefas Dificuldade de manutenção
65. Ferramentas de Build Webpack
66. Ferramentas de Build Gulp e Grunt
68. Outros
69. Mobile Cordova/Phonegap Ionic I Ionic II Nenhum React Native react
70. Desktop Electron Atom Slack Visual Studio Code Brave
71. Comunicação com o backend
72. Conclusão
73. Referências https://medium.com/@rogerdudler/front-end-technology-stack-survey-2014-809f7a8c92f3#.v3wwmcspj http://frontendinsights.com/modern-front-end-development-technology-stack/ http://stateofjs.com/ http://stackoverflow.com/research/developer-survey-2016 https://www.toptal.com/front-end/webpack-browserify-gulp-which-is-better https://avocode.com/pricing.html http://tutorialzine.com/2015/12/the-languages-and-frameworks-you-should-learn-in-2016/ https://www.toptal.com/front-end/webpack-browserify-gulp-which-is-better