This document discusses building single page applications (SPAs). It covers the evolution of SPAs from technologies like DHTML and Flash to modern JavaScript frameworks. It discusses approaches to building SPAs in Rails like using client-side MVC frameworks with the asset pipeline or Rails and build tools. The document outlines some best practices for SPAs like server-side rendering, reusable components, and avoiding blocking the main thread. It also covers some challenges of SPAs like complexity, race conditions, memory leaks, and dealing with latency.

2. Building a Single
Page App
One page at a time
@nettofarah

3. @nettofarah
netto@ifttt.com
full stack developer at
IFTTT

4. http://ifttt.com/jobs

5. IFTTT

7. but this talk
is also about

11. the evolution of S.P.A.

12. DHTML

13. java applets

14. Flash / Flex

15. GWT

16. ajax

17. the .js era

18. toda vez que o Chaves respira
surge um framework .js novo

19. E isso não somos nós que
dizemos. São as estatísticas.
</pt-br>

21. in the rails world
• prototype.js / jquery gem
• rjs (ughhh)
• asset pipeline
• turbo links?

22. rails asset pipeline

23. rails + gulp/grunt

24. I don’t want my app to be
bound by page refreshes

26. the risks
• rework
• way too many spinning wheels
• the blank page effect
• SEO

27. DOING IT!

28. reuse!
• templates
• snippets
• scripts
• build system

29. reusing your rb/js code

30. server side rendering
optional, but makes a BIG DIFFERENCE!

31. mustache.(js|rb)

32. 1 def regular_controller_method
2 @participants = User.last(10)
3 @event = Event.find_by_technology(:ruby)
4 end
the normal way

33. 1 <div>
2 <% if Time.now.saturday? && Time.now.hour > 13 %>
3 yay, Netto is talking about Single Page apps
4 <% else %>
5 Can't wait to see Netto's talk!
6 <% end %>
7
8 <% is_tropical_ruby = @event.name.match(/tropical/i) %>
9 <% is_active = @event.end_date =< Date.today %>
10
11 <% if is_tropical_ruby && is_active %>
12 yay :)
13 <% end %>
14
15 <% @participants.each ... %>
16 # MOAR RUBY!! lol
17 <% end %>
18
19 </div>

34. 1 def api_controller_method
2 participants = User.last(10)
3 event = Event.find_by_technology(:ruby)
4
5 is_nettos_talk = Time.now.saturday? && Time.now.hour > 14
6
7 @h = {
8 participants: users,
9 event: {
10 is_nettos_talk: is_nettos_talk,
11 is_tropical_ruby: event.tropical_rb?,
12 is_active: event.active?
13 }
14 }
15
16 respond_to do |format|
17 format.html
18 format.json { render json: @h.to_json }
19 end
20 end

35. 1 <div>
2 {{#is_nettos_talk}}
3 yay, Netto is talking about Single Page apps
4 {{/is_nettos_talk}}
5
6 {{^is_nettos_talk}}
7 Can't wait to see Netto's talk!
8 I should follow him on twitter: @nettofarah
9 {{/is_nettos_talk}}
10
11 {{#event.is_tropical_ruby}}
12 yay
13 {{/event.is_tropical_ruby}}
14
15 {{#participants}}
16 ... SOME COOL MUSTACHE STUFF
17 {{/participants}}
18 </div>

36. Presenters?

37. hogan.js
minify your .mustache
templates and serve with asset-pipeline
https://github.com/leshill/hogan_assets

38. 1 define("hgn!templates/recipe" ,
["hogan"],function(hogan){ return function
render(c,p,i) {
2 var t=this;t.b(i=i||"");t.b("<div>
");if(t.s(t.f("is_nettos_talk",c,p,1),c,p,
0,25,71,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("
yay, Netto is talking about Single Page apps
");});c.pop();}t.b(" ");if(!
t.s(t.f("is_nettos_talk",c,p,1),c,p,1,0,0,"")){t.b("
Can't wait to see Netto's talk! I should follow him
on twitter: @nettofarah ");};t.b("
");if(t.s(t.d("event.is_tropical_ruby",c,p,1),c,p,
0,235,240,"{{ }}")){t.rs(c,p,function(c,p,t){t.b("
yay ");});c.pop();}t.b("
");if(t.s(t.f("participants",c,p,1),c,p,
0,285,315,"{{ }}")){t.rs(c,p,function(c,p,t)
{t.b(" ... SOME COOL MUSTACHE STUFF ");});c.pop();}
t.b(" </div>");return t.fl(); } }

39. require.js rails
https://github.com/jwhitley/requirejs-rails
• small and reusable components
• load only what you need

40. 1 define('recipe_view', ['ingredient', 'recipeTemplate'],
2 function(Ingredient, recipeTemplate) {
3
4 var RecipeView = function() {
5
6 function render() {
7 var ingredient = new Ingredient({..});
8 var fragment = recipeTemplate.render(ingredient);
9 $(..).html(fragment);
10 }
11
12 ...
13 };
14
15 return RecipeView;
16 }
17 );

41. legacy routes
config/routes.rb -> app/js/routes.js
https://github.com/pseudomuto/routesjs-rails

42. reporting

43. 1 // very simplistic example
2
3 window.onerror = function(message, url, lineNumber) {
4 // a rails controller
5 // or some other service
6 $.post('/js-errors', {
7 message: message,
8 url: url,
9 line_number: lineNumber
10 ...
11 });
12 }

44. testing

45. the consequences

46. the positive ones

47. fast(er) experience
• (potentially) independent deployment strategy
• better loading time and user experience
• decoupled code and test suite

48. the bad and the ugly

49. complexity

50. race conditions

51. regular web app
initial load
login info
js load event hooks/callbacks

52. single page (async) app

53. 1 // Regular JS App
2 function Session() {
3 var currentUser = App.User; // this comes from erb
4 function onUserLogIn(callback) {
5 if (currentUser != null) {
6 callback();
7 }
8 }
9 }

54. 1 // Single Page App Code
2 function Session() {
3 var onLogInCallbacks = [];
4 var currentUser;
5
6 function fetchCurrentUser() {
7 $.ajax(...).done(function() {
8 _.each(onLoginCallbacks, function(callback) {
9 callback(currentUser);
10 })
11 });
12 }
13
14 function onUserLogIn(callback) {
15 if (currentUser != null) {
16 callback(currentUser);
17 } else {
18 onLoginCallbacks.push(callback);
19 }
20 }
21 }
Save callback
for later
run callbacks

55. memory leaks

56. 3 var onLogInCallbacks = [];
4 var currentUser;
5
6 function fetchCurrentSession() {
7 $.ajax(...).done(function() {
8 _.each(onLoginCallbacks,
function(callback) {
9 callback(currentUser);
10 });
11
12 clear(onLoginCallbacks);
13 });
14 }
15
16 function onUserLogIn(callback) {
17 if (currentUser != null) {
18 callback(currentUser);
19 } else {
20 onLoginCallbacks.push(callback);
21 }
cleanup after yourself

57. do not block the main thread
1 function onUserLogIn(callback) {
2 if (currentUser != null) {
3 setTimeout(callback, 0, currentUser);
4 }
5 }

58. instance x prototype

59. learnings

60. page refreshes are JS
developers best friends

61. beware of latency

62. events, callbacks and
promises

63. Don’t just learn a framework.
Learn JavaScript.

64. what’s next?
• ifttt.com next gen!
• react.js
• flight.js