Tweet
Tweet

Slide 1

Slide 1 text

HOTWIRE - HTML OVER THE WIRE

Slide 2

Slide 2 text

• IT Consultant @ codecentric • felix.riess@codecentric.de • https://github.com/felix185/ hotwire-with-quarkus • https://speakerdeck.com/ felix185 $ whoami

Slide 3

Slide 3 text

MODERN WEB APPLICATIONS

Slide 4

Slide 4 text

WEB APPLICATIONS APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/

Slide 5

Slide 5 text

„TRADITIONAL“ WEB APPLICATIONS APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/

Slide 6

Slide 6 text

„MODERN“ WEB APPLICATIONS APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/

Slide 7

Slide 7 text

„MODERN“ WEB APPLICATIONS WITH OFFLINE CAPABILITIES APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR https://www.innoq.com/en/articles/2020/01/javascript-in-ma%C3%9Fen/

Slide 8

Slide 8 text

WE BUILT AN SPA TO AVOID FULL PAGE RELOADS INCLUDING REPARSING CSS AND JAVASCRIPT WE BUILT AN SPA FOR A BETTER USER EXPERIENCE WITH SMOOTH TRANSITIONS DURING NAVIGATION OUR DEVELOPERS HAVE BUILT ONLY SINGLE PAGE APPLICATIONS SO FAR

Slide 9

Slide 9 text

BROWSERS ARE AN UNCONTROLLED EXECUTION ENVIRONMENT!

Slide 10

Slide 10 text

https://hotwired.dev/ „HOTWIRE IS AN ALTERNATIVE APPROACH TO BUILDING MODERN WEB APPLICATIONS WITHOUT USING MUCH JAVASCRIPT BY SENDING HTML INSTEAD OF JSON OVER THE WIRE.“

Slide 11

Slide 11 text

„MODERN“ WEB APPLICATIONS? APPLICATION STATE BUSINESS LOGIC ROUTING PRESENTATION LOGIC & TEMPLATING APPEARANCE & BEHAVIOR

Slide 12

Slide 12 text

WE DON’T WANT FULL PAGE RELOADS! WE WANT SMOOTH TRANSITIONS DURING NAVIGATION! OUR DEVELOPERS DON’T WANT TO BUILD OLD SCHOOL JSF APPS. THEY WANT COOL TECHNOLOGIES!

Slide 13

Slide 13 text

HOTWIRE TURBO STIMULUS STRADA

Slide 14

Slide 14 text

TURBO DRIVE

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

TURBO FRAMES

Slide 17

Slide 17 text

Title Completed Mark as done Todo Open

Slide 18

Slide 18 text

Title Completed Mark as done Todo Done

Slide 19

Slide 19 text

LAZY LOADING FOR FREE

TODO List

Slide 20

Slide 20 text

LAZY LOADING FOR FREE

Slide 21

Slide 21 text

UPDATING FRAMES FROM OUTSIDE

TODO List

Create TODO

TODO:

Slide 22

Slide 22 text

TURBO STREAMS

Slide 23

Slide 23 text

Todo Open text/vnd.turbo-stream.html

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

CONNECTING TO EVENT STREAMS if (window["EventSource"] && window["Turbo"]) { Turbo.connectStreamSource(new EventSource("/todos/sse/connect")); } else { console.warn("Turbo Streams over SSE not available"); }

Slide 26

Slide 26 text

DEMO

Slide 27

Slide 27 text

WOW THAT’S PRETTY COOL! SERVER SIDE RENDERING WITHOUT FULL RELOADS! SUCH A GREAT USER EXPERIENCE! IT’S SO FAST! HOTWIRE IS SO EASY TO LEARN AND INTEGRATES WELL WITH OUR QUARKUS SETUP! FRONTEND DEVELOPMENT JUST BECAME A JOY!

Slide 28

Slide 28 text

THERE IS MORE

Slide 29

Slide 29 text

STIMULUS

Slide 30

Slide 30 text

MICROFRONTENDS

Slide 31

Slide 31 text

IT DOES NOT ALWAYS HAVE TO BE AN SPA!

Slide 32

Slide 32 text

• IT Consultant @ codecentric • felix.riess@codecentric.de • https://github.com/felix185/ hotwire-with-quarkus • https://speakerdeck.com/ felix185 THANK YOU!

Slide 33

Slide 33 text

REFERENCES • Images: • Photo by Lautaro Andreani • Photo by Glenn Carstens-Peters • Photo by Rob Laughter