{"id":1861,"date":"2016-11-01T07:56:34","date_gmt":"2016-11-01T10:56:34","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2016\/11\/01\/os-musculos-do-javascript\/"},"modified":"2016-11-01T07:56:34","modified_gmt":"2016-11-01T10:56:34","slug":"os-musculos-do-javascript","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2016\/11\/01\/os-musculos-do-javascript\/","title":{"rendered":"Os m\u00fasculos do Javascript"},"content":{"rendered":"

Existem v\u00e1rias reclama\u00e7\u00f5es sobre a Fadiga do Javascript<\/a>, que seria um excesso de bibliotecas pra aprender.<\/p>\n

O choro \u00e9 livre principalmente para quem detesta estudar e aprender coisas novas, mas Javascript ainda est\u00e1 longe de atingir o grau de maturidade de outras plataformas e necessita de muito mais.<\/p>\n

Resolvi postar sobre isso depois de ouvir caras que respeito muito falando sobre algo que discordo vorazmente no Hipsters.tech #16<\/a> sobre essa linha de racioc\u00ednio de excesso de bibliotecas e sobre SPA<\/a> no geral, “ouva” l\u00e1 antes e volte aqui.<\/p>\n

MVC n\u00e3o \u00e9 o que voce\u00a0pensa<\/h3>\n

Algu\u00e9m citou e isso tem sido recorrente que o MVC acabou<\/a> ou que o React \u00e9 outra abordagem.<\/p>\n

Vamos ao b\u00e1sico, o padr\u00e3o de 3 camadas se confunde muitas vezes com o MVC no conhecimento de muitos desenvolvedores, mas as camadas s\u00e3o: Apresenta\u00e7\u00e3o, neg\u00f3cio e persist\u00eancia<\/a>.<\/p>\n

Na camada de apresenta\u00e7\u00e3o voc\u00ea tem o padr\u00e3o MVC que tem a ver com responsabilidades, n\u00e3o artefatos. JSF era MVC, n\u00e3o \u00e9 porque \u00e9 Component-based que n\u00e3o faz MVC.<\/p>\n

\n


\n<\/figure>\n

Esse padr\u00e3o que foi criado por Trygve Reenskaug<\/a> em 1979, sim, em mil-novecentos-e-setenta-e-nove<\/a>, j\u00e1 demonstrava que fazer MVC n\u00e3o \u00e9 criar classes\/objetos pra cada uma das responsabilidades, pode inclusive ter tudo em um componente s\u00f3 ou n\u00e3o.<\/p>\n

Talvez o que alguns garotos queiram dizer se refere ao Model 2 popularizado pela finada Sun (seus esp\u00f3lios s\u00e3o da Oracle) no final do mil\u00eanio passado, mas nem isso \u00e9 o fim porque no lado Frontend<\/em><\/strong> nunca foi realmente igual.<\/p>\n

2M de Javascript s\u00f3 incomoda quem faz blog ou site de\u00a0not\u00edcias<\/h3>\n

Existem necessidades que s\u00e3o bem distintas, um blog ou site de not\u00edcias de um jornal s\u00e3o bem claros. Voc\u00ea pode at\u00e9 usar um React no server-side pra renderizar aquele conte\u00fado, mas no lado do cliente, no navegador dele h\u00e1 bem pouca utilidade de um SPA. Talvez na \u00e1rea administrativa, por isso o pr\u00f3prio WordPress tem dado uma guinada ao mundo do SPA no seu wp-admin<\/a>.<\/p>\n

Para webapps como E-commerce o campo j\u00e1 fica meio nublado, parte \u00e9 apresenta\u00e7\u00e3o de conte\u00fado como um site de not\u00edcias, mas parte \u00e9 de gerenciamento das vendas, \u00e9 um h\u00edbrido entre o admin e a landscape. Esse tipo de segmento \u00e9 mais dif\u00edcil de avalia\u00e7\u00e3o.<\/p>\n

Mas o mund\u00e3o Enterprise, o da gravata com planilha, o coporativo<\/a> raiz, IDE toquinho de lado, form-grid-report arte, esse \u00e9 t\u00e3o claro pra definir quanto not\u00edcias. Aqui n\u00e3o tem rapap\u00e9 de otimiza\u00e7\u00e3o de kb pra abrir a landscape mais r\u00e1pida e n\u00e3o perder 1% de vendas.<\/p>\n

Essa \u00e1rea \u00e9 justamente tornar a vida do desenvolvedor mais f\u00e1cil pra n\u00e3o criar features que devem durar meses, sen\u00e3o anos, intoc\u00e1veis e cheias de bugs. Se voce vive a realidade de ag\u00eancias, aqui \u00e9 a outra extremidade.<\/p>\n

Faltam bibliotecas<\/h3>\n

Hoje temos tradutores de especifica\u00e7\u00f5es novas que ainda n\u00e3o foram implementadas nos navegadores, al\u00e9m de traduzir extens\u00f5es bacanas como decorators<\/a>. Grite a plenos pulm\u00f5es um G’d Save the <\/em><\/strong>Babel.js<\/em><\/strong><\/a>.<\/p>\n

Uma plataforma no terminal do seu computador pra rodar tudo isso, al\u00f4 Nodejs<\/a>. Um gerenciador dessa plataforma, seja bem vindo nvm<\/a>.<\/p>\n

Um gerenciador das dependencias acoplado, o npm<\/a> que mata nossa inveja do Maven, sim, pra ver como a vida era dura, t\u00ednhamos inveja do Maven. N\u00e3o satisfeito com a performance, o Facebook at\u00e9 criou um melhor em cima, o yarn<\/a>, mas que na altura desse post ainda tem alguns probleminhas.<\/p>\n

Voc\u00ea tem um validador moderno, eslint<\/a>, que o Airbnb<\/a> preparou excelentes configura\u00e7\u00f5es.<\/p>\n

V\u00e1rios pr\u00e9-processadores pra tornar o lixo que \u00e9 o CSS em algo produtivo. Postcss<\/a> funciona bem com Stylus<\/a> se voc\u00ea for conservador e detestar ser Early Adopter. Se voc\u00ea quiser explorar mais pode entrar no mundinho do inline<\/a> entrando cada vez mais a fundo<\/a>.<\/p>\n

Usar especifica\u00e7\u00f5es do Material Design<\/a> do Google j\u00e1 prontas em alguma implementa\u00e7\u00e3o como o Material-UI<\/a>.<\/p>\n

Ecossistema completo com React<\/a>, react-router<\/a>, redux<\/a> (estado dos dados), redux-saga<\/a>, etc.<\/p>\n

Ecossistema de testes com Enzyme<\/a>, sinon<\/a>, chai<\/a>, mocha<\/a>, nyc<\/a> e istanbul<\/a> que formam o ambiente mais produtivo que j\u00e1 trabalhei pra Unit tests.<\/p>\n

Nem falei sobre o Webpack<\/a>, grunt, gulp\u2026<\/p>\n

Poder\u00edamos passar o dia falando sobre libs aqui que tornam nossa vida mais f\u00e1cil. Se n\u00e3o conhece nada disso e quer come\u00e7ar, s\u00f3 precisa instalar o create-react-app<\/a> que tem tudo embutido magicamente pra voc\u00ea enquanto se familiariza, se \u00e9 que um dia pode precisar abrir o cap\u00f4 e olhar o motor.<\/p>\n

O que\u00a0falta?<\/h3>\n

Ainda temos um longo caminho, apesar de specs como Service Workers estarem fora do radar do Edge<\/a>, temos um grande ganho nos \u00faltimos anos pra trabalhar offline, thread no processamento<\/a> sem bloquear a p\u00e1gina e navega\u00e7\u00e3o sem precisar usar o cerquilha<\/a> (#).<\/p>\n

Agora que chegamos no n\u00edvel de produtividade que uma comunidade Java, por exemplo, chegou em 2006. Agora vamos resolver problema s\u00e9rios de como particionar Apps, gerenciamento de depend\u00eancias em microservices no Frontend que ningu\u00e9m ainda consegue ter uma id\u00e9ia que seja padronizada.<\/p>\n

Web Socket \u00e9 algo invi\u00e1vel tamb\u00e9m num mundo com Mindset stateless e async, long poling \u00e9 ainda a t\u00e9cnica mais usada infelizmente.<\/p>\n

Mas falei sobre JSX<\/a>?<\/p>\n

Espero que a pr\u00f3xima spec de Web Components reconhe\u00e7a que o React \u00e9 superior a todas as outras abordagens e fa\u00e7a como o pessoal do JCP l\u00e1 no Java fez, assuma que Hibernate + Spring eram superiores e refa\u00e7am as specs copiando o que eles ditaram mesmo que mudando os nomes dos m\u00e9todos e classes s\u00f3 pra n\u00e3o dar o bra\u00e7o a torcer.<\/p>\n

Antes de reclamar, principalmente se entrou no \u00f4nibus agora e j\u00e1 quer sentar na janela, estude, s\u00f3 isso.<\/p>\n","protected":false},"excerpt":{"rendered":"

Existem v\u00e1rias reclama\u00e7\u00f5es sobre a Fadiga do Javascript, que seria um excesso de bibliotecas pra aprender. O choro \u00e9 livre principalmente para quem detesta estudar e aprender coisas novas, mas Javascript ainda est\u00e1 longe de atingir o grau de maturidade de outras plataformas e necessita de muito mais. Resolvi postar sobre isso depois de ouvir […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1861"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=1861"}],"version-history":[{"count":0,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1861\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=1861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=1861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=1861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}