Frontend Choices Alex Coles | Goto Conference, Berlin not really - - PowerPoint PPT Presentation

▶
frontend choices
SMART_READER_LITE
LIVE PREVIEW

Frontend Choices Alex Coles | Goto Conference, Berlin not really - - PowerPoint PPT Presentation

Jul 28, 2023 13 likes •1.61k views

Frontend Choices Alex Coles | Goto Conference, Berlin not really about choice hallo Berlin Im a backend guy living in a frontend world wer bin ich? @myabc Alex Coles Berlin, Germany Finn GmbH @myabc openproject.org OpenProject

slide-1
SLIDE 1 Alex Coles | Goto Conference, Berlin

Frontend Choices

slide-2
SLIDE 2 not really about choice
slide-3
SLIDE 3 hallo Berlin
slide-4
SLIDE 4 I’m a backend guy living in a frontend world

“

slide-5
SLIDE 5 wer bin ich?
slide-6
SLIDE 6

@myabc

Alex Coles Berlin, Germany Finn GmbH
slide-7
SLIDE 7

@myabc

  • penproject.org
  • penproject.org

OpenProject

slide-8
SLIDE 8

@myabc

eurucamp.org eurucamp.org jrubyconf.eu
slide-9
SLIDE 9

10 years ago

slide-10
SLIDE 10

10 years ago

2004

slide-11
SLIDE 11

10 years ago

what was I doing?
slide-12
SLIDE 12

10 years ago

what was I doing?
slide-13
SLIDE 13

10 years ago

what was I doing?
slide-14
SLIDE 14

10 years ago

what was the world doing?
slide-15
SLIDE 15

10 years ago

what was the world doing?
slide-16
SLIDE 16

10 years ago

what was the world doing?
slide-17
SLIDE 17

10 years ago

what was the world doing?
slide-18
SLIDE 18

10 years ago

what was the world doing?
slide-19
SLIDE 19

10 years ago

what were you doing?
slide-20
SLIDE 20

10 years ago

what were you doing?

?

slide-21
SLIDE 21

10 years ago

what was Apple doing?
slide-22
SLIDE 22

10 years ago

what was Apple doing?
slide-23
SLIDE 23

10 years ago

what was Apple doing?
slide-24
SLIDE 24

10 years ago

what was the web doing?
slide-25
SLIDE 25

10 years ago

what was the web doing?
slide-26
SLIDE 26

10 years ago

there was no jQuery!
slide-27
SLIDE 27

10 years ago

but the end of 2004 was to mark a transition
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30

The Rails Way

“

slide-31
SLIDE 31

Rails is so 2005

“

slide-32
SLIDE 32

Rails is so 2005

“

slide-33
SLIDE 33

“Rails Way” back in 2005

slide-34
SLIDE 34

“Rails Way” back in 2005

  • Server Generated
HTML (ERB, etc.)
slide-35
SLIDE 35

“Rails Way” back in 2005

  • Server Generated
HTML (ERB, etc.)
  • Prototype
slide-36
SLIDE 36

“Rails Way” back in 2005

  • Server Generated
HTML (ERB, etc.)
  • Prototype
  • Scriptaculous
slide-37
SLIDE 37

“Rails Way” back in 2005

  • Server Generated
HTML (ERB, etc.)
  • Prototype
  • Scriptaculous
  • RJS
slide-38
SLIDE 38 http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf

RJS

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

RJS

slide-40
SLIDE 40

RJS

slide-41
SLIDE 41

RJS

<div ¡id="items"></div> ¡ <%= ¡link_to_remote ¡'Add ¡to ¡cart', ¡url: ¡{ ¡controller: ¡'cart', ¡action: ¡ 'add_to_cart' ¡}%> erb view
slide-42
SLIDE 42

RJS

<div ¡id="items"></div> ¡ <%= ¡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-43
SLIDE 43

RJS

<div ¡id="items"></div> ¡ <%= ¡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-44
SLIDE 44

…we mostly had “websites”

slide-45
SLIDE 45 yahoo.com Yahoo! 2004
slide-46
SLIDE 46 bindows.net Bindows 2004
slide-47
SLIDE 47 gmail.com Gmail pre-β 2002-4 http://techcrunch.com/2008/06/06/the-evolution-of-pre-launch-gmail-in-screenshots/
slide-48
SLIDE 48

where we are now

slide-49
SLIDE 49

…we have “applications”

