Tweet
Tweet

Slide 1

Slide 1 text

Alex Coles | RubyConf Portugal, Braga Frontend Choices

Slide 2

Slide 2 text

olá Braga

Slide 3

Slide 3 text

not really about choice

Slide 4

Slide 4 text

I’m a backend guy living in a frontend world “

Slide 5

Slide 5 text

quem sou eu?

Slide 6

Slide 6 text

@myabc Alex Coles Berlin, Germany Finn GmbH

Slide 7

Slide 7 text

@myabc openproject.org openproject.org OpenProject

Slide 8

Slide 8 text

@myabc eurucamp.org eurucamp.org eurucamp

Slide 9

Slide 9 text

@myabc eurucamp.org eurucamp.org eurucamp

Slide 10

Slide 10 text

10 years ago

Slide 11

Slide 11 text

10 years ago 2004

Slide 12

Slide 12 text

10 years ago what was I doing?

Slide 13

Slide 13 text

10 years ago what was I doing?

Slide 14

Slide 14 text

10 years ago what was I doing?

Slide 15

Slide 15 text

10 years ago what was the world doing?

Slide 16

Slide 16 text

10 years ago what was the world doing?

Slide 17

Slide 17 text

10 years ago what was the world doing?

Slide 18

Slide 18 text

10 years ago what was the world doing?

Slide 19

Slide 19 text

10 years ago what was the world doing?

Slide 20

Slide 20 text

10 years ago what was Portugal doing?

Slide 21

Slide 21 text

10 years ago what was Portugal doing?

Slide 22

Slide 22 text

10 years ago what was Portugal doing?

Slide 23

Slide 23 text

10 years ago what were you doing?

Slide 24

Slide 24 text

10 years ago what were you doing? ?

Slide 25

Slide 25 text

10 years ago what was Apple doing?

Slide 26

Slide 26 text

10 years ago what was Apple doing?

Slide 27

Slide 27 text

10 years ago what was Apple doing?

Slide 28

Slide 28 text

10 years ago what was the web doing?

Slide 29

Slide 29 text

10 years ago what was the web doing?

Slide 30

Slide 30 text

10 years ago there was no jQuery!

Slide 31

Slide 31 text

10 years ago but the end of 2004 was to mark a transition

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

The Rails Way

Slide 35

Slide 35 text

Rails is so 2005 “

Slide 36

Slide 36 text

Rails is so 2005 “

Slide 37

Slide 37 text

“Rails Way” back in 2005

Slide 38

Slide 38 text

“Rails Way” back in 2005 •Server Generated HTML (ERB, etc.)

Slide 39

Slide 39 text

“Rails Way” back in 2005 •Server Generated HTML (ERB, etc.) •Prototype

Slide 40

Slide 40 text

“Rails Way” back in 2005 •Server Generated HTML (ERB, etc.) •Prototype •Scriptaculous

Slide 41

Slide 41 text

“Rails Way” back in 2005 •Server Generated HTML (ERB, etc.) •Prototype •Scriptaculous •RJS

Slide 42

Slide 42 text

http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS

Slide 43

Slide 43 text

http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS

Slide 44

Slide 44 text

RJS

Slide 45

Slide 45 text

RJS
  <%=  link_to_remote  'Add  to  cart',  url:  {  controller:  'cart',  action:   'add_to_cart'  }%> erb view

Slide 46

Slide 46 text

RJS
  <%=  link_to_remote  'Add  to  cart',  url:  {  controller:  'cart',  action:   'add_to_cart'  }%> erb view class  CartController  <  ActionController::Base      def  add_to_cart          @item  =  CartItem.new          @cart.items  <<  @item      end   end controller

Slide 47

Slide 47 text

RJS
  <%=  link_to_remote  'Add  to  cart',  url:  {  controller:  'cart',  action:   'add_to_cart'  }%> erb view class  CartController  <  ActionController::Base      def  add_to_cart          @item  =  CartItem.new          @cart.items  <<  @item      end   end controller page.insert_html    :bottom,  :items,  partial:  'item',  object:  @item   page.replace_html  :items_count,  I18n.t(:item,  count:   @cart.items.count)   rjs view

Slide 48

Slide 48 text

…we mostly had “websites”

Slide 49

Slide 49 text

yahoo.com Yahoo! 2004

Slide 50

Slide 50 text

bindows.net Bindows 2004

Slide 51

Slide 51 text

