Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Frontend Choices
Alex Coles
September 18, 2014
Technology
0
38
Frontend Choices
Alex Coles
September 18, 2014
Tweet
Share
More Decks by Alex Coles
See All by Alex Coles
How a language reflects its people (Brighton Ruby)
myabc
0
48
How a language reflects its people
myabc
0
67
Taking Rails beyond the asset pipeline (Workshop at RubyDay Italia)
myabc
0
31
Rails: beyond the asset pipeline (RubyC)
myabc
0
64
Frontend Choices (Tropical Ruby)
myabc
1
460
Frontend Choices (RubyConf Portugal)
myabc
1
250
Frontend Choices
myabc
0
190
Putting the Hype back in Hypermedia
myabc
1
200
DataMapper
myabc
2
190
Other Decks in Technology
See All in Technology
Who owns the Service Level?
chaspy
5
1.1k
Stripe Search APIを利用した、LINEとStripeの顧客情報連携/line-dc-202205
stripehideokamoto
0
130
THETA Xの登場はジオ業界を変えるか?
furuhashilab
0
170
0->1 フェーズで E2E 自動テストを導入した私たちの、これまでとこれから
yoyakoba
0
490
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
6
3.3k
AWS CLI入門_20220513
suzakiyoshito
0
3.9k
Oracle Database Technology Night #55 Oracle Autonomous Database 再入門
oracle4engineer
PRO
1
130
tfcon-2022-cpp
cpp
5
5.1k
OSINT/GEOINT ワークショップ 20220514 古橋資料
furuhashilab
2
310
New Features in C# 10/11
chack411
0
960
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
11
7k
toilを解消した話
asumaywy
0
210
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
229
9.3k
Unsuck your backbone
ammeep
659
55k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
The Brand Is Dead. Long Live the Brand.
mthomps
45
2.7k
Designing with Data
zakiwarfel
91
3.9k
A designer walks into a library…
pauljervisheath
196
16k
Fireside Chat
paigeccino
11
1.3k
GitHub's CSS Performance
jonrohan
1020
410k
Creatively Recalculating Your Daily Design Routine
revolveconf
206
10k
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
Producing Creativity
orderedlist
PRO
333
37k
Clear Off the Table
cherdarchuk
79
280k
Transcript
Frontend choices Alex Coles | Ruby & Rails Meetup, Дніпропетро́вськ
front end vs. frontend
Not really about choice
‘I’m a backend guy living in a frontend world’
About me
@myabc Alex Coles Berlin, Germany Finn GmbH
openproject.org
eurucamp.org
1..2..3
one one: background
Single Page Application Architecture
Single Page Application Architecture • Chunking • Controller • Templating
• Routing • Real-time Communicaton • Local storage min MAX
single page vs. traditional HTML
naturally content-dependent
What’s your content? Information Pages Membership sites Closed Systems
Content Criteria • Authentication • Caching • Indexing (SEO) •
Content TTL - relevance at a point in time
Curated content vs. dynamic • how many combinations of a
unique set of data: • a blog with comments • a hotel page with reviews • a dashboard
two two: where we are now
“The Rails Way”
History of the Rails Interface
“Rails is so 2005”
“Rails Way” back in 2005 • Server Generated HTML (ERB,
etc.) • Prototype • Scriptaculous • RJS
http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf RJS
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
“Rails Way” now • Server Generated HTML (ERB, Slim, HAML
etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)
Where we are now
JavaScript has grown up
No backend nobackend.org
Hoodie hood.ie
Meteor www.meteor.com
but I <3 Ruby
So here’s the question…
None
Room for Rails?
The Rails Way
– Marcin Stecki @madsheep at wroc_love.rb “Not his [DHH]'s responsibility
to tell us how to do these things.”
Frontend frameworks
Frontend (MV*) frameworks • AngularJS • Ember.js • KnockoutJS
Frontend (component) frameworks • ReactJS • Backbone.View (alone) • ExtJS
TodoMVC todomvc.com
None
None
None
What is most like Rails?
Ember.js is most like Rails • Everything should inherit from
Ember.Object (think ActiveRecord::Base.inherited) • Routing DSL • Vocabulary (templates, partials, etc.)
three three: practical usage
Using asset pipeline / sprockets
Use Bower
3 options for using Bower
gem install bower-rails Option 1
Rails 4 (Sprockets 2+) Option 2
config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components') Option 2
Option 3 rails-assets.org
ember-rails-api github.com/dockyard/ember-appkit-rails
the app/assets/javascripts silo
None
What is the way forward?
(IMHO)
Split Completely
I don’t like monoliths
Two applications: one API, one frontend
Rails or Sinatra for API A JS workflow for Frontend
Surprisingly testable (and fast)
One more thing…
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
Спасибо Спасибі
Questions?
@myabc