Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (11)
Semelhante a Meteor + Polymer Demo at Codemotion
Semelhante a Meteor + Polymer Demo at Codemotion (20)
Último
Último (20)
Meteor + Polymer Demo at Codemotion
- 2. Agenda 1. Meteor 2. Polymer 3. Meteor + Polymer ( Demo )
- 3. Who am i? Lead Enterprise Engineer at Orient Technologies LTD Hacking the web since 2005
- 4. Who are you?
- 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. 7 Principles One Language Data on the Wire Database Everywhere Latency Compensation Full-Stack Reactivity Embrace the Ecosystem Simplicity = Productivity
- 7. Quick Start! $ curl https://install.meteor.com/ | sh
- 8. Quick Start! $ meteor create myapp $ cd myapp $ meteor $ meteor deploy myapp.meteor.com
- 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
- 12. Template Helpers Helpers are simply Javascript methods that you make available to template
- 13. Template Events Register events to elements in a particular template
- 14. Meteor Collections Simple to define Todos = new Mongo.Collection(‘todos’); Collections.[insert | update | remove] available client/ server side.
- 15. Meteor Subscriptions Remove “autopublish” & “insecure” Server Side Client Side Meteor.subscribe('todos')
- 16. Meteor Methods Server Side Client Side Client/Server Communication
- 17. Packages Routing (Iron Route) UI (Bootstrap3/Foundation) Mail Accounts Security …. https://atmospherejs.com meteor add package
- 18. Iron Route Client and Server side router MVC Controllers Data Subscriptions http://manuel-schoebel.com/blog/iron-router-tutorial
- 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. 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. Web Components Custom Elements Shadow DOM Templates HTML imports W3C Standard http://www.w3.org/TR/components-intro
- 23. Custom Elements create new HTML/DOM elements declarative HTML
- 24. Shadow DOM DOM/CSS/JS Encapsulation Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression
- 25. Templates Native templating in the browser Polymer implements data-binding
- 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. How do I use Polymer? Using Elements - Polymer Elements (Core/Paper) - Community Elements Creating Elements
- 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
- 30. Create your own elements
- 31. Vulcanize Process Web Components in a single file Map your components in “imports.html” to <head></head> Useful in production
- 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. 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. {{< demo}}