Qual framework frontend? As vantagens de escolher o Rails

Transcript

1. Qual framework frontend? As vantagens de escolher o Rails
2. QUEM SOU? Ricardo Pontes Desenvolvedor BACKEND / Tech Lead
3. DESENVOLVIMENTO WEB HOJE EM DIA
4. SER FULLSTACK É… Um desenvolvedor é responsável por trocar a lâmpada…
5. SER FULLSTACK É… Desenvolvimento com apenas um ecosistema
6. CALMA!!! Não vou oferecer nenhum Bootcamp FullStack JS
7. Voltando no tempo
9. HTML-over-the-Wire
10. MAS ALGO ACONTECEU…
11. https://refresh-digital.com/the-history-of-javascript/
13. APÓS A INVASÃO DO FRONTEND O Rails fi cou responsável “apenas” pela API. Ocorreu uma separação no desenvolvimento do BACKEND e FRONTEND
14. É possível desenvolver uma aplicação web moderna sem sair da zona de conforto do Ruby on Rails?
19. Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. https://hotwire.dev
20. Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. https://hotwire.dev Coming soon
21. Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. https://hotwire.dev + Coming soon
23. https://turbo.hotwire.dev The speed of a single-page web application without having to write any JavaScript
24. Turbo Streams Oferece mudanças de página por WebSocket, em resposta a envios de formulários usando apenas HTML e um conjunto de ações semelhantes a CRUD. Turbo Drive Acelera o envio de links e formulários, eliminando a necessidade de recarregamentos de páginas inteiras. Turbo Frames Separa páginas em contextos independentes, que abrangem a navegação e podem ser carregados lentamente. Turbo Native Utilizado para construir aplicativos híbridos para iOS e Android. Utilizando o HTML renderizado pelo servidor para termos uma cobertura básica da funcionalidade do seu aplicativo em um wrapper nativo.
25. https://stimulus.hotwire.dev A modest JavaScript framework for the HTML you already have
32. Se é tudo HTML como mantemos tudo isso organizado?
33. ViewComponent https://github.com/github/view_component A framework for building reusable, testable & encapsulated view components in Ruby on Rails. "Ruby objects that output HTML”
34. app/ components/ menu/ component.rb component.html.erb component.css component.js Colocando HTML, CSS, JS… juntos
35. app/ components/ menu/ component.rb component.html.erb component.css component.js Colocando HTML, CSS, JS… juntos
36. app/ components/ menu/ component.rb component.html.erb component.css component.js Colocando HTML, CSS, JS… juntos
37. app/ components/ menu/ component.rb component.html.erb component.css component.js Colocando HTML, CSS, JS… juntos
38. app/ components/ menu/ component.rb component.html.erb component.css component.js Colocando HTML, CSS, JS… juntos
39. app/ components/ menu/ component.rb component.html.erb component.css component.js Colocando HTML, CSS, JS… juntos
40. We extend the capabilities of both Rails and Stimulus by intercepting user interactions and passing them to Rails over real-time websockets.
41. Server-side rendering Turbo Drive / Frames JS sprinkles HTML-over-WebSocket Stimulus View Components RAILS MONOLITH
42. EXISTE VIDA APÓS O BOOTSTRAP?
43. https://bulma.io https://tailwindcss.com https://shoelace.style Admin dashboards CRUD, admin dashboards User-facing interfaces
44. ESCOLHENDO O RAILS ‣HTML-over-WebSocket (Turbo Streams) ‣JS sprinkles (Stimulus) ‣Fake SPA (Turbo) ‣Component-based architectures (ViewComponent) ‣Modern CSS frameworks and tools (Tailwind, Shoelace, Bulma, PostCSS)
45. ESCOLHENDO O RAILS ‣Pode ser utilizado substituindo JS/SPA para aplicações não tão complexos (dashboards, CRUDs, etc…) ‣Aumenta a produtividade ‣Existir apenas um ambiente para controlar (deploy, respositório…). ‣Entramos em uma Nova Era !!!
46. OBRIGADO