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
240
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
90
How a language reflects its people
myabc
0
74
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
720
Frontend Choices (RubyConf Portugal)
myabc
1
400
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
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
540
メンタル面でもつよつよエンジニアになる/登壇資料(井田 献一朗)
hacobu
0
100
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.4k
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
110
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
130
20241220_S3 tablesの使い方を検証してみた
handy
4
680
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.6k
なぜCodeceptJSを選んだか
goataka
0
170
UI State設計とテスト方針
rmakiyama
3
780
Microsoft Azure全冠になってみた ~アレを使い倒した者が試験を制す!?~/Obtained all Microsoft Azure certifications Those who use "that" to the full will win the exam! ?
yuj1osm
2
120
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
多様なメトリックとシステムの健全性維持
masaaki_k
0
110
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Rails Girls Zürich Keynote
gr2m
94
13k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Site-Speed That Sticks
csswizardry
2
190
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
100
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