Slide 1
Slide 1 text
Using Polymer,
Using Polymer,
today.
today.
Sam Beckham
@samdbeckham
Slide 2
Slide 2 text
http://nodividestudio.com
Slide 3
Slide 3 text
https://frontendne.co.uk
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
WTF is a
WTF is a
pattern
pattern
library?
library?
Slide 6
Slide 6 text
A coded
A coded
style guide
style guide
Slide 7
Slide 7 text
A collection
A collection
of code
of code
examples
examples
Slide 8
Slide 8 text
A bit like
A bit like
bootstrap
bootstrap
Slide 9
Slide 9 text
A separation
A separation
of concerns
of concerns
(Between the front and back end)
Slide 10
Slide 10 text
Pretty
Pretty
freaking
freaking
awesome
awesome
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Copy this
Copy this
- 1
- 2
- 3
- 4
- 5
Slide 15
Slide 15 text
Get this
Get this
Slide 16
Slide 16 text
What's the
What's the
beef then?
beef then?
Slide 17
Slide 17 text
Lots of
Lots of
copying and
copying and
pasting
pasting
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
-
Location
- Latitude
- Longitude
Slide 20
Slide 20 text
Code can be
Code can be
hard to
hard to
understand
understand
Slide 21
Slide 21 text
-
Location
- Latitude
- Longitude
Slide 22
Slide 22 text
They're
They're
difficult to
difficult to
maintain
maintain
Slide 23
Slide 23 text
No content
Slide 25
Slide 25 text
- 1
- 2
- 3
- 4
- 5
- 6
- 7
Slide 26
Slide 26 text
Markup
Markup
changes
changes
funk you up
funk you up
Slide 27
Slide 27 text
A separation
A separation
of concerns?
of concerns?
Slide 28
Slide 28 text
Not quite
Not quite
Slide 29
Slide 29 text
It's good…
It's good…
Slide 30
Slide 30 text
…but it's not right
…but it's not right
Slide 31
Slide 31 text
Enter,
Enter,
Polymer
Polymer
Slide 32
Slide 32 text
WTF is
WTF is
Polymer?
Polymer?
Slide 33
Slide 33 text
Web
Web
component
component
framework
framework
Slide 34
Slide 34 text
Web
Web
component
component
easierifier
easierifier
Slide 35
Slide 35 text
WTF are web
WTF are web
components?
components?
Slide 36
Slide 36 text
"Web Components are a set of standards
currently being produced by Google
engineers as a W3C specification that
allow for the creation of reusable widgets
or components in web documents and
web applications. The intention behind
them is to bring component-based
software engineering to the World Wide
Web. The components model allows for
encapsulation and interoperability of
individual HTML elements."
Slide 37
Slide 37 text
tl:dr;
tl:dr;
Slide 38
Slide 38 text
Create your
Create your
own HTML
own HTML
elements
elements
Slide 39
Slide 39 text
Contain
Contain
your styles
your styles
within them
within them
Slide 40
Slide 40 text
Add some
Add some
Javascript
Javascript
lovelyness
lovelyness
Slide 41
Slide 41 text
A separation
A separation
of concerns
of concerns
Slide 42
Slide 42 text
Pretty
Pretty
Freaking
Freaking
Awesome.
Awesome.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Let's mix
Let's mix
them
them
together
together
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Pagination
Pagination
Component
Component
Slide 48
Slide 48 text
Pagination
Pagination
Component
Component
Slide 49
Slide 49 text
How it's
How it's
made
made
Slide 50
Slide 50 text
Import Polymer
Import Polymer
Slide 51
Slide 51 text
Slide 52
Slide 52 text
Element Template
Element Template
Slide 53
Slide 53 text
Polymer({
is: 'my-pagination'
});
Scripts
Scripts
Slide 54
Slide 54 text
Polymer({
is: 'my-pagination',
properties: {
currentPage: {},
totalPages: {}
}
});
Element Attributes
Element Attributes
Slide 55
Slide 55 text
Template
Template
Slide 59
Slide 59 text
Import it
Import it
Slide 60
Slide 60 text
Use it
Use it
Slide 61
Slide 61 text
That's it
That's it
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
What does
What does
this solve?
this solve?
Slide 64
Slide 64 text
Lots of
Lots of
copying and
copying and
pasting
pasting
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
-
Location
- Latitude
- Longitude
Slide 67
Slide 67 text
Slide 68
Slide 68 text
Some
Some
copying and
copying and
pasting
pasting
Slide 69
Slide 69 text
Code can be
Code can be
hard to
hard to
understand
understand
Slide 70
Slide 70 text
-
Location
- Latitude
- Longitude
Slide 71
Slide 71 text
Slide 72
Slide 72 text
Code is
Code is
super easy to
super easy to
understand
understand
Slide 73
Slide 73 text
It's difficult
It's difficult
to maintain
to maintain
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Pagination
Pagination
Component
Component
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
Pagination
Pagination
Component
Component
Slide 78
Slide 78 text
It's easy to
It's easy to
maintain
maintain
Slide 79
Slide 79 text
A
A TRUE
TRUE
separation
separation
of concerns
of concerns
Slide 80
Slide 80 text
Pretty
Pretty
Freaking
Freaking
Awesome.
Awesome.
Slide 81
Slide 81 text
Can I use
Can I use
it now?
it now?
Slide 82
Slide 82 text
YES!
YES!
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
Harder
Harder
Slide 85
Slide 85 text
Harder
Harder
Better
Better
Slide 86
Slide 86 text
Harder
Harder
Better
Better
Faster
Faster
Slide 87
Slide 87 text
PRODUCTION
PRODUCTION
READY
READY
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
3
3o
oo
o
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Polymer Starter Kit
Polymer Starter Kit
Slide 92
Slide 92 text
Polymer Starter Kit
Polymer Starter Kit
Slide 93
Slide 93 text
http://polymer-project.org
Slide 94
Slide 94 text
http://webcomponents.org
Slide 95
Slide 95 text
http://reddit.com/r/polymerjs
Slide 96
Slide 96 text
Thanks!
Thanks!
Sam Beckham
@samdbeckham