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.

1. Let me introduce you to the
YUI App
Framework
Alain Horner, 02. 06. 2012

2. 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

3. Intro

4. YUI3
● Fast
● Modular Architecture / Dependency Management
● Component Infrastructure
● Event System
● DOM Interaction, Ajax, Many Widgets
● Great Documentation

5. The YUI App Framework...
... is based on YUI3
... is Open Source
... is developed by Yahoo! and the YUI community
... is inspired by Backbone.js

6. 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

8. Framework
vs. Library

9. 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“

10. What is a library?
● „A collection of routines that a program can use“
● „Available for common use within a certain
environment“

11. 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

12. 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

13. MVC

14. MVC
● Separation of Concerns
● YUI App Framework is „MVC'ish“

15. Demo Project

17. Model

18. Model
● Data
● Attributes / Observation
● Business logic
● Data syncing
● load() / save()
● Custom sync layer

24. Creating a Model Instance

27. Model List
● Collection of Model Instances
● n:n
● Assistant
● Event Bubbling
● Data Syncing

40. Creating a Model List
Instance

44. View

45. What is a View?

51. View
● Visible piece of application
● Renderable
● Do it yourself
● Just provides container
● Templating
● Events
● Models / Model Lists

60. Controller

61. Controller
Router

62. Router
● Not only controlling
● URL & Callback => View
● Manages history
● HTML5 pushState / popState
● Graceful degradation

68. Y.App

69. Y.App
● Puts it all together
● Routes
● Views as pages
● Relationships
● Transitions
● Pjax!
● pushState & Ajax

83. Ups & Downs

84. Up
● Solid foundation
● Quick start
● Extendable
● Standard stuff is done for you
● GREAT documentation

85. Down
● Learning Curve (YUI3)
● Defines Structure

86. Outro

87. Summary
● Basic structure for frontend heavy web applications
● MVC'ish
● Configurable but reasonable defaults
● Few lines of code

88. Where to go from here...
● http://github.com/elHornair/CheeseApp
● http://yuilibrary.com/yui/docs/app
● https://github.com/ericf/photosnear.me

90. So Long, and Thanks for All
the Cheese