YUI App Framework


Published on

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.

Published in: Education, Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

YUI App Framework

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

    Clipping is a handy way to collect important slides you want to go back to later.