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

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.

6f8d092fec403f766c734ce36e1eef93?s=128

Horacio Gonzalez

September 21, 2016
Tweet

Transcript

  1. 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...
  2. 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
  3. 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
  4. 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?
  5. 9.

    @LostInBrittany #polymer @pariswebComps Let's look to your app A challenge

    is a challenge, show us the code! Image: Ken Shirriff
  6. 12.

    @LostInBrittany #polymer @pariswebComps app-location & app-route <app-location> speaks with browser

    location <app-route> enables declarative, self-describing routing <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{data}}" tail="{{tail}}"> </app-route>
  7. 13.

    @LostInBrittany #polymer @pariswebComps Route cascading Route cascading allows for complex

    routing Child <app-route> can be declared in any element... <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{data}}" tail="{{tail}}"> </app-route> <app-route route="{{subroute}}" pattern="/:id" data="{{subrouteData}}"> </app-route>
  8. 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
  9. 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"