Hotwire: How To Build Reactive Rails Applications Without Javascript

•

0 gostou•193 visualizações

Mix & Go

RubyConf Pakistan 2022 presentation slides on Hotwire: How To Build Reactive Rails Applications Without Javascript.

Tecnologia

Goal for Today
• What is Hotwire

• How Hotwire works

• Why it's a game changer

Is This for You?
• Just started learning Rails

• Experienced Rails devs

• Javascript devs

How Did We Get Here?
• Rails + JS / Prototype JS

• Rails + jQuery

• BackboneJS

• AngularJS

• EmberJS

• ReactJS

• VueJS

• Hotwire

Three Questions
• Why Hotwire Is the Future

• How to Start Using Hotwire Today

• Will Hotwire Replace Your SPA?

Why Hotwire Is the Future
• SPAs are not for everybody

• Less complexity is better

• Power to the small/tiny/solo businesses

• It's the default front-end in Rails 7

How to Start Using Hotwire Today
• This presentation

• YouTube (youtube.com/mixandgo)

• The o
ffi
cial docs (hotwire.dev)

• Have patience

Will Hotwire Replace Your SPA?
• New projects (default)

• Old projects turbo-rails & stimulus-rails

• SPAs != Full-Stack App

• Hotwire + React components

What is Hotwire?
• Turbo Drive

• Turbo Frames

• Turbo Streams

• Stimulus JS

Turbo Drive
SERVER
<LINK />
<HEAD />
CLICK / FETCH

Turbo Drive
SERVER
<BODY />
<HEAD /> MERGE
REPLACE

<BODY>
Turbo Frames
SERVER
<FRAME>
<FORM> POST / FETCH
<FRAME>
<LINK>
CLICK / FETCH

<BODY>
Turbo Frames
SERVER
<FRAME>
<FORM>
REPLACE
REPLACE
<FRAME>
<LINK>

<BODY>
Turbo Frames
SERVER
POST / FETCH
REPLACE FRAME
bit.ly/hotwire-calc

Turbo Streams
<BODY>
SERVER
<CONTENT>
<CONTENT>
12
<FORM>
POST / FETCH

Turbo Streams
<BODY>
SERVER
<CONTENT>
REPLACE
<CONTENT>
DELETE
12
UPDATE

Turbo Streams
<BODY>
SERVER
<BODY>
<BODY>
<BODY>
<BODY>

Stimulus JS
• Obejcts for HTML Elements

• Not concerned with building HTML

• Stateless controllers

• Lifecycle callbacks

Stimulus JS
<BODY>
STIMULUS CONTROLLER
STIMULUS CONTROLLER
STIMULUS CONTROLLER
<CONTENT>
<CONTENT>
<CONTENT>

Join My Online Course Class
👉 mixandgo.com/rails-class
Early Access Is Now Open

Mais conteúdo relacionado

Mais procurados

Micro frontend: The microservices puzzle extended to frontendAudrey Neveu

Microservice ArchitectureNguyen Tung

Trunk based development for BeginnersNebulaworks

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...Shift Conference

Postman: An Introduction for API Ops ProfessionalsPostman

Microservices Part 3 Service Mesh and KafkaAraf Karsh Hamid

Quarkus k8sGeorgios Andrianakis

JHipster presentation by Gaetan BlochGaëtan Bloch

Its time to React.jsRitesh Mehrotra

Single page applicationIsmaeel Enjreny

Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSKNOWARTH - Software Development Company

Micro frontendAmr Abd El Latief

ReactJS presentationThanh Tuong

Advantages and disadvantages of a monorepoIanDavidson56

Micro-Frontend ArchitectureLivares Technologies Pvt Ltd

MicroservicesSmartBear

Circuit Breaker PatternVikash Kodati

Why Microservice Kelvin Yeung

19 08-22 introduction to activeMQWoo Young Choi

Microservices Architecture & Testing StrategiesAraf Karsh Hamid

Mais procurados (20)

Micro frontend: The microservices puzzle extended to frontend

Microservice Architecture

Trunk based development for Beginners

Shift Remote FRONTEND: Micro Frontend Architecture: A Look Into the Future - ...

Postman: An Introduction for API Ops Professionals

Microservices Part 3 Service Mesh and Kafka

Quarkus k8s

JHipster presentation by Gaetan Bloch

Its time to React.js

Single page application

Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS

Micro frontend

ReactJS presentation

Advantages and disadvantages of a monorepo

Micro-Frontend Architecture

Microservices

Circuit Breaker Pattern

Why Microservice

19 08-22 introduction to activeMQ

Microservices Architecture & Testing Strategies

Semelhante a Hotwire: How To Build Reactive Rails Applications Without Javascript

Saigon Ruby Meetup 06/10/2015 - Changeful GemFutureworkz

React Tech SalonChenguang ZHANG

The Thick Front-EndJeff Dickey

Full-Stack Development with Spring Boot and VueJSVMware Tanzu

