Transferir como PDF, PPTX
![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)
Carregado porSergio Lima
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
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.
![[TDCPOA2018] Desmistificando a eXtreme Programming para desenvolvedores "não ...](https://cdn.slidesharecdn.com/ss_thumbnails/tdcpoa2018-desmistificandoaextremeprogrammingparadesenvolvedoresnaoageis-190504232135-thumbnail.jpg?width=640&height=640&fit=bounds)
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
- 1. Globalcode – Open4education Trilha – Ruby SergioLima Ruby Developer Maio de 2018
- 2. Globalcode – Open4education Introduzindo StimulusJS: o novoFramework JavaScript para Ruby On Rails.
- 3.
- 4.
- 5. Globalcode – Open4education Agenda Minha experiênciacom StimulusJS. StimulusJS. O que é isso? Benefícios. Como funciona. Implementação usando Ruby On Rails.
- 6.
- 7. Globalcode – Open4education Minha experiência Artigospara Blog Projetos para os artigos Preparação para esta palestra
- 8. Globalcode – Open4education Minha experiência Artigospara Blog https://onebitcode.com/stimulus-um-modesto- framework-javascript-para-o-html-que-voce-ja-tem/
- 9. Globalcode – Open4education Minha experiência Artigospara Blog https://onebitcode.com/stimulus-on-rails/
- 10. Globalcode – Open4education Projetos para osArtigos https://github.com/sergiosouzalima/stimulus- people-form-example https://github.com/sergiosouzalima/stimulusonrails https://stimulusonrails.herokuapp.com/people
- 11. Globalcode – Open4education Preparação para estapalestra https://github.com/sergiosouzalima/stimulustdc2018
- 12.
- 13. Globalcode – Open4education É um frameworkJS 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 foiprojetado 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 Stimulusnão foi criado para as chamadas “Aplicações JavaScript”.
- 17. Globalcode – Open4education Ferramentas apropriadas Paraas chamadas “Aplicações JavaScript”, as ferramentas mais apropriadas são: Angular, EmberJS, VueJS e React.
- 18.
- 19. Globalcode – Open4education É maisum framework JavaScript? StimulusJS Angular, VueJS, React, Ember
- 20. Globalcode – Open4education É maisum 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 ficandofamoso? 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 ⭐
- 24.
- 25. Globalcode – Open4education Como funciona Ruby OnRails 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"> <inputdata-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 oHTML 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ãoinstâncias de classes JavaScript. Os métodos funcionam como “event handlers”. Temos técnicas de refatoração a disposição.
- 37.
- 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}!`) } getname() { return this.nameTarget.value } }
- 40.
- 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>
- 44.
- 45.
- 46.
- 47.
- 48. Globalcode – Open4education Esta app estáaqui https://github.com/sergiosouzalima/stimulustdc2018
- 49.
- 50. Globalcode – Open4education E tem muitomais... Actions & Targets em qualquer elemento HTML: Link, input, textarea, ... Lifecycle Callbacks initialize, connect, disconnect. Ajax
- 51. Globalcode – Open4education E tem muitomais... Ler e persistir dados no DOM usando “Data API” Métodos has(), get(), set() Testes automatizados em Rails
- 52.
- 53. Globalcode – Open4education Introduzindo StimulusJS: o novoFramework JavaScript para Ruby On Rails. Thanks!
- 54. Globalcode – Open4education Referências A modestJavaScript 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