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:

Links de ferramentas citadas e artigos:

Produção e conteúdo:

  • Alura Cursos online de Tecnologia
  • Caelum Ensino e Inovação

Edição e sonorização: Radiofobia Podcast e Multimídia

Leave a Reply

61 Comentários

  1. Giovane

    O modernizr seria um substituto ao jQuery no quesito “encapsulamento” de incompatibilidade entre browsers?

  2. Giovane

    O modernizr seria um substituto ao jQuery no quesito compatibilidade cross-browser do DOM?

    • 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

  3. 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!

  4. 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!!

  5. 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!!

  6. 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.

  7. Julio Santana

    Excelente consideração, mas acho que um segundo episódio poderia acrescentar ainda mais entendimento sobre o assunto e as tecnologias envolvidas.

  8. 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.

  9. 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.

  10. Flávio Henrique Almeida

    Gente, vovó existiu de verdade viu! 🙂

  11. 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 🙂

  12. well

    Angular 2, muito interessante!

    Tem curso dele no alura?

  13. Sebastião Relson Reis da Luz

    A pelo menos 5 anos, ExtJS / Sencha Touch é o meu framework de front, ótimo episódio

  14. 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

    • 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

  15. Emanuel Raul

    Saímos do nada e fomos para lugar nenhum…

  16. Henrique Weiand

    Muito bom! Parabens! Por mais podcasts assim

  17. Artur Veiga

    angular = javeiro, só li verdades kkk, pior que é verdade kkk.

  18. 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.

    • 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 🙂

        • 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.

  19. 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.

  20. 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é!

  21. 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.

  22. 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.

  23. 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/

  24. 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.

  25. Marcos Costa

    Você não falou: “Eu sou o seu Host” 🙁 kkkkkkkkkkkk

  26. Pingback: O Reino encantado do JavaScript – Hipsters #38 | Hipsters Ponto Tech

  27. Pingback: PodCast Hipsters Ponto Tech - O reino encantado do JavaScript -

  28. Igor Carvalho de Paula

    Acho que faltou citar o vue.js

  29. Matteus Barbosa

    Eu ainda uso o bom e velho jQuery freneticamente e sou feliz.

Next ArticleMicroserviços - Hipsters #17