slide-50
SLIDE 50 soundcloud.com Soundcloud
slide-51
SLIDE 51 Single Page Application Architecture
slide-52
SLIDE 52

Single Page Application Architecture

  • +
slide-53
SLIDE 53 chunking

Single Page Application Architecture

  • +
slide-54
SLIDE 54 chunking controller

Single Page Application Architecture

  • +
slide-55
SLIDE 55 chunking controller templating

Single Page Application Architecture

  • +
slide-56
SLIDE 56 chunking controller templating routing

Single Page Application Architecture

  • +
slide-57
SLIDE 57 chunking controller templating routing real-time communicaton

Single Page Application Architecture

  • +
slide-58
SLIDE 58 chunking controller templating routing real-time communicaton local storage

Single Page Application Architecture

  • +
slide-59
SLIDE 59

“Rails Way” now

slide-60
SLIDE 60

“Rails Way” now

  • Server Generated HTML
(ERB, Slim, HAML etc.)
slide-61
SLIDE 61

“Rails Way” now

  • Server Generated HTML
(ERB, Slim, HAML etc.)
  • jQuery
slide-62
SLIDE 62

“Rails Way” now

  • Server Generated HTML
(ERB, Slim, HAML etc.)
  • jQuery
  • jQuery UI
slide-63
SLIDE 63

“Rails Way” now

  • Server Generated HTML
(ERB, Slim, HAML etc.)
  • jQuery
  • jQuery UI
  • Server generated
JavaScript Responses (SJR)
slide-64
SLIDE 64

JavaScript has grown up

slide-65
SLIDE 65

JavaScript has grown up

percentage of total JS developer jobs has doubled from 2005 to 2010 indeed.com
slide-66
SLIDE 66

JavaScript has grown up

Server-side usage of JS has been multiplied by 6 from Jan 2012 to Oct 2014 W3Techs.com
slide-67
SLIDE 67

no backend

nobackend.org
slide-68
SLIDE 68 hood.ie

Hoodie

slide-69
SLIDE 69

isomorphism

slide-70
SLIDE 70 meteor.com

Meteor

slide-71
SLIDE 71

frontend frameworks

slide-72
SLIDE 72

frontend (MV*) frameworks

slide-73
SLIDE 73

frontend (MV*) frameworks

AngularJS
slide-74
SLIDE 74

frontend (MV*) frameworks

AngularJS KnockoutJS
slide-75
SLIDE 75

frontend (MV*) frameworks

AngularJS Ember.js KnockoutJS
slide-76
SLIDE 76

frontend (component) frameworks

slide-77
SLIDE 77

frontend (component) frameworks

Ractive.js
slide-78
SLIDE 78 ReactJS

frontend (component) frameworks

Ractive.js
slide-79
SLIDE 79 ReactJS Backbone View (alone)

frontend (component) frameworks

Ractive.js
slide-80
SLIDE 80 ReactJS ExtJS Backbone View (alone)

frontend (component) frameworks

Ractive.js
slide-81
SLIDE 81

TodoMVC

todomvc.com
slide-82
SLIDE 82

More on MV*…

slide-83
SLIDE 83
slide-84
SLIDE 84
slide-85
SLIDE 85
slide-86
SLIDE 86

but I <3 Ruby

!

slide-87
SLIDE 87

so here is the question

slide-88
SLIDE 88

“

slide-89
SLIDE 89

is there room for Rails?

slide-90
SLIDE 90

“

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

single page vs. traditional HTML

slide-92
SLIDE 92

naturally content-dependent

slide-93
SLIDE 93

what is your content?

general personal
slide-94
SLIDE 94

what is your content?

Information pages general personal
slide-95
SLIDE 95

what is your content?

Information pages Membership sites general personal
slide-96
SLIDE 96

what is your content?

Information pages Closed systems Membership sites general personal
slide-97
SLIDE 97

content criteria

slide-98
SLIDE 98

content criteria

  • authentication
slide-99
SLIDE 99

content criteria

  • authentication
  • how real is real-time
slide-100
SLIDE 100

content criteria

  • authentication
  • how real is real-time
  • caching
slide-101
SLIDE 101

content criteria

  • authentication
  • how real is real-time
  • caching
  • indexing (SEO)
slide-102
SLIDE 102

how unique is the view to be rendered?

slide-103
SLIDE 103

how unique is the view to be rendered?

how many combinations of a unique set of data?
slide-104
SLIDE 104

how unique is the view to be rendered?

