This document provides an agenda and overview of Meteor and Polymer. It begins with an introduction and agenda, then discusses what Meteor and Polymer are, how to get started with each, their core features and principles, how to create components, and ways the two can be integrated together in an application. It concludes with noting some integration concerns and providing additional resources.

1. Enrico Risa 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

9. App Structure
/client
/server
/public
/lib
/tests

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. Template
Spacebars (Handlebars inspired)

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

19. Built with Meteor

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

29. Using Elements
http://customelements.io
https://googlewebcomponents.github.io
http://component.kitchen
<lastfm-card user="maggiolo00">
</lastfm-card>

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}}

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. Live in Rome?
http://www.meetup.com/Meteor-Rome/

37. <thanks>
Questions?
</thanks>
Enrico Risa @wolf4ood