Slide 1

Slide 1 text

1 Winning with Ajax + pushState + Rails Turbo Applications

Slide 2

Slide 2 text

2 FAIRFAX, V IRGI NIA T WO T HOU SA N D FI F TE E N

Slide 3

Slide 3 text

Turbolinks 3 Turbolinks v3.0 v3.0

Slide 4

Slide 4 text

4 pjax - overview .--. / \ ## a a ( '._) |'-- | _.\___/_ ___pjax___ ."\> \Y/|<'. '._.-' / \ \_\/ / '-' / | --'\_/|/ | _/ |___.-' | |`'` | | | | / './ /__./` | | \ | | \ | | ; | | / | | jgs |___\_.\_ `-"--'---' https://github.com/defunkt/jquery-pjax • pushState + ajax • HTML from server. • Replace page content. • Changes current URL. • No reload page layout including CSS & JS. • Appearance of a fast page load.

Slide 5

Slide 5 text

5 pjax - usage

My Site

Go to next page.

https://github.com/defunkt/jquery-pjax $(document).pjax('a', '#pjax-container')

Slide 6

Slide 6 text

pjax - on GitHub 6

Slide 7

Slide 7 text

pjax - on GitHub 7

Slide 8

Slide 8 text

8 pjax - conﬁguration(s) def index if request.headers['X-PJAX'] render layout: false end end https://github.com/defunkt/jquery-pjax

Slide 9

Slide 9 text

9 Convention

Slide 10

Slide 10 text

10 Convention Kathy Sierra

Slide 11

Slide 11 text

Turbolinks • Replace the entire by default. • Opt-in to replace speciﬁc elements. • jQuery not required. Lightweight. • Doesn’t rely on tailored server side responses. Python, Django, PHP, Grails, ASP.NET • Don't make me think Rails integration. 11

Slide 12

Slide 12 text

12 INKOVATE - Hackathon App

Slide 13

Slide 13 text

13 INKOVATE - Normal GETs class IdeasController < ApplicationController def index @ideas = Idea.order(order_clause) end end

Slide 14

Slide 14 text

14 INKOVATE - Simple POST

Slide 15

Slide 15 text

15 INKOVATE - Simple POST

Slide 16

Slide 16 text

16 INKOVATE - Simple POST <%= button_to followings_path(@idea), method: :post do %> Follow Idea <% end %>

Slide 17

Slide 17 text

17 INKOVATE - Simple POST <%= button_to followings_path(@idea), method: :post, remote: true do %> Follow Idea <% end %>

Slide 18

Slide 18 text

18 INKOVATE - Simple POST class FollowingsController < ApplicationController def create @idea = Idea.find params[:idea_id] @idea.followers << current_user changed = ['iv-Main-flash', 'iv-FollowActions', 'iv-Followers'] redirect_to @idea, change: changed, flash: {info: 'Following this idea!'} end end

Slide 19

Slide 19 text

19 INKOVATE - Flash Messages

<%= render_flash_dialogs %>

Slide 20

Slide 20 text

20 INKOVATE - Simple POST

Slide 21

Slide 21 text

21 Hot Spots

Slide 22

Slide 22 text

22 INKOVATE - Simple POST

Slide 23

Slide 23 text

23 INKOVATE - Simple POST

Slide 24

Slide 24 text

Turbolinks - Hot Spots 24 • Single $(document).on('page:partial- load', ƒ(e) {…} handler and delegation. • Changing Fast. Oﬃcial v5 is coming.