how many combinations of a unique set of data?
  • a blog with comments
slide-105
SLIDE 105

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-106
SLIDE 106

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-107
SLIDE 107

if it is curated content Rails way

→

slide-108
SLIDE 108
  • ther ways are

better if it is SPA

→

slide-109
SLIDE 109

some

tips

slide-110
SLIDE 110

what is most like Rails?

tip 1: familiarity
slide-111
SLIDE 111

what is most like Rails?

tip 1: familiarity
slide-112
SLIDE 112 tip 1: familiarity

Ember.js is most like Rails

slide-113
SLIDE 113

Ember.js is most like Rails

slide-114
SLIDE 114

Ember.js is most like Rails

  • everything should inherit from main object
slide-115
SLIDE 115

Ember.js is most like Rails

  • everything should inherit from main object
ActiveRecord::Base.inherited)
slide-116
SLIDE 116

Ember.js is most like Rails

  • everything should inherit from main object
ActiveRecord::Base.inherited) Ember.Object
slide-117
SLIDE 117

Ember.js is most like Rails

  • everything should inherit from main object
ActiveRecord::Base.inherited) Ember.Object Plain Old JavaScript Objects
slide-118
SLIDE 118

Ember.js is most like Rails

slide-119
SLIDE 119

Ember.js is most like Rails

  • routing DSL
slide-120
SLIDE 120

Ember.js is most like Rails

  • routing DSL
built-in routing
slide-121
SLIDE 121

Ember.js is most like Rails

  • routing DSL
built-in routing built-in routing
slide-122
SLIDE 122

Ember.js is most like Rails

  • routing DSL
built-in routing not in core, third party solutions built-in routing
slide-123
SLIDE 123

Ember.js is most like Rails

slide-124
SLIDE 124

Ember.js is most like Rails

  • vocabulary (templates, partials, etc.)
slide-125
SLIDE 125

Ember.js is most like Rails

  • vocabulary (templates, partials, etc.)
Models, Controllers, Views, Initializers
slide-126
SLIDE 126

Ember.js is most like Rails

  • vocabulary (templates, partials, etc.)
Models, Controllers, Views, Initializers Models, Controllers, Views, Initializers
slide-127
SLIDE 127

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-128
SLIDE 128 how to make things work with Rails?
slide-129
SLIDE 129

using asset pipeline / sprockets

tip 2: Rails “the non-Rails way
slide-130
SLIDE 130

use Bower

slide-131
SLIDE 131

use Bower

slide-132
SLIDE 132

3 options for using Bower

slide-133
SLIDE 133

gem install bower-rails

1

  • ption

gem

slide-134
SLIDE 134

config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components')

Rails 4 (Sprockets 2+)

2

  • ption
slide-135
SLIDE 135 rails-assets.org

rails-assets.org

3

  • ption
slide-136
SLIDE 136

ember-rails-api

github.com/dockyard/ember-appkit-rails
slide-137
SLIDE 137 the app/assets/javascripts silo
slide-138
SLIDE 138
  • ne more thing…
(sidetrack)
slide-139
SLIDE 139 voltframework.com

Volt Framework

Volt is a framework for building data rich web applications shockingly fast.

Home Getting Started Docs API Blog Community #
slide-140
SLIDE 140

what is the way forward?

→

slide-141
SLIDE 141

(IMHO)

slide-142
SLIDE 142

split completely

!

tip 3: split
slide-143
SLIDE 143

I don’t like monoliths

slide-144
SLIDE 144

applications

2

slide-145
SLIDE 145

applications

2 =

slide-146
SLIDE 146

applications

2 = 1

API +

slide-147
SLIDE 147

applications

2

frontend

= 1

API +

1

slide-148
SLIDE 148

API

slide-149
SLIDE 149

API

Rails
slide-150
SLIDE 150

API

Rails Sinatra
slide-151
SLIDE 151

API

Rails Sinatra Lotus.rb
slide-152
SLIDE 152

frontend API

Rails Sinatra Lotus.rb
slide-153
SLIDE 153

frontend API

Rails Sinatra JS workflows Lotus.rb
slide-154
SLIDE 154

stick to client-server model

slide-155
SLIDE 155

JavaScript tooling

slide-156
SLIDE 156

isomorphism is possible

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
slide-157
SLIDE 157

surprisingly well testable (and fast)

slide-158
SLIDE 158

danke schön!

slide-159
SLIDE 159

Fragen?

slide-160
SLIDE 160 @myabc