Turbo Applications - Winning with Ajax + pushState + Rails

1 Winning with Ajax + pushState + Rails Turbo Applications

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

Turbolinks 3 Turbolinks v3.0 v3.0

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.

5 pjax - usage <head> 
</head> <body> <h1>My Site</h1> <div class="container" id="pjax-container"> Go to <a href="/page/2">next page</a>. </div> </body> https://github.com/defunkt/jquery-pjax $(document).pjax('a', '#pjax-container')

pjax - on GitHub 6

pjax - on GitHub 7

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

9 Convention

10 Convention Kathy Sierra

Turbolinks • Replace the entire <body> 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

12 INKOVATE - Hackathon App

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

14 INKOVATE - Simple POST

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

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

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

19 INKOVATE - Flash Messages <div id="iv-Main-flash" class="iv-Main-flash" data-turbolinks-temporary> <%=
render_flash_dialogs %> </div>

21 Hot Spots

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

25 What Now?

26 Ken Collins @CustomInkTech Thanks!

Turbo Applications - Winning with Ajax + pushSt...

Turbo Applications - Winning with Ajax + pushState + Rails

Ken Collins

More Decks by Ken Collins

Other Decks in Technology

Featured

Transcript

1 Winning with Ajax + pushState + Rails Turbo Applications

2 FAIRFAX, V IRGI NIA T WO T HOU SA

Turbolinks 3 Turbolinks v3.0 v3.0

4 pjax - overview .--. / \ ## a a

5 pjax - usage <head>

pjax - on GitHub 6

pjax - on GitHub 7

8 pjax - conﬁguration(s) def index if request.headers['X-PJAX'] render layout:

9 Convention

10 Convention Kathy Sierra

Turbolinks • Replace the entire <body> by default. • Opt-in

12 INKOVATE - Hackathon App

13 INKOVATE - Normal GETs class IdeasController < ApplicationController def

14 INKOVATE - Simple POST

15 INKOVATE - Simple POST

16 INKOVATE - Simple POST <%= button_to followings_path(@idea), method: :post

17 INKOVATE - Simple POST <%= button_to followings_path(@idea), method: :post,

18 INKOVATE - Simple POST class FollowingsController < ApplicationController def

19 INKOVATE - Flash Messages <div id="iv-Main-flash" class="iv-Main-flash" data-turbolinks-temporary> <%=

20 INKOVATE - Simple POST

21 Hot Spots

22 INKOVATE - Simple POST

23 INKOVATE - Simple POST

Turbolinks - Hot Spots 24 • Single $(document).on('page:partial- load', ƒ(e)

25 What Now?

26 Ken Collins @CustomInkTech Thanks!