Battle of Frameworks: Polymer - Meetup Paris Web Components 2016-09

The Paris Web Components Meetup proposed a session to compare several component-oriented frameworks, where each speaker made the case of his or her favorite framework and showed the implementation of the same webapp done with the chosen framework. I did the Polymer presentation.

Transcript

1. @LostInBrittany
   #polymer @pariswebComps
   Battle of Frameworks:
   Polymer
   Horacio Gonzalez
   @LostInBrittany
   

   View Slide

2. @LostInBrittany
   #polymer @pariswebComps
   Horacio Gonzalez
   @LostInBrittany
   Cityzen Data
   http://cityzendata.com
   Spaniard lost in Brittany,
   developer, dreamer and
   all-around geek
   

   View Slide

3. @LostInBrittany
   #polymer @pariswebComps
   Polymer Ecosystem
   DevTools, task runner...
   

   View Slide

4. @LostInBrittany
   #polymer @pariswebComps
   Until Google I/O 2016
   The Polymer library is for building components
   out of components
   out of components
   out of components
   out of components...
   

   View Slide

5. @LostInBrittany
   #polymer @pariswebComps
   How do I write an app with Polymer?
   How about routing?
   Use your favorite routing lib, in a custom element
   How about i18n?
   Use your favorite i18n lib, in a custom element
   How about xyz?
   Use your favorite xyz lib, in a custom element
   To be fair, it felt too light for big apps
   Until Google I/O 2016
   

   View Slide

6. @LostInBrittany
   #polymer @pariswebComps
   And then, in Google I/O 2016
   Image: FlickrHivemind
   Polymer App-Toolbox
   

   View Slide

7. @LostInBrittany
   #polymer @pariswebComps
   Polymer App-Toolbox
   Everything you needed to build big apps
   ● app-layout elements
   ● app-route
   ● app-localize-behavior
   ● app-storage
   ● Polymer CLI
   

   View Slide

8. @LostInBrittany
   #polymer @pariswebComps
   ● If you write a full Polymer app
   The App-Toolbox is all you need
   ● If you use Polymer components in an app
   Use the tools you have with your app
   DevTools? Task Runner?
   

   View Slide

9. @LostInBrittany
   #polymer @pariswebComps
   Let's look to your app
   A challenge is a challenge,
   show us the code!
   Image: Ken Shirriff
   

   View Slide

10. @LostInBrittany
    #polymer @pariswebComps
    An app? More, a PWA!
    

    View Slide

11. @LostInBrittany
    #polymer @pariswebComps
    Routing
    How navigation works
    

    View Slide

12. @LostInBrittany
    #polymer @pariswebComps
    app-location & app-route
    speaks with browser location
    enables declarative, self-describing routing
    
    route="{{route}}"
    pattern="/:page"
    data="{{data}}"
    tail="{{tail}}">
    
    

    View Slide

13. @LostInBrittany
    #polymer @pariswebComps
    Route cascading
    Route cascading allows for complex routing
    Child can be declared in any element...
    
    route="{{route}}"
    pattern="/:page"
    data="{{data}}"
    tail="{{tail}}">
    
    route="{{subroute}}"
    pattern="/:id"
    data="{{subrouteData}}">
    
    

    View Slide

14. @LostInBrittany
    #polymer @pariswebComps
    Forms
    Creating, using and validating forms
    

    View Slide

15. @LostInBrittany
    #polymer @pariswebComps
    Polymer ❤ Material Design
    Two canonical implementations: Android & Polymer
    MD is native in Polymer: paper-elements
    

    View Slide

16. @LostInBrittany
    #polymer @pariswebComps
    
    label="Type only numbers... (floating)"
    validate="^[0-9]*$"
    error="Input is not a number!">
    
    

    View Slide

17. @LostInBrittany
    #polymer @pariswebComps
    Why to choose Polymer?
    That's the wrong question
    

    View Slide

18. @LostInBrittany
    #polymer @pariswebComps
    I ❤several JS frameworks
    

    View Slide

19. @LostInBrittany
    #polymer @pariswebComps
    But I don't want to be locked in
    

    View Slide

20. @LostInBrittany
    #polymer @pariswebComps
    Web-components simply work
    I can use (and I have used) my on:
    

    View Slide

21. @LostInBrittany
    #polymer @pariswebComps
    A good pattern
    Use your framework for the app high level logic
    And use web-components for all the rest
    Now forcibly Polymer
    

    View Slide

22. @LostInBrittany
    #polymer @pariswebComps
    Build a good catalog of components
    Your business logic inside web components
    A lifecycle different to the framework
    "Never again locked with a useless stack of directives"
    

    View Slide

23. @LostInBrittany
    #polymer @pariswebComps
    Conclusion
    Image: dcplanet.fr
    That's all folks!
    

    View Slide

24. @LostInBrittany
    #polymer @pariswebComps
    Thank you !
    

    View Slide