{"id":1846,"date":"2017-12-27T16:22:51","date_gmt":"2017-12-27T19:22:51","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2017\/12\/27\/radar-front-end-2018\/"},"modified":"2017-12-27T16:22:51","modified_gmt":"2017-12-27T19:22:51","slug":"radar-front-end-2018","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2017\/12\/27\/radar-front-end-2018\/","title":{"rendered":"Radar Front-End 2018"},"content":{"rendered":"

Esse post \u00e9 uma compila\u00e7\u00e3o de experi\u00eancias de 2017 (e nos \u00faltimos anos pra falar a verdade) como um guia de recomenda\u00e7\u00f5es para o foco em 2018. Analisando as respostas do “State of JS<\/a>” para validar<\/a> nosso Feeling com dados.<\/p>\n

Linguagem<\/h4>\n

Javascript se tornou uma linguagem madura com um ecossistema rico de recursos auxiliares que a tornam presente no servidor, navegador e no seu celular.<\/p>\n

Babel<\/a> se tornou um padr\u00e3o de fato para termos sempre as \u00faltimas novidades do JS, Typescript retornando com sucesso vencendo a concorr\u00eancia contra o Flow<\/a> e Webpack<\/a> como Module Bundler tem aos poucos tornado obsoleto os anteriores (Grunt, Browserify e Gulp).<\/p>\n

\n


\n<\/figure>\n

Indiferente da disputa hist\u00f3rica entre tipos din\u00e2micos e tipos est\u00e1ticos, uma recomenda\u00e7\u00e3o \u00e9 sobre o pensamento imut\u00e1vel<\/a> com Immutablejs<\/a>.<\/p>\n

Design Patterns<\/h4>\n
\n


\n<\/figure>\n

Domain Driven Design<\/a> e outras colet\u00e2neas consagradas de padr\u00f5es est\u00e3o entrando na estante de livros do desenvolvedor Front agora com a maturidade do ecossistema e os Micro-frontends<\/a> se tornando poss\u00edveis com algumas tecnologias como Import Async, seja utilizando o Webpack<\/a> ou diretamente do Babel<\/a>.<\/p>\n

\n


\n<\/figure>\n

Sempre existiu uma grande necessidade do mercado em conservar c\u00f3digo legado em vez de sempre reescrever tudo e agora a tecnologia nos permite uma evolu\u00e7\u00e3o mais suave de como fazer isso.<\/p>\n

Eu e a Kete Martins Rufino<\/a> apresentamos “Transformando um front-end legado em uma React SPA<\/a>” no ReactConfBR<\/a> em outubro que tra\u00e7a algumas dicas e abordagens de como realizar essa evolu\u00e7\u00e3o.<\/p>\n

Frameworks<\/h4>\n

Falando em React<\/a>, junto com Vue<\/a> s\u00e3o as abordagens mais indicadas para focar em 2018 devido a sua recep\u00e7\u00e3o e crescimento aliado a esse pensamento de constru\u00e7\u00e3o em blocos na evolu\u00e7\u00e3o de legados em vez de um Framework de prop\u00f3sito geral que tenta resolver tudo. \u00d3bvio que a escolha de um ecossistema envolve diversos aspectos, inclusive opini\u00e3o pessoal.<\/p>\n

\n


\n<\/figure>\n

Ou\u00e7a o Hispters.tech sobre React<\/a> que tentamos explicar um mundo de coisas sem c\u00f3digo.<\/p>\n

Algumas tecnologias como Reason<\/a>, Elm<\/a> e Clojurescript<\/a> s\u00e3o interessantes, mas a realidade \u00e9 que s\u00e3o relevantes apenas se voc\u00ea tem interesse especificamente em algumas poucas empresas que as utilizam.<\/p>\n

Redux e\u00a0Vuex<\/h4>\n

Se voc\u00ea abrir a lista de empresas que usam React<\/a> ou Vue<\/a> no BR e fizer um search vai perceber que praticamente 99,99% delas usam Redux e Vuex respectivamentes, que s\u00e3o um Centralized State Management.<\/p>\n

\n


\n<\/figure>\n

Em outras palavras isso significa isolar o c\u00f3digo que transforma e manipula seus dados para evitar acoplar nas suas Views tornando a manuten\u00e7\u00e3o e evolu\u00e7\u00e3o bem mais robusta pela organiza\u00e7\u00e3o dessa abordagem.<\/p>\n

Em composi\u00e7\u00e3o a esse Mindset de coes\u00e3o e baixo acoplamento tamb\u00e9m \u00e9 recomendado um Middleware\/Plugin que manipula chamadas ass\u00edncronas chamado de Saga, seja Redux<\/a> ou Vuex<\/a>, para evitar c\u00f3digo dentro das Views.<\/p>\n

Um Centralized State Management ainda facilita o Track e monitoramento de errors<\/a> para PWA.<\/p>\n

\n

https:\/\/m.uber.com\/looking<\/a><\/figcaption><\/figure>\n

Progressive Web\u00a0App<\/h4>\n

PWA n\u00e3o \u00e9 uma tecnologia, \u00e9 uma abordagem para construir Mobile Apps com os padr\u00f5es WEB. No artigo “Progressive Web Apps: a palavra-chave \u00e9 Progressive, n\u00e3o App ou Web<\/a>” tem links, audio, video e slides sobre o tema.<\/p>\n

Uma s\u00e9rie de Apps j\u00e1 tem sua vers\u00e3o PWA: Twitter, Telegram, Instagram, Uber, Pinterest,\u2026 at\u00e9 o Tinder<\/a>.<\/p>\n

Middlewares<\/h4>\n
\n
\n

Qual conceito\/tecnologia de Front voc\u00ea tem prefer\u00eancia em focar no ano da gra\u00e7a de nosso senhor de 2018?<\/p>\n

— Christiano Milfont (@cmilfont) December 12, 2017<\/a><\/p>\n<\/blockquote>\n