SlideShare una empresa de Scribd logo
1 de 90
Descargar para leer sin conexión
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
Framework
vs. 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

Más contenido relacionado

Destacado (7)

Android Training (Sensors)
Android Training (Sensors)Android Training (Sensors)
Android Training (Sensors)
 
Hand gesture recognition
Hand gesture recognitionHand gesture recognition
Hand gesture recognition
 
GESTURE RECOGNITION TECHNOLOGY
GESTURE RECOGNITION TECHNOLOGYGESTURE RECOGNITION TECHNOLOGY
GESTURE RECOGNITION TECHNOLOGY
 
Hand Gesture Recognition
Hand Gesture RecognitionHand Gesture Recognition
Hand Gesture Recognition
 
Gesture Recognition
Gesture RecognitionGesture Recognition
Gesture Recognition
 
Gesture Recognition Technology-Seminar PPT
Gesture Recognition Technology-Seminar PPTGesture Recognition Technology-Seminar PPT
Gesture Recognition Technology-Seminar PPT
 
Gesture recognition
Gesture recognitionGesture recognition
Gesture recognition
 

Similar a YUI App Framework

State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Android Frameworks: Highlighting the Need for a Solid Development Framework 
Android Frameworks: Highlighting the Need for a Solid Development Framework Android Frameworks: Highlighting the Need for a Solid Development Framework 
Android Frameworks: Highlighting the Need for a Solid Development Framework 
Mutual Mobile
 

Similar a YUI App Framework (20)

JIO and WebViewers: interoperability for Javascript and Web Applications
JIO and WebViewers: interoperability  for Javascript and Web ApplicationsJIO and WebViewers: interoperability  for Javascript and Web Applications
JIO and WebViewers: interoperability for Javascript and Web Applications
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
 
Introduction to Django
Introduction to DjangoIntroduction to Django
Introduction to Django
 
Django PPT.pptx
Django PPT.pptxDjango PPT.pptx
Django PPT.pptx
 
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integra...
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integra...UXDev Summit Keynote : A real world story of Angular and Apache Unomi integra...
UXDev Summit Keynote : A real world story of Angular and Apache Unomi integra...
 
Django interview Questions| Edureka
Django interview  Questions| EdurekaDjango interview  Questions| Edureka
Django interview Questions| Edureka
 
JavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) uploadJavaScript for ASP.NET programmers (webcast) upload
JavaScript for ASP.NET programmers (webcast) upload
 
ITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJSITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJS
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
 
Keep calm and write reusable code in Android
Keep calm and write reusable code in AndroidKeep calm and write reusable code in Android
Keep calm and write reusable code in Android
 
10 ways to improve your Android app performance
10 ways to improve your Android app performance10 ways to improve your Android app performance
10 ways to improve your Android app performance
 
CollegeDiveIn presentation
CollegeDiveIn presentationCollegeDiveIn presentation
CollegeDiveIn presentation
 
"The working architecture of NodeJs applications" Viktor Turskyi
"The working architecture of NodeJs applications" Viktor Turskyi"The working architecture of NodeJs applications" Viktor Turskyi
"The working architecture of NodeJs applications" Viktor Turskyi
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
 
Make web as webapp
Make web as webappMake web as webapp
Make web as webapp
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
Android Frameworks: Highlighting the Need for a Solid Development Framework 
Android Frameworks: Highlighting the Need for a Solid Development Framework Android Frameworks: Highlighting the Need for a Solid Development Framework 
Android Frameworks: Highlighting the Need for a Solid Development Framework 
 
Quick prototyping apps using JS - Ciklum, Vinnitsa
Quick prototyping apps using JS - Ciklum, VinnitsaQuick prototyping apps using JS - Ciklum, Vinnitsa
Quick prototyping apps using JS - Ciklum, Vinnitsa
 
Polymer 101
Polymer 101Polymer 101
Polymer 101
 

Último

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Último (20)

FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
80 ĐỀ THI THỬ TUYỂN SINH TIẾNG ANH VÀO 10 SỞ GD – ĐT THÀNH PHỐ HỒ CHÍ MINH NĂ...
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 

YUI App Framework

  • 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
  • 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.
  • 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“
  • 16.
  • 17. Model
  • 18. Model ● Data ● Attributes / Observation ● Business logic ● Data syncing ● load() / save() ● Custom sync layer
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. Creating a Model Instance
  • 25.
  • 26.
  • 27. Model List ● Collection of Model Instances ● n:n ● Assistant ● Event Bubbling ● Data Syncing
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40. Creating a Model List Instance
  • 41.
  • 42.
  • 43.
  • 44. View
  • 45. What is a View?
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51. View ● Visible piece of application ● Renderable ● Do it yourself ● Just provides container ● Templating ● Events ● Models / Model Lists
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 62. Router ● Not only controlling ● URL & Callback => View ● Manages history ● HTML5 pushState / popState ● Graceful degradation
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68. Y.App
  • 69. Y.App ● Puts it all together ● Routes ● Views as pages ● Relationships ● Transitions ● Pjax! ● pushState & Ajax
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 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
  • 89.
  • 90. So Long, and Thanks for All the Cheese