Frontend Choices - Speaker Deck

Slide 1

Slide 1 text

Frontend choices Alex Coles | Ruby & Rails Meetup, Дніпропетро́вськ

Slide 2

Slide 2 text

front end vs. frontend

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

About me

Slide 6

Slide 6 text

@myabc Alex Coles Berlin, Germany Finn GmbH

Slide 7

Slide 7 text

openproject.org

Slide 8

Slide 8 text

eurucamp.org

Slide 9

Slide 9 text

1..2..3

Slide 10

Slide 10 text

one one: background

Slide 11

Slide 11 text

Single Page Application Architecture

Slide 12

Slide 12 text

Single Page Application Architecture • Chunking • Controller • Templating • Routing • Real-time Communicaton • Local storage min MAX

Slide 13

Slide 13 text

single page vs. traditional HTML

Slide 14

Slide 14 text

naturally content-dependent

Slide 15

Slide 15 text

What’s your content? Information Pages Membership sites Closed Systems

Slide 16

Slide 16 text

Content Criteria • Authentication • Caching • Indexing (SEO) • Content TTL - relevance at a point in time

Slide 17

Slide 17 text

Curated content vs. dynamic • how many combinations of a unique set of data: • a blog with comments • a hotel page with reviews • a dashboard

Slide 18

Slide 18 text

two two: where we are now

Slide 19

Slide 19 text

“The Rails Way”

Slide 20

Slide 20 text

History of the Rails Interface

Slide 21

Slide 21 text

“Rails is so 2005”

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 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 25

Slide 25 text

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

Slide 26

Slide 26 text

Where we are now

Slide 27

Slide 27 text

JavaScript has grown up

Slide 28

Slide 28 text

No backend nobackend.org

Slide 29

Slide 29 text

Hoodie hood.ie

Slide 30

Slide 30 text

Meteor www.meteor.com

Slide 31

Slide 31 text

but I <3 Ruby

Slide 32

Slide 32 text

So here’s the question…

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Room for Rails?

Slide 35

Slide 35 text

The Rails Way

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Frontend frameworks

Slide 38

Slide 38 text

Frontend (MV*) frameworks • AngularJS • Ember.js • KnockoutJS

Slide 39

Slide 39 text

Frontend (component) frameworks • ReactJS • Backbone.View (alone) • ExtJS

Slide 40

Slide 40 text

TodoMVC todomvc.com

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

What is most like Rails?

Slide 45

Slide 45 text

Ember.js is most like Rails • Everything should inherit from Ember.Object  (think ActiveRecord::Base.inherited) • Routing DSL • Vocabulary (templates, partials, etc.)

Slide 46

Slide 46 text

three three: practical usage

Slide 47

Slide 47 text

Using asset pipeline / sprockets

Slide 48

Slide 48 text

Use Bower

Slide 49

Slide 49 text

3 options for using Bower

Slide 50

Slide 50 text

gem install bower-rails Option 1

Slide 51

Slide 51 text

Rails 4 (Sprockets 2+) Option 2

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Option 3 rails-assets.org

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

the app/assets/javascripts silo

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

What is the way forward?

Slide 58

Slide 58 text

(IMHO)

Slide 59

Slide 59 text

Split Completely

Slide 60

Slide 60 text

I don’t like monoliths

Slide 61

Slide 61 text

Two applications: one API, one frontend

Slide 62

Slide 62 text

Rails or Sinatra for API  A JS workflow for Frontend

Slide 63

Slide 63 text

Surprisingly testable (and fast)

Slide 64

Slide 64 text

One more thing…

Slide 65

Slide 65 text

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