Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
0 gostou218 visualizações
O documento introduz o framework JavaScript StimulusJS e discute como ele pode ser usado com Ruby on Rails. O palestrante descreve sua experiência usando StimulusJS em artigos e projetos, explica o que é StimulusJS e seus benefícios, como funciona usando o padrão Controller-Target-Action, e demonstra sua implementação em um projeto Rails.
![Globalcode – Open4education
JavaScript
// <rails_app>/app/javascript/controllers/hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {](https://image.slidesharecdn.com/stimulusguidelecturev02-180504100434/85/Introduzindo-StimulusJS-o-novo-Framework-JavaScript-para-Ruby-On-Rails-34-320.jpg)
![Globalcode – Open4education
Refatorando
// <rails_app>/app/javascript/controllers/hello_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "name" ]
greet() {](https://image.slidesharecdn.com/stimulusguidelecturev02-180504100434/85/Introduzindo-StimulusJS-o-novo-Framework-JavaScript-para-Ruby-On-Rails-38-320.jpg)
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
- 1. Globalcode – Open4education Trilha – Ruby Sergio Lima Ruby Developer Maio de 2018
- 2. Globalcode – Open4education Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
- 4. Globalcode – Open4education O modesto framework JavaScript para HTML que você já tem.
- 5. Globalcode – Open4education Agenda Minha experiência com StimulusJS. StimulusJS. O que é isso? Benefícios. Como funciona. Implementação usando Ruby On Rails.
- 7. Globalcode – Open4education Minha experiência Artigos para Blog Projetos para os artigos Preparação para esta palestra
- 8. Globalcode – Open4education Minha experiência Artigos para Blog https://onebitcode.com/stimulus-um-modesto- framework-javascript-para-o-html-que-voce-ja-tem/
- 9. Globalcode – Open4education Minha experiência Artigos para Blog https://onebitcode.com/stimulus-on-rails/
- 10. Globalcode – Open4education Projetos para os Artigos https://github.com/sergiosouzalima/stimulus- people-form-example https://github.com/sergiosouzalima/stimulusonrails https://stimulusonrails.herokuapp.com/people
- 11. Globalcode – Open4education Preparação para esta palestra https://github.com/sergiosouzalima/stimulustdc2018
- 13. Globalcode – Open4education É um framework JS Framework JavaScript. v0.1.0 March 15th, 2017 v0.9.0 December 29, 2017 v1.0.1 February 02, 2018 Criadores Desenvolvedores da Basecamp David H. Hansson (DHH) @dhh, CTO at Basecamp Javan Makhmali @javan, programmer at Basecamp
- 14. Globalcode – Open4education O propósito “Stimulus, um modesto framework JavaScript para o HTML que você já tem.” Tem ambições mais modestas. Não pretende assumir o controle do front-end.
- 15. Globalcode – Open4education Não foi projetado para renderizar HTML. Projetado para evoluir o HTML existente na página. Projetado para aos poucos agregar comportamento ao front-end. O Propósito
- 16. Globalcode – Open4education Note o Contexto Stimulus não foi criado para as chamadas “Aplicações JavaScript”.
- 17. Globalcode – Open4education Ferramentas apropriadas Para as chamadas “Aplicações JavaScript”, as ferramentas mais apropriadas são: Angular, EmberJS, VueJS e React.
- 19. Globalcode – Open4education É mais um framework JavaScript? StimulusJS Angular, VueJS, React, Ember
- 20. Globalcode – Open4education É mais um framework JavaScript? StimulusJS JQuery
- 21. Globalcode – Open4education Enunciado por DHH “Stimulus permite trazer de volta a produtividade…” “…como era antigamente, quando um único programador poderia fazer progresso sem ficar preso em camadas de sistemas distribuídos...”
- 22. Globalcode – Open4education “…Uma época, antes de todos acharem que o Santo Graal era confinar seu aplicativo do lado do servidor…” “…gerando JSON para um aplicativo de cliente, baseado em JavaScript.”
- 23. Globalcode – Open4education Modesto mas ficando famoso? Stars on Github (março/2018) vuejs / vue …….….…. 4,363 stars this month ⭐ facebook / react …….. 3,033 stars this month ⭐ stimulusjs / stimulus … 2,515 stars this month ⭐ angular / angular ……. 1,265 stars this month ⭐
- 25. Globalcode – Open4education Como funciona Ruby On Rails MVC model-view- controller StimulusJS CTA controller-target- action X Modelo ou padrão de arquitetura:
- 26. Globalcode – Open4education HTML intuitivo <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div>
- 27. Globalcode – Open4education Controller <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div>
- 28. Globalcode – Open4education <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> Controller <rails_app>/app/javascript/controllers/ hello_controller.js
- 29. Globalcode – Open4education Target <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> “hello.name” é um target descriptor: • hello: é o controller • name: é o target
- 30. Globalcode – Open4education Target <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> Stimulus cria this.nameTarget dentro do javascript. Comunicação entre HTML x Javascript.
- 31. Globalcode – Open4education Action <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div>
- 32. Globalcode – Open4education Action <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet"> Greet </button> </div> “action descriptor”: • click: nome do evento. • hello: controller. • greet: método.
- 33. Globalcode – Open4education Podemos olhar o HTML e saber seu comportamento. Separação de responsabilidade. Comparando com CSS: separação de conteúdo e estilização. HTML intuitivo:
- 34. Globalcode – Open4education JavaScript // <rails_app>/app/javascript/controllers/hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name" ] greet() {
- 35. Globalcode – Open4education JavaScript … greet() { const element = this.nameTarget const name = element.value console.log(`Hello, ${name}!`) } }
- 36. Globalcode – Open4education JavaScript Controllers são instâncias de classes JavaScript. Os métodos funcionam como “event handlers”. Temos técnicas de refatoração a disposição.
- 38. Globalcode – Open4education Refatorando // <rails_app>/app/javascript/controllers/hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name" ] greet() {
- 39. Globalcode – Open4education Refatorando greet() { console.log(`Hello, ${this.name}!`) } get name() { return this.nameTarget.value } }
- 41. Globalcode – Open4education Implementação em Rails $ mkdir stimulustdc2018 $ cd stimulustdc2018 # Somente se usar RVM $ rvm use ruby-2.5.0@stimulustdc2018 --ruby- version --create
- 42. Globalcode – Open4education Passo a Passo $ gem install rails -v 5.2 --no-ri --no-rdoc $ rails _5.2_ new . --webpack -T # o mesmo que # yarn add stimulus: $ bundle exec rails webpacker:install:stimulus
- 43. Globalcode – Open4education Passo a Passo $ bundle install Em app/views/layouts/application.html.erb: ... .. <%= javascript_pack_tag 'application' %> </head>
- 48. Globalcode – Open4education Esta app está aqui https://github.com/sergiosouzalima/stimulustdc2018
- 50. Globalcode – Open4education E tem muito mais... Actions & Targets em qualquer elemento HTML: Link, input, textarea, ... Lifecycle Callbacks initialize, connect, disconnect. Ajax
- 51. Globalcode – Open4education E tem muito mais... Ler e persistir dados no DOM usando “Data API” Métodos has(), get(), set() Testes automatizados em Rails
- 53. Globalcode – Open4education Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails. Thanks!
- 54. Globalcode – Open4education Referências A modest JavaScript framework for the HTML you already have. https://stimulusjs.org StimulusJS Handbook. https://stimulusjs.org/handbook/introduction Stimulus, um modesto framework JavaScript para o HTML que você já tem! https://onebitcode.com/stimulus-um-modesto-framework-javascript- para-o-html-que-voce-ja-tem/ Stimulus On Rails: Front-end rápido e com pouco esforço https://onebitcode.com/stimulus-on-rails/ Stimulus Discourse https://discourse.stimulusjs.org