Evolution of the frontend-stack
Kenneth Auchenberg
@auchenberg
LBI, May 2012
Hi there
Basement
Once upon a time...
1 developer for the first 18 months.
Traditional web site
PHP & MySQL
Large stylesheets
Lots of scripts/jquery plugins
The API
Three months after...
Go!
24 hours of migration
1000+ up/downgrade scripts.
Yup, still up.
Project ZEUS
Big one
The mission
-
Faster user experience
- Decreased loading times
- Better preceived performance
-
More structure
- Faster development
- A truly Component-based architecture
- Reuse of components
- Separation of concerns
-
Less errors & regression
- Decouple from the DOM
- Scoped events and robust routing
- Unit and integration tests
Airborne stunt
We needed to do this in parallel
SWNS, DailyMail
Ruby on Rails
ActivePodio
ORM
class Podio::Comment < ActivePodio::Base
property :comment_id, :integer
has_one :created_by, :class => 'ByLine'
has_many :files, :class => 'FileAttachment'
class << self
def create(commentable_type, commentable_id, attributes)
response = Podio.connection.post do |req|
req.url "/comment/#{commentable_type}/#{commentable_id}"
req.body = attributes
end
response.body['comment_id']
end
...
Open sourced
http://github.com/podio
SASS
.podio-autocompleter {
ul {
@include border-bottom-radius(5px);
@include box-shadow-default();
border: 1px solid $color-form-input-active;
> li {
@include font-mini;
cursor: pointer;
color: $color-text-light-grey;
background-color: $color-bg-light-grey;
height: 28px;
&.active, &:hover {
@include gradient(top, $color-bg-light-grey, $color-white);
}
}
}
}
OOCSS
by Nicole Sullivan
http://www.kotancode.com/2010/08/05/mef-and-the-zen-of-lego/
Server-side templating
Browsers are clients, too...
x 1.000.000's of them
Let's use them for something!
Client-side templating
Welcome
Backbone flow
Our flow
Backbone extensions
- Controllers
- Non-RESTful models
- Template helpers (render, link_to, img, button)
- Property formatters (timestamps, numbers)
- Rights management
- Nested models / relationships
- Routing (pushState and fragments)
- Data caching
- DOM Event delegation
(function (window, $, _, Podio, undefined) {
Podio.Views.ActionBar = Backbone.PodioView.extend({
initialize: function(options) {
_.bindAll(this, 'onActionNextClicked', 'onActionPreviousClicked', 'onShortcutLikePressed', 'onShortcutNextPressed', 'onShortcutPreviousPressed');
this.podioDelegateEvents();
this.eventBus = this.options.eventBus;
},
podioEvents: {
'click .action-bar .follow' : 'onActionFollowClicked',
'click .action-bar .like' : 'onActionLikeClicked',
'click .action-bar .next' : 'onActionNextClicked',
'click .action-bar .previous' : 'onActionPreviousClicked'
},
shortcuts: {
'l' : 'onShortcutLikePressed',
'left' : 'onShortcutPreviousPressed',
'right' : 'onShortcutNextPressed'
},
onActionPreviousClicked: function(elmTarget, e) {
this.trigger('actionBar:previousItemClicked', this.model );
}
...
}
FileFinder
Layouts
Slidey-out panel
Going forward
- Focus on speed
- More on the client
- JavaScript dependencies / Optimize images
- Less overhead
- Auto spriting
- Minimize API call overhead (rails)
- Better experience
- More responsive / More devices
- Accessbility
- Faster updates
- Continuous deployment
- Better testing (acceptance testing)
Having fun
Thanks