gmail.com Gmail pre-β 2002-4 http://techcrunch.com/2008/06/06/the-evolution-of-pre-launch-gmail-in-screenshots/

Slide 52

Slide 52 text

where we are now

Slide 53

Slide 53 text

…we have “applications”

Slide 54

Slide 54 text

soundcloud.com Soundcloud

Slide 55

Slide 55 text

Single Page Application Architecture

Slide 56

Slide 56 text

Single Page Application Architecture - +

Slide 57

Slide 57 text

chunking Single Page Application Architecture - +

Slide 58

Slide 58 text

chunking controller Single Page Application Architecture - +

Slide 59

Slide 59 text

chunking controller templating Single Page Application Architecture - +

Slide 60

Slide 60 text

chunking controller templating routing Single Page Application Architecture - +

Slide 61

Slide 61 text

chunking controller templating routing real-time communicaton Single Page Application Architecture - +

Slide 62

Slide 62 text

chunking controller templating routing real-time communicaton local storage Single Page Application Architecture - +

Slide 63

Slide 63 text

“Rails Way” now

Slide 64

Slide 64 text

“Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.)

Slide 65

Slide 65 text

“Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery

Slide 66

Slide 66 text

“Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery • jQuery UI

Slide 67

Slide 67 text

“Rails Way” now • Server Generated HTML (ERB, Slim, HAML etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)

Slide 68

Slide 68 text

JavaScript has grown up

Slide 69

Slide 69 text

JavaScript has grown up percentage of total JS developer jobs has doubled from 2005 to 2010 indeed.com

Slide 70

Slide 70 text

JavaScript has grown up Server-side usage of JS has been multiplied by 6 from Jan 2012 to Oct 2014 W3Techs.com

Slide 71

Slide 71 text

no backend nobackend.org

Slide 72

Slide 72 text

hood.ie Hoodie

Slide 73

Slide 73 text

isomorphism

Slide 74

Slide 74 text

meteor.com Meteor

Slide 75

Slide 75 text

frontend frameworks

Slide 76

Slide 76 text

frontend (MV*) frameworks

Slide 77

Slide 77 text

frontend (MV*) frameworks AngularJS

Slide 78

Slide 78 text

frontend (MV*) frameworks AngularJS KnockoutJS

Slide 79

Slide 79 text

frontend (MV*) frameworks AngularJS Ember.js KnockoutJS

Slide 80

Slide 80 text

frontend (component) frameworks

Slide 81

Slide 81 text

frontend (component) frameworks Ractive.js

Slide 82

Slide 82 text

ReactJS frontend (component) frameworks Ractive.js

Slide 83

Slide 83 text

ReactJS Backbone View (alone) frontend (component) frameworks Ractive.js

Slide 84

Slide 84 text

ReactJS ExtJS Backbone View (alone) frontend (component) frameworks Ractive.js

Slide 85

Slide 85 text

TodoMVC todomvc.com

Slide 86

Slide 86 text

More on MV*…

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

but I <3 Ruby !

Slide 91

Slide 91 text

so here is the question

Slide 92

Slide 92 text

“

Slide 93

Slide 93 text

is there room for Rails?

Slide 94

Slide 94 text

“ – Marcin Stecki @madsheepPL at wroc_love.rb Not his [DHH’s] responsibility to tell us how to do these things.

Slide 95

Slide 95 text

single page vs. traditional HTML

Slide 96

Slide 96 text

naturally content-dependent

Slide 97

Slide 97 text

what is your content? general personal

Slide 98

Slide 98 text

what is your content? Information pages general personal

Slide 99

Slide 99 text

what is your content? Information pages Membership sites general personal

Slide 100

Slide 100 text

what is your content? Information pages Closed systems Membership sites general personal

Slide 101

Slide 101 text

content criteria

Slide 102

Slide 102 text

content criteria • authentication

Slide 103

Slide 103 text

content criteria • authentication • how real is real-time

Slide 104

Slide 104 text

content criteria • authentication • how real is real-time • caching

Slide 105

Slide 105 text

content criteria • authentication • how real is real-time • caching • indexing (SEO)

Slide 106

Slide 106 text

how unique is the view to be rendered?

Slide 107

Slide 107 text

how unique is the view to be rendered? how many combinations of a unique set of data?

Slide 108

Slide 108 text

how unique is the view to be rendered? how many combinations of a unique set of data? • a blog with comments

Slide 109

Slide 109 text

