Embed Size (px)
DESCRIPTION
This talk was given at SwissJeese. Content:Front-end heavy applications grow more and more complex. As frontend developers we need strategies to overcome those complexities.In this talk we'll see, how the YUI3 App Framework assists us in doing so: It helps us writing structured and thus maintainable code. Of course we will also have a look at the drawbacks of the framework and when you should not use it.
Citation preview
Let me introduce you to the
YUI App Framework
Alain Horner, 02. 06. 2012
A few words about myself...
● Alain Horner● Alain, web developer at Liip● Alain, student at ZHAW● Alain, who?
● Github: https://github.com/elHornair● Twitter: https://twitter.com/#!/elHornair
Intro
YUI3
● Fast● Modular Architecture / Dependency Management● Component Infrastructure● Event System● DOM Interaction, Ajax, Many Widgets● Great Documentation
The YUI App Framework...
... is based on YUI3
... is Open Source
... is developed by Yahoo! and the YUI community
... is inspired by Backbone.js
The YUI App Framework...
... is based on YUI3
... is Open Source
... is developed by Yahoo! and the YUI community
... is inspired by Backbone.js
... is a framework
Frameworkvs. Library
What is a framework?
● „A basic conceptional structure“● „Used to implement the standard structure of an
application for a specific environment“● „A structural plan or basis of a project“
What is a library?
● „A collection of routines that a program can use“● „Available for common use within a certain
environment“
Definition by Alain who?
● A library does stuff for you● Stuff: Select a DOM node
● A framework tells you how to do stuff● Stuff: Build a web application
The YUI App Framework...
... is open sourced
... is developed by Yahoo! and the YUI community
... is based on YUI3
... is inspired by Backbone.js
... is a framework
... gives you a basic structure for frontend heavy web applications
MVC
MVC
● Separation of Concerns● YUI App Framework is „MVC'ish“
Demo Project
Model
Model
● Data● Attributes / Observation● Business logic● Data syncing
● load() / save()● Custom sync layer
Creating a Model Instance
Model List
● Collection of Model Instances● n:n● Assistant● Event Bubbling● Data Syncing
Creating a Model List Instance
View
What is a View?
View
● Visible piece of application● Renderable
● Do it yourself● Just provides container
● Templating● Events● Models / Model Lists
Controller
Controller
Router
Router
● Not only controlling● URL & Callback => View● Manages history
● HTML5 pushState / popState● Graceful degradation
Y.App
Y.App
● Puts it all together● Routes● Views as pages
● Relationships● Transitions● Pjax!
● pushState & Ajax
Ups & Downs
Up
● Solid foundation● Quick start● Extendable● Standard stuff is done for you● GREAT documentation
Down
● Learning Curve (YUI3)● Defines Structure
Outro
Summary
● Basic structure for frontend heavy web applications● MVC'ish● Configurable but reasonable defaults● Few lines of code
Where to go from here...
● http://github.com/elHornair/CheeseApp● http://yuilibrary.com/yui/docs/app● https://github.com/ericf/photosnear.me
So Long, and Thanks for All the Cheese
