Single Page Applications – Hipsters #16
Criar uma única página que dê a sensação de estar em uma aplicação. Essa é uma das definições questionáveis de Single Page Applications, uma técnica já antiga mas cada vez mais na moda para dar uma usabilidade mais interessante a suas páginas. Um episódio marcado pelo desconhecimento do nosso querido host, uma história sobre antepassados lusitanos e o esquecimento do emberjs. Warning: três novos e confusos frameworks de JavaScript foram criados durante a gravação desse podcast.
Participantes:
- Paulo Silveira, host do hipsters, aplicando jQuery de forma errada
- Mauricio Linhares, o cohost da risada que todos gostaríamos de ter
- Sergio Lopes, o cohost que ainda não tinha musiquinha e não ama SPAs
- Flávio Almeida, desenvolvedor e instrutor, quase 1000 horas de Destiny online
- Alberto Souza, o soteropolitano da Caelum
Links de ferramentas citadas e artigos:
- Como é aprender JavaScript em 2016 (em inglês)
- Páginas oficiais do Angular, React, Backbone e Ember.
- Server Side Rendering com Angular 2 e React.
- Cursos de JavaScript ES6, React, Angular 1 e Angular 2 na Alura
Produção e conteúdo:
- Alura Cursos online de Tecnologia – https://www.alura.com.br
- Caelum Ensino e Inovação
Edição e sonorização: Radiofobia Podcast e Multimídia
Giovane
O modernizr seria um substituto ao jQuery no quesito “encapsulamento” de incompatibilidade entre browsers?
Giovane
O modernizr seria um substituto ao jQuery no quesito compatibilidade cross-browser do DOM?
Sérgio Lopes
São complementares. O modernizr detecta suporte a certas funcionalidades. O jQuery implementa uma API encapsulando as diferenças em geral de manipulaçao de DOM
William R. Fernandes
Play!
Byzkoitu
auhauh rapaz… é Batizar e não Benzer heheuahauh
mas a analogia foi ótima mesmo assim!
Paulo Silveira
pra mim essa foi a melhor parte do podcast!!!
Flávio Henrique Almeida
Caramba, é Batizar mesmo! Eu disse Benzer? Habemus Papam!
Bruno Alves
Tive que pausar o podcast pra conseguir aceitar essa analogia , ri muito aqui,
Muito show como os outros podcasts,
Sempre com um conteúdo bem atual!!
Marcelo Madeira
Muito bom ouvir sobre esse assunto e saber que mais pessoas passam pelos mesmos problemas que nós. Apesar das piadas horríveis o conteúdo é de primeira, estão de parabéns!!
Andre Luis Miranda
Queria saber, se há alguém conhece alguma forma, de indexar melhor um site construído com essa abordagem, devido a questão de se utilizar as rotas do Angular para navegar dentro da aplicação.
Sérgio Lopes
Só Server-Side Rendering mesmo. Com Angular 2 é mais facil: https://universal.angular.io/
Andre Luis Miranda
Beleza cara!
Vou dar uma olhada nisso, que, eu descobri do modo mais doloroso que o SEO não tava rolando… agora preciso dar um jeito de ajustar isso!
Valeu Sérgio!
Julio Santana
Excelente consideração, mas acho que um segundo episódio poderia acrescentar ainda mais entendimento sobre o assunto e as tecnologias envolvidas.
Aloisio
Ótimo episódio !!! Quem sabe criar spin-offs dos episódios fosse uma maneira de aprofundar alguma parte do assunto pra falar de algum conteúdo técnico de forma mais densa, sem tornar assim os episódios longos e cansativos pra maioria das pessoas que acompanham toda semana.
Philipe dos Santos Pompeu
Muito bom esse podcast! Me identifiquei com o fato de JS realmente parecer rocket science pra quem quer aprender atualmente, principalmente pra quem quer aprender do jeito certo, são tantos frameworks tantas siglas, que fica até difícil saber por onde começar.
Flávio Henrique Almeida
Gente, vovó existiu de verdade viu!
William R. Fernandes
Muito show galera, parabéns mais um podcast que valeu apena e com muita risada! Acho que vale um Podcast sobre Render Server para tirar a dúvida sobre SEO, ReactJS e AngularJS 2
well
Angular 2, muito interessante!
Tem curso dele no alura?
Paulo Silveira
tem sim! https://www.alura.com.br/curso-online-angular2-parte1
well
sensacional! o curso de angular 1 com o Flavio foi excelente, não vejo a hora de fazer o 2.
Gabriel Darezzo
Tem um da CodeSchool patrocinado pela Google e gratuito:
https://www.codeschool.com/pages/angular-1-vs-2
Vale o click xD
Diegolinkk
O que fazes aqui… hausdhausdhasuhdua
Saudades man
Sebastião Relson Reis da Luz
A pelo menos 5 anos, ExtJS / Sencha Touch é o meu framework de front, ótimo episódio
Thiago Leite
E sobre o VUE? qual a aposta? previsão na Alura?
Alberto Luiz Souza
A minha opinião sobre o vue é que ele não trouxe novidade não… Ficaria no react, que é o que pegou. Gosto da sacada do jsx que o react abraçou.. me permite escrever código dinâmico no meio do meu html sem eu ter que ficar aprendendo diretivas novas.
Thiago Leite
Ahh entendi Aberto, pergunto pois vejo um crescimento significativo dele, algumas empresas como globo.com estão aderindo, não sei a veracidade nem sei dizer se todo o site vai trabalhar com ele. Acompanhei o seu curso de react, muito bom, me ajudou bastante a aprender sobre componentes e me ajudou tbm a entender a documentação do próprio vuejs.. Parabéns. Abraço
Eric Douglas
Sobre jsx o Vue 2 também tem suporte:
https://vuejs.org/2016/04/27/announcing-2.0/ – seção: Templates, JSX, or Hyperscript?
Sérgio Lopes
Tecnicamente acho bem bom. Superior ao React em várias áreas inclusive. Mas minha aposta é que nunca vai decolar. Quem arrebatou o mundo de SPAs foi React e Angular mesmo. Eu iria neles pelo simples motivo de ter mais gente usando, ter mais suporte, mais gente pra contratar, futuro ser mais certeiro. Uma decisão mais gerencial que ténica, eu sei
Thiago Leite
Bacana Sérgio, vou seguir a dica então. já que não trabalho com nenhum dos dois ainda, tenho a liberdade pra escolher qual me especializar. Seguindo os mestres, vou de React! vlw
Breno Douglas
Só devo discordar quando se diz “mais gente usando” e coloca o angular sem especificar que é o 1. E eu ainda acho meio audacioso afirmar que um projeto com mais de 33k de stars no github e mais de 1 milhão de downloads não vai decolar (já considero que decolou). Enfim, interagindo com a comunidade poderia opinar que quem não decolará seria Angular2, talvez eu esteja errado por conta do Ionic 2 que o utiliza e que já tem uma comunidade bem estabelecida (e espero mesmo estar errado, pois, é um grande framework).
mfdavid
hmmm… “Eu iria neles pelo simples motivo de ter mais gente usando”… poxa, falar isso justo em um podcast chamado hipsters.tech? rsrs
Entendo perfeitamente o argumento, e ando estudando faz tempo (sem aplicar a fundo) todo tipo de framework front-end, desde angular 1, 2, react, riot, vue, backbone, ember, polymer, … tentando escolher um (normalmente trabalho mais com backend, mas esse conhecimento em front tem me feito falta). Andei estudando bastante sobre web components puro tbm.
Até agora o vue é o que mais me chamou atenção, principalmente se o projeto for pequeno (a filosofia deles de ser um framework “progressivo” é bem interessante).
E sobre o framework ter futuro ou não, o autor original está recebendo em torno de 8 mil dólares mensais em contribuições para continuar desenvolvendo, e tem uns projetinhos grandes já usando ele, como o pessoal do gitlab (https://about.gitlab.com/2016/10/20/why-we-chose-vue/).
Claro que comparar com um projeto com nomes como google por trás pode ser meio complicado (oq são 8 mil dólares para google? rs), e talvez realmente se torne um framework “de nicho”, mas por outro lado talvez isso (em alguns casos) possa vir a ser até um fator positivo em alguns tipos de projetos (e ele não se tornar um framework muito inchado/complicado demais).
Mas se pensar de uma forma mais pragmática, concordo totalmente com você. Se o objetivo é entrar no mercado de trabalho, vá de angular ou react. Se for pra ser feliz, dê uma olhada geral e vá naquele que seu coração mandar <3
Emanuel Raul
Saímos do nada e fomos para lugar nenhum…
Henrique Weiand
Muito bom! Parabens! Por mais podcasts assim
Henrique Weiand
Na espera de angular2 na alura!
Eric Douglas
Vovó portuguesa foi a melhor analogia da história hahaha
Artur Veiga
angular = javeiro, só li verdades kkk, pior que é verdade kkk.
Douglas Junior
O mundo do front está um Frankenstein, para iniciar em qualquer um dos frameworks SPA, se você não quiser ficar louco tão cedo, precisa primeiro aprender NPM, depois vem Webpack/Gulp/Grunt, cada um desses com seus plugins de terceiros e suas e particularidades, depois vc descobre que precisa de polyfills, em seguida se depara com TypeScript/SASS/LESS, e só então você está confortável para entrar no React, Angular, etc. Pra quem vem do backend, assim como eu, é assustador, rsrsrsrs.
Maurício Linhares
Lá no backend você tem que aprender as mesmas ferramentas, Maven, Bundler, Nuget, pip, rake, make, ant, msbuild e por aí vai, não é diferente
Douglas Junior
Mas é beeem menos, rsrsrsrs
Flávio Henrique Almeida
E ainda tem a parte do banco de dados, criação de Api (que podem usar tecnologia diferentes) e deploy! Muito mais complexo do que o Spa mais complexo!
Douglas Junior
Espero um dia ter a visão de vocês, mas hoje a que tenho é bem diferente, rsrsrsrsrs.
Hoje eu trabalho mais com Android nativo, iOS nativo e escrevo as APIs em Java ou PHP, não sofro com o fato de ter que usar dezenas de coisas plugadas umas nas outras e cheias de configurações em particular, não preciso ter que usar babel, compilador de typescript, integrar uma lib typescript para uma não typescript, converter SASS para CSS, CSS modules, configurar minificação, configurar carregamento de imagens de forma diferente para JPG, PNG, etc…
No front, parece que muitas coisas são utilizadas para atividades que elas não foram projetadas para isso e depois de um tempo alguém criou um módulo ou plugin que possibilita tal funcionalidade e tudo começa a girar em torno daquilo.
Vejo muitas pessoas que trabalham com front e não conhecem todas as ferramentas que usam, vejo isso nos fóruns e issue trackers por aí, isso me assusta.
O cara cria um projeto padrão para usar ReactJS onde basta 1 comando para fazer o live load e ali cria todo o seu App, é lindo. Aí quando aparece alguma necessidade diferente onde ele tem que alterar uma linha no webpack.config.js, ferrou. Aí vira um StackOverflow Oriented Programming.
No backend e mobile eu tenho a impressão que as coisas são mais consistentes e bem definidas. Também tem seus problemas, é claro.
Bom, ainda preciso estudar mais sobre isso, mas a minha primeira visão de um pesquisador e defensor da qualidade de software, é essa.
Flávio Henrique Almeida
Mas fica evidente como você disse que o frontend hoje é mais complexo. Hoje o desenvolvedor não pode dar mais um jeitinho no front ele tem que ter um grau de conhecimento maior. É por isso que já existe até a carreira de engenheiro frontend.
Douglas Galdino
Esse video https://www.youtube.com/watch?v=JlP5rBynK3E dá uma boa explicação em quesito de SEO com SPAs, mais especificamente com Angular. Eu vi esse video a um mês atrás, porém se não me engano, os crawlers estão cada vez mais inteligentes (capazes) de ler javascripts em SPAs. Seguindo as praticas mencionadas deve ajudar ou pelo menos deixar mais claro. Outra coisa é a utilização da API History do HTML5 na hora de lidar com as routes, deve ajudar, já que a URL vai ficar parencendo com a de uma aplicação server-sided. Mas como cada aplicação é um caso diferente, ja vi casos de startups utilizarem a pagina principal para anuncio do produto e qualquer outra informação da empresa com WordPress, assim a indexação acontece sem problemas e a SPA fica no background diretamente com authenticação >> serviço. E em outros casos diretamente com SPA, se pensado, apenas uma pagina (a principal) precisa ser indexada, o que removeria toda essa complicação com routes.
Já viram alguma outra situação que resolveram de forma semelhante ou outra diferente?
Paulo Silveira
Muito bom. Acho que ele cai exatamente no que o Sergio falou, apesar do Sergio ter sido mais alarmista: se você usar sem cuidado, realmente vai machucar seu SEO. Mas sim, dá para fazer com cuidado para não cair nas armadilhas.
Gilson Terra
Pessoal depois da uma olhada http://riotjs.com
Fabricio Melo
Podia rolar um episódio só de frameworks híbridos mobile como o React Native, Ionic, Angular UI.. Seria bem interessante. Se couber no assunto, um pedacinho de Electron seria fantástico também
RNHack
Concordo, eu estou começando a trabalhar, ainda tenho pouco portfolio, com essas ferramentas. Acho que seria bem interessante. Show!!!
Flávio Henrique Almeida
Um de Ionic 2 hein!
Uma boa né!
Pedro Silva
Para mim, o framework mais interessante é o AureliaJS (http://aurelia.io)
Pelo menos parece ser o mais simples e limpo comparando com os restantes.
Já agora, para quem não sabe, Rob Eisenberg, criador do Aurelia, fez parte da equipa de desenvolvimento do angular 2 e desistiu porque achou que o angular estava a seguir o caminho errado
Uma das coisas que detestei ver no Angular 2 foram as novas convenções tipo (click)=”funcao()” no html.. -.-‘
Flávio Henrique Almeida
Aurelia é o antigo Durandal, só que trocaram o nome
É um framework interessante, pena que uma pesquisa do Google Trends indique que há pouco ou quase zero interesse nele nos últimos dois anos.
Pedro Silva
Não, não é o antigo Durandal.
O DurandalJS é um framework escrito em cima do jquery, knockout e requirejs.
O Aurelia foi criado de raiz com o propósito de substituir o durandaljs e não necessitar de qualquer dependencia noutro framework.
Márcio Vennan
Excelente podcast! Acho que o diferencial do Hispers Tech é as ditática do Paulo Silveira. Ele tenta sempre intermediar as discuções para que fique mais fácil da pessoa leiga no assunto enteder. É impressionante como ele sempre faz uma pergunta que acaba tirando alguma dúvida minha.
oswaldo junior
Ótimo podcast pessoal, muito bom esse lance de alertar sobre a adesão por modinha e o cuidado com o SEO. Atualmente não trabalho com aplicações SPA mas tenho estudado (angular, react e vue) por curiosidade e fico encantado (e as vezes meio perdido) com as diversas possibilidades e frameworks. Nada melhor do que ouvir a opinião de pessoas mais experientes. Obrigado por compartilhar o/
joão
Vejo muita gente falando que devemos parar de usar JQUery, mas para quem não for desenvolver um SPA? qual é a alternativa ao Jquery? JS Nativo?
Ao olhar o You-Dont-Need-jQuery, eu vejo que em muitos casos, o código nativo ainda fica muito mais verboso do que quando usando Jquery.
O que vocês usam nesse caso?
PS: considerando apenas que desenvolvo pequenas aplicações e que me importo muito mais com um código simples, afinal minha equipe de manutenção é muito juvenil.
Diego Freitas
eu entendi pelo lado de que devemos parar de usar jquery pra cumprir as funções de ajax e deixar ele pra manipular DOM, que é a especialidade dele
joão
boa observação! mas falo sobre o que já escutei fora desse podcast. Muitas pessoas agora abominam quem ainda usa Jquery. Eu ainda vou continuar usando-o por muito tempo, afinal as novas versões do js ainda não diminuiram a verbosidade em certos pontos.
Marcos Costa
Você não falou: “Eu sou o seu Host”
kkkkkkkkkkkk
Pingback: O Reino encantado do JavaScript – Hipsters #38 | Hipsters Ponto Tech
Pingback: PodCast Hipsters Ponto Tech - O reino encantado do JavaScript -
Igor Carvalho de Paula
Acho que faltou citar o vue.js
Matteus Barbosa
Eu ainda uso o bom e velho jQuery freneticamente e sou feliz.