Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (14)
Ähnlich wie Open Hack Taiwan 2012 - Mojito intro
Ähnlich wie Open Hack Taiwan 2012 - Mojito intro (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Open Hack Taiwan 2012 - Mojito intro
- 2. MOJITO Sriram Iyer Yahoo! Developer Network
- 3. WHAT IS MOJITO? MVC based framework for building rich web applications Built on Javascript Open Source 3
- 4. WE ALREADY HAVE A LOT OF MVC 4
- 5. THINK ABOUT THESE CASES 5
- 6. I WANT TO MAKE A WEB APPLICATION 6
- 7. CLIENT CAN HAVE CAPABLE BROWSER 7
- 8. CLIENT MIGHT BE FEATURE PHONE 8
- 9. RUN YOUR CODE ON SERVER SIDE
- 10. EASY TO TRANSFER FEATURE FROM ONE SIDE TO ANOTHER Ajax fallback Security risk Performance Latency 10
- 11. BACKEND AND FRONTEND DEVS CAN HELP EACH OTHER What is he talking about?!! Frontend Mi… Mmm… Backend
- 12. TRADITIONAL WAY
- 14. ONE LANGUAGE Mojito is written entirely in JavaScript.
- 15. TWO RUNTIMES Your application code can be configured to run on the server or be deployed to the client.
- 16. Similar user experience on different devices
- 17. Similar user experience on different devices
- 18. Similar user experience on different devices
- 19. Similar user experience on different devices
- 22. MOJITS The basic unit of composition and reuse in a Mojito application is a mojit. Visually, you can think of a mojit as the rectangular area of a page that was constructed by a Mojito application.
- 23. WHAT A MOJIT LOOKS LIKE
- 24. MODEL Models are intended to closely represent business logic entities and contain code that accesses and persists data.
- 25. CONTROLLER Controllers are the command centers for mojits. They can either do all of the work or delegate the work to models and/ or views.
- 26. VIEW View files are called view templates in Mojito. View templates can contain both HTML and templating tags/ expressions, such as Mustache or Handlebars, and are rendered into markup that is outputted to the client.
- 27. WAIT! WHAT ABOUT DOM
- 28. BINDER Allows event handlers to be attached to the mojit DOM node communicate with other mojits on the page and executes actions on the mojit that the binder is attached to
- 29. A REAL TUTORIAL
- 30. INSTALL Pre-request Node.js npm npm install mojito -g
- 31. CREATE A MOJITO APPLICATION
- 32. CREATE A MOJIT
- 33. DATA IN MODEL
- 34. CONTROLLER
- 35. VIEW
- 37. LET’S START IT!
- 38. RESULT
- 39. ARCHITECTURE
- 40. ARCHITECTURE
- 41. WHAT WE MISSED TODAY • Framework Mojits • Client side running context • Using Multiple Mojits • Detailed configuration • Extending Mojito
- 42. MORE ABOUT MOJITO • http://developer.yahoo.com/cocktails/mojito/ • https://github.com/yahoo/mojito/ • http://developer.yahoo.com/forum/Yahoo-Mojito/
- 43. QUESTIONS?
- 44. PUTTING IT ALL TOGETHER Previous talks YQL YUI Mojito You can use all the above Yahoo! technologies to build a full fledged web application. 41
- 45. YQL - GATHER DATA 42
- 46. YUI - PRESENT DATA 43
- 47. MOJITO - BUILD AN APP Mojito is based on YUI & NodeJS YUI has native YQL support Query data using YQL Add this to the model within your Mojit •Display the data using the Mojit view http://developer.yahoo.com/cocktails/mojito/docs/code_exs/calling_yql.html 44
Hinweis der Redaktion
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n----- Meeting Notes (10/10/12 18:28) -----\ntable sorting\n----- Meeting Notes (10/11/12 18:06) -----\nmove client to this ppt\n
- \n
- \n
- \n
- \n
- \n
- \n
- Mojito can identify the calling device by examining the HTTP header User-Agent. You create custom views for different devices, and Mojito will render and serve the correct device-specific views.\n
- Mojito can identify the calling device by examining the HTTP header User-Agent. You create custom views for different devices, and Mojito will render and serve the correct device-specific views.\n
- Mojito can identify the calling device by examining the HTTP header User-Agent. You create custom views for different devices, and Mojito will render and serve the correct device-specific views.\n
- \n----- Meeting Notes (10/12/12 17:23) -----\nuse nodejs as web server\n
- \n
- \n
- Client requests for data are sent to the controller, which in turn fetches data from the model, renders views and passes the data to the client\n
- \n
- \n
- \n----- Meeting Notes (10/10/12 18:28) -----\nask if they know what is an template engine\n
- \n----- Meeting Notes (10/12/12 17:23) -----\nintroduce dom , different from view\n
- \n----- Meeting Notes (10/11/12 18:06) -----\nadd a dot before each item\n
- \n
- mojito is a module of nodejs\n----- Meeting Notes (10/12/12 17:23) -----\ncommand different from pre-request\n
- \n----- Meeting Notes (10/11/12 18:06) -----\nchange make to create\n
- \n----- Meeting Notes (10/10/12 18:28) -----\nhow to config to client and server run time\n
- \n
- \n
- \n
- In spec you can put the mojit name which you want to use inside.\n
- \n
- \n----- Meeting Notes (10/12/12 17:23) -----\nhello mojito\n
- \n----- Meeting Notes (10/12/12 17:37) -----\nput it early\n
- Add a real case run js in both side, Add which production is using mojito\n
- Mojito comes with the built-in utility mojits that make developing applications easier.\n
- \n
- \n----- Meeting Notes (10/10/12 18:28) -----\nintroduce if client side support js, we can run in client side ,if client side not support js, we will run the code in server\n
- \n
- \n
- \n
- \n