how unique is the view to be rendered? how many combinations of a unique set of data? • a blog with comments • a hotel page with reviews

Slide 110

Slide 110 text

how unique is the view to be rendered? how many combinations of a unique set of data? • a blog with comments • a hotel page with reviews • a dashboard

Slide 111

Slide 111 text

if it is curated content Rails way →

Slide 112

Slide 112 text

other ways are better if it is SPA →

Slide 113

Slide 113 text

some tips

Slide 114

Slide 114 text

what is most like Rails? tip 1: familiarity

Slide 115

Slide 115 text

what is most like Rails? tip 1: familiarity

Slide 116

Slide 116 text

tip 1: familiarity Ember.js is most like Rails

Slide 117

Slide 117 text

Ember.js is most like Rails

Slide 118

Slide 118 text

Ember.js is most like Rails • everything should inherit from main object

Slide 119

Slide 119 text

Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited)

Slide 120

Slide 120 text

Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited) Ember.Object

Slide 121

Slide 121 text

Ember.js is most like Rails • everything should inherit from main object ActiveRecord::Base.inherited) Ember.Object Plain Old JavaScript Objects

Slide 122

Slide 122 text

Ember.js is most like Rails

Slide 123

Slide 123 text

Ember.js is most like Rails • routing DSL

Slide 124

Slide 124 text

Ember.js is most like Rails • routing DSL built-in routing

Slide 125

Slide 125 text

Ember.js is most like Rails • routing DSL built-in routing built-in routing

Slide 126

Slide 126 text

Ember.js is most like Rails • routing DSL built-in routing not in core, third party solutions built-in routing

Slide 127

Slide 127 text

Ember.js is most like Rails

Slide 128

Slide 128 text

Ember.js is most like Rails • vocabulary (templates, partials, etc.)

Slide 129

Slide 129 text

Ember.js is most like Rails • vocabulary (templates, partials, etc.) Models, Controllers, Views, Initializers

Slide 130

Slide 130 text

Ember.js is most like Rails • vocabulary (templates, partials, etc.) Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers

Slide 131

Slide 131 text

Ember.js is most like Rails • vocabulary (templates, partials, etc.) Dependency Injection, Factories, Services, Providers,
 Transclusion Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers

Slide 132

Slide 132 text

how to make things work with Rails?

Slide 133

Slide 133 text

using asset pipeline / sprockets tip 2: Rails “the non-Rails way

Slide 134

Slide 134 text

use Bower

Slide 135

Slide 135 text

use Bower

Slide 136

Slide 136 text

3 options for using Bower

Slide 137

Slide 137 text

gem install bower-rails 1 option gem

Slide 138

Slide 138 text

config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components') Rails 4 (Sprockets 2+) 2 option

Slide 139

Slide 139 text

rails-assets.org rails-assets.org 3 option

Slide 140

Slide 140 text

ember-rails-api github.com/dockyard/ember-appkit-rails

Slide 141

Slide 141 text

the app/assets/javascripts silo

Slide 142

Slide 142 text

one more thing… (sidetrack)

Slide 143

Slide 143 text

voltframework.com Volt Framework Volt is a framework for building data rich web applications shockingly fast. Play Video ! Get Started " Home Getting Started Docs API Blog Community #

Slide 144

Slide 144 text

what is the way forward? →

Slide 145

Slide 145 text

(IMHO)

Slide 146

Slide 146 text

split completely ! tip 3: split

Slide 147

Slide 147 text

I don’t like monoliths

Slide 148

Slide 148 text

applications 2

Slide 149

Slide 149 text

applications 2 =

Slide 150

Slide 150 text

applications 2 = 1 API +

Slide 151

Slide 151 text

applications 2 frontend = 1 API + 1

Slide 152

Slide 152 text

API

Slide 153

Slide 153 text

API Rails

Slide 154

Slide 154 text

API Rails Sinatra

Slide 155

Slide 155 text

API Rails Sinatra Lotus.rb

Slide 156

Slide 156 text

frontend API Rails Sinatra Lotus.rb

Slide 157

Slide 157 text

frontend API Rails Sinatra JS workflows Lotus.rb

Slide 158

Slide 158 text

JavaScript tooling

Slide 159

Slide 159 text

isomorphism is possible http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

Slide 160

Slide 160 text

surprisingly well testable (and fast)

Slide 161

Slide 161 text

muito obrigado!

Slide 162

Slide 162 text

perguntas?

Slide 163

Slide 163 text

@myabc