End to End with Polymer

Video: https://www.youtube.com/watch?v=1f_Tj_JnStA

Developers are really excited by Polymer and Web Components, but they're not always sure how to connect the dots to get a full blown, production-ready app. Where should you store your data? How do you handle user authentication? What are the patterns that make up a good Polymer app? In this session I'll answer these questions, and guide you through the process of building an awesome webapp using Polymer Starter Kit and Firebase.

Transcript

1. View Slide

2. oh hai!
   @rob_dodson
   +RobDodson
   uber nerd
   

   View Slide

3. end to end
   with
   Polymer
   

   View Slide

4. polymer-todo.firebaseapp.com
   

   View Slide

5. #wisdom
   Solutions to
   Problems
   

   View Slide

6. Problem
   #1
   

   View Slide

7. ( The Blank Page )
   

   View Slide

8. Web Development is
   complicated
   

   View Slide

9. Homescreen icons
   Responsive design
   Optimizing images
   Offline caching
   Concat &
   App manifest
   Grunt? Gulp?
   

   View Slide

10. Polymer Starter Kit
    

    View Slide

11. Responsive app layout & routing
    Components for nearly any app, out of the box.
    Unit test support with Web Component Tester
    Complete build chain for bringing your app to production.
    

    View Slide

12. DOWNLOAD
    developers.google.com/web/tools/polymer-starter-kit
    

    View Slide

13. View Slide

14. But RoB,
    I’m super lazy
    

    View Slide

15. npm install generator-polymer -g
    oh snap!
    

    View Slide

16. View Slide

17. Problem
    #1
    

    View Slide

18. Problem
    #2
    

    View Slide

19. the app
    Breaking up
    

    View Slide

20. build your app
    out of small
    components
    

    View Slide

21. View Slide

22. 
    

    View Slide

23. 
    

    View Slide

24. 
    

    View Slide

25. 
    

    View Slide

26. 
    
    

    View Slide

27. 
    
    

    View Slide

28. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true,<br/>value: function() {<br/>return [<br/>{<br/>label: 'My first todo!',<br/>isComplete: false<br/>},<br/>…<br/>];<br/>}<br/>}<br/>}<br/>});<br/>
    
    

    View Slide

29. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true,<br/>value: function() {<br/>return [<br/>{<br/>label: 'My first todo!',<br/>isComplete: false<br/>},<br/>…<br/>];<br/>}<br/>}<br/>}<br/>});<br/>
    
    Todos are
    objects in
    an array
    

    View Slide

30. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true,<br/>value: function() {<br/>return [<br/>{<br/>label: 'My first todo!',<br/>isComplete: false<br/>},<br/>…<br/>];<br/>}<br/>}<br/>}<br/>});<br/>
    
    Todos are
    bindable
    

    View Slide

31. an element for data?
    that’s CRAZY TALK!
    

    View Slide

32. 
    data provider
    

    View Slide

33. 
    data provider + bindings =
    sweet!
    

    View Slide

34. index.html
    
    
    
    
    

    View Slide

35. index.html
    
    
    
    
    
    

    View Slide

36. index.html
    
    
    
    
    
    
    

    View Slide

37. 
    
    

    View Slide

38. todo-view.html
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-view',<br/>properties: {<br/>todos: Array<br/>}<br/>});<br/>
    
    

    View Slide

39. todo-view.html
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-view',<br/>properties: {<br/>todos: Array<br/>}<br/>});<br/>
    
    Bind data to reduce
    boilerplate
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. communicate
    Need to
    

    View Slide

45. todo-view.html
    
    
    
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-view',<br/>properties: {<br/>todos: Array<br/>},<br/>clearTodos: function() { … },<br/>deleteTodo: function() { … },<br/>addTodo: function() { … }<br/>});<br/>
    
    

    View Slide

46. todo-view.html
    
    
    
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-view',<br/>properties: {<br/>todos: Array<br/>},<br/>clearTodos: function() { … },<br/>deleteTodo: function() { … },<br/>addTodo: function() { … }<br/>});<br/>
    
    Mediate events
    

    View Slide

