YUI App Framework
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

YUI App Framework

on

  • 4,103 views

This talk was given at SwissJeese. Content:...

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.

Statistics

Views

Total Views
4,103
Views on SlideShare
4,064
Embed Views
39

Actions

Likes
4
Downloads
54
Comments
0

3 Embeds 39

https://twitter.com 22
http://sydlife.com 13
http://us-w1.rockmelt.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

YUI App Framework Presentation Transcript

  • 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
  • 7. Frameworkvs. Library
  • 8. 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“
  • 9. What is a library?● „A collection of routines that a program can use“● „Available for common use within a certain environment“
  • 10. 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
  • 11. 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
  • 12. MVC
  • 13. MVC● Separation of Concerns● YUI App Framework is „MVCish“
  • 14. Demo Project
  • 15. Model
  • 16. Model● Data● Attributes / Observation● Business logic● Data syncing ● load() / save() ● Custom sync layer
  • 17. Creating a Model Instance
  • 18. Model List● Collection of Model Instances● n:n● Assistant● Event Bubbling● Data Syncing
  • 19. Creating a Model List Instance
  • 20. View
  • 21. What is a View?
  • 22. View● Visible piece of application● Renderable ● Do it yourself ● Just provides container● Templating● Events● Models / Model Lists
  • 23. Controller
  • 24. Controller Router
  • 25. Router● Not only controlling● URL & Callback => View● Manages history ● HTML5 pushState / popState ● Graceful degradation
  • 26. Y.App
  • 27. Y.App● Puts it all together● Routes● Views as pages ● Relationships● Transitions● Pjax! ● pushState & Ajax
  • 28. Ups & Downs
  • 29. Up● Solid foundation● Quick start● Extendable● Standard stuff is done for you● GREAT documentation
  • 30. Down● Learning Curve (YUI3)● Defines Structure
  • 31. Outro
  • 32. Summary● Basic structure for frontend heavy web applications● MVCish● Configurable but reasonable defaults● Few lines of code
  • 33. Where to go from here...● http://github.com/elHornair/CheeseApp● http://yuilibrary.com/yui/docs/app● https://github.com/ericf/photosnear.me
  • 34. So Long, and Thanks for All the Cheese