Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Meteor + Polymer

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Meteor + Polymer

  1. 1. Enrico Risa Codemotion
  2. 2. Agenda 1. Meteor 2. Polymer 3. Meteor + Polymer ( Demo )
  3. 3. Who am i? Lead Enterprise Engineer at Orient Technologies LTD Hacking the web since 2005
  4. 4. Who are you?
  5. 5. What is Meteor? Meteor is a complete open source platform for building web and mobile apps in pure JavaScript • Javascript
 Isomorphic - Client, Server, Database • Reactive
 Blaze, Database everywhere • Web, Mobile • Packages
  6. 6. 7 Principles One Language Data on the Wire Database Everywhere Latency Compensation Full-Stack Reactivity Embrace the Ecosystem Simplicity = Productivity
  7. 7. Quick Start! $ curl https://install.meteor.com/ | sh
  8. 8. Quick Start! $ meteor create myapp $ cd myapp $ meteor $ meteor deploy myapp.meteor.com
  9. 9. App Structure /client /server /public /lib /tests
  10. 10. Components LiveQuery - Live Database Connectors
 - Realtime database queries. DDP - Distributed Data Protocol
 -Subscribe to changes in the database. Mini Databases - Database in memory Javascript (MiniMongo)
 - Run database queries in the client Tracker - Reactive Programming
 -Rerun functions when data changes Blaze
 -Keep the view up-to-date with your data Session
 -A library to handle reactive UI state variables
  11. 11. Template Spacebars (Handlebars inspired)
  12. 12. Template Helpers Helpers are simply Javascript methods that you make available to template
  13. 13. Template Events Register events to elements in a particular template
  14. 14. Meteor Collections Simple to define
 Todos = new Mongo.Collection(‘todos’); Collections.[insert | update | remove] available client/ server side.
  15. 15. Meteor Subscriptions Remove “autopublish” & “insecure” Server Side Client Side Meteor.subscribe('todos')
  16. 16. Meteor Methods Server Side Client Side Client/Server Communication
  17. 17. Packages Routing (Iron Route) UI (Bootstrap3/Foundation) Mail Accounts Security …. https://atmospherejs.com meteor add package
  18. 18. Iron Route Client and Server side router MVC Controllers Data Subscriptions http://manuel-schoebel.com/blog/iron-router-tutorial
  19. 19. Built with Meteor
  20. 20. Meteor Numbers Over 200 meetup groups around the world
 http://meteor.meetup.com Over 4500 packages published
 https://atmospherejs.com Ranked #11 on GitHub Raised $11m in 2012
  21. 21. What is Polymer? A library built on top of Web Components and enable developers to create reusable elements for the web Let us use Web Components today in modern browser Composed By
 - A set of polyfills
 - Web application framework
 - Set of UI components (Material Design)
  22. 22. Web Components Custom Elements Shadow DOM Templates HTML imports W3C Standard http://www.w3.org/TR/components-intro
  23. 23. Custom Elements create new HTML/DOM elements declarative HTML
  24. 24. Shadow DOM DOM/CSS/JS Encapsulation Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression
  25. 25. Templates Native templating in the browser Polymer implements data-binding
  26. 26. HTML imports Loading and dependency management Find existing elements Import and just use it <link rel="import" href="/bower_components/paper-input/paper-input.html">
  27. 27. How do I use Polymer? Using Elements
 - Polymer Elements (Core/Paper)
 - Community Elements Creating Elements
  28. 28. Core/Paper Elements Polymer's core elements are a set of visual and non- visual utility elements.
 Polymer's paper elements collection implements material design for the web. polymer-project.org/0.5/docs/elements
  29. 29. Using Elements http://customelements.io https://googlewebcomponents.github.io http://component.kitchen <lastfm-card user="maggiolo00">
 </lastfm-card>
  30. 30. Create your own elements
  31. 31. Vulcanize Process Web Components in a single file Map your components in “imports.html” to 
 <head></head> Useful in production
  32. 32. Meteor + Polymer = <3 Great Result Easy to use Both within an app Polymer elements emit events like normal DOM elements Polymer for Web Components and Material Design Meteor for data synch, realtime and rendering Example app
 - polymer-demo
 - usercycle
  33. 33. Integration Concern Still experimental Lack of resources Polymer bleeding edge < 1.0 Web Components not fully supported
 ( are-we-componentized-yet ) Native support (Chrome only)
  34. 34. {{< demo}}
  35. 35. Resources http://blog.differential.com/meteor-polymer http://grigio.org/ polymer_and_meteorjs_holy_grail_web_development http://blog.usercycle.com/why-meteor-and-polymer/
  36. 36. Live in Rome? http://www.meetup.com/Meteor-Rome/
  37. 37. <thanks> Questions? </thanks> Enrico Risa @wolf4ood

×