47. todo-view.html
    addTodo: function(e) {
    this.push('todos', {
    label: e.detail.value,
    isComplete: false
    });
    }
    

    View Slide

48. Kinda like a
    traffic cop
    

    View Slide

49. 
    
    

    View Slide

50. 
    
    

    View Slide

51. You could
    type this
    yourself
    

    View Slide

52. AWESOME
    Or you could be
    

    View Slide

53. yo polymer:element
    

    View Slide

54. yo polymer:element
    

    View Slide

55. View Slide

56. todo-list.html
    
    
    items="{{todos}}"
    as="todo">
    
    
    
    <br/>Polymer({<br/>is: 'todo-list',<br/>properties: {<br/>todos: Array<br/>}<br/>});<br/>
    
    

    View Slide

57. todo-list.html
    
    
    items="{{todos}}"
    as="todo">
    
    
    
    <br/>Polymer({<br/>is: 'todo-list',<br/>properties: {<br/>todos: Array<br/>}<br/>});<br/>
    
    Iterate over data
    with dom-repeat
    

    View Slide

58. 
    
    

    View Slide

59. todo-item.html
    
    
    
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-item',<br/>properties: {<br/>todo: Object<br/>},<br/>_onDelete: function() {<br/>this.fire(‘delete-todo’, {todo: this.todo});<br/>}<br/>});<br/>
    
    

    View Slide

60. todo-item.html
    
    
    
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-item',<br/>properties: {<br/>todo: Object<br/>},<br/>_onDelete: function() {<br/>this.fire(‘delete-todo’, {todo: this.todo});<br/>}<br/>});<br/>
    
    Bind data to reduce
    boilerplate
    

    View Slide

61. todo-item.html
    
    
    
    
    
    
    
    <br/>Polymer({<br/>is: 'todo-item',<br/>properties: {<br/>todo: Object<br/>},<br/>_onDelete: function() {<br/>this.fire(‘delete-todo’, {todo: this.todo});<br/>}<br/>});<br/>
    
    Mediate events
    

    View Slide

62. View Slide

63. Problem
    #2
    

    View Slide

64. View Slide

65. Problem
    #3
    

    View Slide

66. production
    Getting to
    

    View Slide

67. View Slide

68. REALTIME DATABASE AUTHENTICATION HOSTING
    

    View Slide

69. REALTIME DATABASE
    

    View Slide

70. // Write some data
    ref.set({ name: ‘Rob Dodson’ });
    // Push Array-like data
    ref.push({ isComplete: false, label: ‘A new todo!’ });
    // Create a connection to Firebase
    var ref = new Firebase(‘https://.firebaseio.com');
    

    View Slide

71. View Slide

72. // Listen for changes from Firebase
    ref.on('value', function(snapshot) {
    console.log(snapshot.val());
    });
    

    View Slide

73. View Slide

74. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true,<br/>value: function() {<br/>return [<br/>{<br/>label: 'My first todo!',<br/>isComplete: false<br/>},<br/>…<br/>];<br/>}<br/>}<br/>

    View Slide

75. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true,<br/>value: function() {<br/>return [<br/>{<br/>label: 'My first todo!',<br/>isComplete: false<br/>},<br/>…<br/>];<br/>}<br/>}<br/>Just an<br/>array<br/>

    View Slide

76. View Slide

77. View Slide

78. There’s an element for that
    

    View Slide

79. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true,<br/>value: function() {<br/>return [<br/>{<br/>label: 'My first todo!',<br/>isComplete: false<br/>},<br/>…<br/>];<br/>}<br/>}<br/>

    View Slide

80. todo-data.html
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
    
    

    View Slide

81. todo-data.html
    
    
    location="https://polymer-todo.firebaseio.com">
    
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
    
    

    View Slide

82. todo-data.html
    
    
    location="https://polymer-todo.firebaseio.com">
    
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
    
    

    View Slide

83. todo-data.html
    
    
    location="https://polymer-todo.firebaseio.com">
    
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
    
    

    View Slide

