https://media.blubrry.com/hipsterstech/content.blubrry.com/hipsterstech/hipsters_016_single_page_apps.mp3Podcast: Play in new window | Download | Embed RSS | More Compartilhar Assinar Single Page Applications – Hipsters #16 01/11/2016 / front-end Podcast web / 61 Comentários 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 Relacionado
Giovane - 0 O modernizr seria um substituto ao jQuery no quesito “encapsulamento” de incompatibilidade entre browsers? Responder
Giovane - 0 O modernizr seria um substituto ao jQuery no quesito compatibilidade cross-browser do DOM? Responder
Sérgio Lopes - 0 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 Responder
Byzkoitu - 0 auhauh rapaz… é Batizar e não Benzer heheuahauh mas a analogia foi ótima mesmo assim! Responder
Bruno Alves - 0 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!! Responder
Marcelo Madeira - 0 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!! Responder
Andre Luis Miranda - 0 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. Responder
Sérgio Lopes - 0 Só Server-Side Rendering mesmo. Com Angular 2 é mais facil: https://universal.angular.io/ Responder
Andre Luis Miranda - 0 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! Responder
Julio Santana - 0 Excelente consideração, mas acho que um segundo episódio poderia acrescentar ainda mais entendimento sobre o assunto e as tecnologias envolvidas. Responder
Aloisio - 0 Ó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. Responder
Philipe dos Santos Pompeu - 0 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. Responder
William R. Fernandes - 0 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 🙂 Responder
well - 0 sensacional! o curso de angular 1 com o Flavio foi excelente, não vejo a hora de fazer o 2. Responder
Gabriel Darezzo - 0 Tem um da CodeSchool patrocinado pela Google e gratuito: https://www.codeschool.com/pages/angular-1-vs-2 Vale o click xD Responder
Sebastião Relson Reis da Luz - 0 A pelo menos 5 anos, ExtJS / Sencha Touch é o meu framework de front, ótimo episódio Responder
Alberto Luiz Souza - 0 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. Responder
Thiago Leite - 0 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 Responder
Eric Douglas - 0 Sobre jsx o Vue 2 também tem suporte: https://vuejs.org/2016/04/27/announcing-2.0/ – seção: Templates, JSX, or Hyperscript? Responder
Sérgio Lopes - 0 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 Responder
Thiago Leite - 0 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 Responder
Breno Douglas - 0 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). Responder
mfdavid - 0 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 Responder
Douglas Junior - 0 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. Responder
Maurício Linhares - 0 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 🙂 Responder
Flávio Henrique Almeida - 0 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! Responder
Douglas Junior - 0 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 - 0 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. Responder
Douglas Galdino - 0 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? Responder
Paulo Silveira - 0 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. Responder
Fabricio Melo - 0 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 Responder
RNHack - 0 Concordo, eu estou começando a trabalhar, ainda tenho pouco portfolio, com essas ferramentas. Acho que seria bem interessante. Show!!! Responder
Pedro Silva - 0 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.. -.-‘ Responder
Flávio Henrique Almeida - 0 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. Responder
Pedro Silva - 0 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. Responder
Márcio Vennan - 0 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. Responder
oswaldo junior - 0 Ó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/ Responder
joão - 0 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. Responder
Diego Freitas - 0 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 Responder
joão - 0 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. Responder