[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJSSrijan Technologies

Develop a vanilla.js spa you and your customers will loveChris Love

Frontend as a first class citizenMarcin Grzywaczewski

Testing your Single Page ApplicationWekoslav Stefanovski

Conquering AngularJS LimitationsAll Things Open

Conquering AngularJS LimitationsValeri Karpov

Gwt create2013 Frankfurt: How we built a million dollar business with GWTinfoqafe

[.Net开发交流会][2010.06.19]better framework better life(吕国宁)Shanda innovation institute

Better Framework Better Lifejeffz

Intro to SPA using JavaScript & ASP.NETAlan Hecht

Node PDX: Intro to Sails.jsMike McNeil

Single Page Application Development with backbone.js and Simple.WebChris Canal

The Modern Java Web Developer - Denver JUG 2013Matt Raible

What is Mean Stack Development ?Balajihope

Windycityrails page performanceJohn McCaffrey

How angularjs saves railsMichael He

Semelhante a Hotwire: How To Build Reactive Rails Applications Without Javascript (20)

Saigon Ruby Meetup 06/10/2015 - Changeful Gem

React Tech Salon

The Thick Front-End

Full-Stack Development with Spring Boot and VueJS

[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS

Develop a vanilla.js spa you and your customers will love

Frontend as a first class citizen

Testing your Single Page Application

Conquering AngularJS Limitations

Gwt create2013 Frankfurt: How we built a million dollar business with GWT

[.Net开发交流会][2010.06.19]better framework better life(吕国宁)

Better Framework Better Life

Intro to SPA using JavaScript & ASP.NET

Node PDX: Intro to Sails.js

Single Page Application Development with backbone.js and Simple.Web

The Modern Java Web Developer - Denver JUG 2013

What is Mean Stack Development ?

Windycityrails page performance

How angularjs saves rails

Último

Syngulon - Selection technology May 2024.pdfSyngulon

Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt

WebAssembly is Key to Better LLM PerformanceSamy Fodil

IoT Analytics Company Presentation May 2024IoTAnalytics

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance

Designing for Hardware Accessibility at ComcastUXDXConf

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance

Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin

Buy Epson EcoTank L3210 Colour Printer Online.pptxEasyPrinterHelp

Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore

Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge

Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance

UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10

The Metaverse: Are We There Yet?Mark Billinghurst

Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin

Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin

Hotwire: How To Build Reactive Rails Applications Without Javascript

1. HOTWIRE How To Build Reactive Rails Applications Without Javascript

2. Goal for Today • What is Hotwire • How Hotwire works • Why it's a game changer

3. Is This for You? • Just started learning Rails • Experienced Rails devs • Javascript devs

4. Is Learning Rails Worth It in 2022?

5. Junior / Senior Rails Salaries

6. Cezar Halmagean Owner @ mixandgo.com

7. How Did We Get Here? • Rails + JS / Prototype JS • Rails + jQuery • BackboneJS • AngularJS • EmberJS • ReactJS • VueJS • Hotwire

8. Three Questions • Why Hotwire Is the Future • How to Start Using Hotwire Today • Will Hotwire Replace Your SPA?

9. Why Hotwire Is the Future • SPAs are not for everybody • Less complexity is better • Power to the small/tiny/solo businesses • It's the default front-end in Rails 7

10. How to Start Using Hotwire Today • This presentation • YouTube (youtube.com/mixandgo) • The o ffi cial docs (hotwire.dev) • Have patience

11. Will Hotwire Replace Your SPA? • New projects (default) • Old projects turbo-rails & stimulus-rails • SPAs != Full-Stack App • Hotwire + React components

12. What is Hotwire? • Turbo Drive • Turbo Frames • Turbo Streams • Stimulus JS

13. Turbo Drive SERVER <LINK /> <HEAD /> CLICK / FETCH

14. Turbo Drive SERVER <BODY /> <HEAD /> MERGE REPLACE

15. <BODY> Turbo Frames SERVER <FRAME> <FORM> POST / FETCH <FRAME> <LINK> CLICK / FETCH

16. <BODY> Turbo Frames SERVER <FRAME> <FORM> REPLACE REPLACE <FRAME> <LINK>

17. Turbo Frames SERVER

18.

19. <BODY> Turbo Frames SERVER POST / FETCH REPLACE FRAME bit.ly/hotwire-calc

20. Turbo Streams <BODY> SERVER <CONTENT> <CONTENT> 12 <FORM> POST / FETCH

21. Turbo Streams <BODY> SERVER <CONTENT> REPLACE <CONTENT> DELETE 12 UPDATE

22.

23.

24. bit.ly/inline-crud

25.

26. Turbo Streams <BODY> SERVER <BODY> <BODY> <BODY> <BODY>

27. bit.ly/hotwire-broadcasts

28.

29. Stimulus JS • Obejcts for HTML Elements • Not concerned with building HTML • Stateless controllers • Lifecycle callbacks

30. Stimulus JS <BODY> STIMULUS CONTROLLER STIMULUS CONTROLLER STIMULUS CONTROLLER <CONTENT> <CONTENT> <CONTENT>

31. Stimulus JS

32. bit.ly/mmy-stimulus

33. Are You Excited? Overwhelmed?

34. Join My Online Course Class 👉 mixandgo.com/rails-class Early Access Is Now Open

Hotwire: How To Build Reactive Rails Applications Without Javascript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Hotwire: How To Build Reactive Rails Applications Without Javascript

Semelhante a Hotwire: How To Build Reactive Rails Applications Without Javascript (20)

Último

Último (20)

Hotwire: How To Build Reactive Rails Applications Without Javascript