84. todo-data.html
    
    
    location=“{{location}}“>
    
    
    <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
    
    

    View Slide

85. index.html
    
    
    
    
    
    
    

    View Slide

86. index.html
    
    
    location=“https://polymer-todo.firebaseio.com">
    
    
    
    
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. REALTIME DATABASE AUTHENTICATION HOSTING
    

    View Slide

92. AUTHENTICATION
    

    View Slide

93. View Slide

94. {
    "rules": {
    "users": {
    "$uid": {
    ".write": "auth.uid === $uid",
    ".read": "auth.uid === $uid"
    }
    }
    }
    }
    

    View Slide

95. {
    "rules": {
    "users": {
    "$uid": {
    ".write": "auth.uid === $uid",
    ".read": "auth.uid === $uid"
    }
    }
    }
    }
    Path to a
    unique ID
    

    View Slide

96. {
    "rules": {
    "users": {
    "$uid": {
    ".write": "auth.uid === $uid",
    ".read": "auth.uid === $uid"
    }
    }
    }
    }
    The user’s
    unique ID
    

    View Slide

97. {
    "rules": {
    "users": {
    "$uid": {
    ".write": "auth.uid === $uid",
    ".read": "auth.uid === $uid"
    }
    }
    }
    }
    Authenticated user’s ID
    must match the path
    

    View Slide

98. // Authenticate a user with Google Sign in
    ref.authWithOAuthPopup('google', function(error, authData) {
    // Get the user’s todo list
    this.userRef = this.ref.child(‘users/‘ + authData.uid);
    });
    

    View Slide

99. There’s an element for that too
    

    View Slide

100. todo-data.html
     
     
     location="{{location}}">
     
     
     <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
     
     

     View Slide

101. todo-data.html
     
     
     location="{{location}}"
     provider="google"
     user="{{user}}">
     
     location="{{location}}">
     
     
     <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
     

     View Slide

102. todo-data.html
     
     
     location="{{location}}"
     provider="google"
     user="{{user}}">
     
     location="{{location}}">
     
     
     <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
     

     View Slide

103. todo-data.html
     
     
     location="{{location}}"
     provider="google"
     user="{{user}}">
     
     location="{{location}}">
     
     
     <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
     

     View Slide

104. todo-data.html
     
     
     location="{{location}}"
     provider="google"
     user="{{user}}">
     
     location="{{location}}">
     
     
     <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
     

     View Slide

105. todo-data.html
     
     …
     
     No user?
     Open the sign-in dialog
     

     View Slide

106. todo-data.html
     _userChanged: function(user) {
     if (user) {
     this.userLocation = [
     this.location, 'users', this.user.uid
     ].join('/');
     }
     }
     Find the user’s todos
     in Firebase
     

     View Slide

107. todo-data.html
     
     
     location="{{location}}"
     provider="google"
     user="{{user}}">
     
     location="{{userLocation}}">
     
     
     <br/>Polymer({<br/>is: 'todo-data',<br/>properties: {<br/>todos: {<br/>notify: true<br/>}<br/>}<br/>});<br/>
     

     View Slide

108. View Slide

109. REALTIME DATABASE AUTHENTICATION HOSTING
     

     View Slide

110. HOSTING
     

     View Slide

111. npm install -g firebase-tools
     

     View Slide

112. View Slide

113. View Slide

114. Problem
     #3
     

     View Slide

115. Polymer starter kit
     Get rolling with
     

     View Slide

116. Small elements
     Break your app into
     

     View Slide

117. get to production
     Use Firebase to
     

     View Slide

118. bit.ly/polycasts
     

     View Slide

119. thanks!
     @rob_dodson
     +RobDodson
     credits
     Images by Gregor Črešnar, Aenne Brielmann, Michal Beno, Golden Roof, Rohith M S, Till Teenck, Julien Deveaux, Garrett Knoll, Matt Brooks,
     Nick Kinling, Brad Ashburn, Juan Pablo Bravo, Nicolas Vicent, Aha-Soft, Nicky Knicky, Max Cougar Oswald & Nihir Shah
     

     View Slide