Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frontend Choices
Search
Alex Coles
March 16, 2014
Technology
0
230
Frontend Choices
Alex Coles
March 16, 2014
Tweet
Share
More Decks by Alex Coles
See All by Alex Coles
How a language reflects its people (Brighton Ruby)
myabc
0
88
How a language reflects its people
myabc
0
73
Taking Rails beyond the asset pipeline (Workshop at RubyDay Italia)
myabc
0
43
Rails: beyond the asset pipeline (RubyC)
myabc
0
110
Frontend Choices (Tropical Ruby)
myabc
1
700
Frontend Choices (RubyConf Portugal)
myabc
1
390
Frontend Choices
myabc
0
49
Putting the Hype back in Hypermedia
myabc
1
220
DataMapper
myabc
2
210
Other Decks in Technology
See All in Technology
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
180
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
6.3k
なんで、私がAWS Heroに!? 〜社外の広い世界に一歩踏み出そう〜
minorun365
PRO
6
1.1k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
480
Shift-from-React-to-Vue
calm1205
3
1.3k
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.5k
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GitHub's CSS Performance
jonrohan
1030
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
What's new in Ruby 2.0
geeforr
342
31k
Code Reviewing Like a Champion
maltzj
519
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Transcript
Frontend choices Alex Coles | wroc_love.rb, Wrocław, Polska
Anti-climax
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 openproject.org
1..2..3
eurucamp eurucamp.org Call for Papers open until 1st May
1..2..3
jeden one: background
Single page v traditional HTML
SPA depends on your content
no kupa, Sherlock
What’s your content? Information Pages Membership sites Closed Systems
Content Criteria • Authentication • Caching • Indexing (SEO) •
curated Content vs Dynamic
dwa two: where we are now
History of the Rails Interface
“Rails is so 2005”
“Rails Way” back in 2005 • Server Generated HTML (ERB,
etc.) • Prototype • Scriptaculous • RJS
“Rails Way” now • Server Generated HTML (ERB, Slim, HAML
etc.) • jQuery • jQuery UI • Server generated JavaScript Responses (SJR)
Where we are now
JavaScript is HUGE
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
KnockoutJS
AngularJS
Ember.js
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.)
trzy three: practical usage
Using asset pipeline / sprockets
Use Bower
gem install bower-rails
Rails 4 (Sprockets 2+)
config.assets.paths << File.join(Rails.root, 'vendor', 'assets', ‘components')
ember-rails-api github.com/dockyard/ember-appkit-rails
None
What is the way forward?
Split Completely
Two applications: one API, one frontend
Rails or Sinatra for API A JS workflow for Frontend
Surprisingly testable (and fast)
Dzięki!
Questions?
@myabc