But there is no web component for that - Web Components Remote Conference - 2017-02-16

•

0 likes•268 views

This document discusses componentalizing JavaScript libraries to create web components. It provides examples of componentalizing QR code generation and scanning libraries. To componentalize a library, the author defines inputs, outputs, a template, and wires the library to these. Issues may arise that require debugging and even patching the library. The goal is to encapsulate third party code into reusable custom elements.

@LostInBrittany#wcremoteconf
WEB COMPONENTS
REMOTE CONF
2017
But there is no web component for that!
Horacio Gonzalez
@LostInBrittany

@LostInBrittany#wcremoteconf
Who am I?
Horacio Gonzalez
@LostInBrittany
Cityzen Data
http://cityzendata.com
Spaniard lost in Brittany, developer,
dreamer and all-around geek

@LostInBrittany#wcremoteconf
Introduction
Context is everything

@LostInBrittany#wcremoteconf
There is no webcomponent for that!
So there is no web component
for your nifty feature…
But there is a JS library
What can I do?

@LostInBrittany#wcremoteconf
It isn't a theoretical problem
Maybe you won't never have this problem
And that's OK!
But I had the problem,
so I had to find an answer
Talk by Raphaël tomorrow

@LostInBrittany#wcremoteconf
I was kinda an AngularJS fanboy

@LostInBrittany#wcremoteconf
Until I hit a wall

@LostInBrittany#wcremoteconf
Enter Web Components & Polymer
WebComponents, a modular approach to webapps

@LostInBrittany#wcremoteconf
And it worked!
We put our first Polymer app in production on 2014 with Polymer 0.4
Full story: http://blog.cityzendata.com/2015/02/07/behind-CES-colors/

@LostInBrittany#wcremoteconf
It was there I met the problem...
I used D3.js, NVD3 and canvas
for my dataviz
But there was nothing
like that in Polymer
What could I do?

@LostInBrittany#wcremoteconf
For each problem there is a solution
I saw several solutions:
● Wait for the web component
● Dirty integrating the library
● Componentalize it
Guess which one I chose...

@LostInBrittany#wcremoteconf
It was only the first time...

@LostInBrittany#wcremoteconf
How do I componentalize them?

@LostInBrittany#wcremoteconf
Componentalizing a library
Let's begin with a simple example

@LostInBrittany#wcremoteconf
granite-qr-generator

@LostInBrittany#wcremoteconf
What QR Code library to use?
I choose QR.js
https://github.com/lifthrasiir/qr.js/
● Small
○ 26 kb uncompressed and commented
● Quick!
● Well coded
○ Structured, lots of comments, clean code
● No dirty DOM manipulation

@LostInBrittany#wcremoteconf
Steps
1. Creating an empty element
2. Add the library as a dependency
3. Load the library in the element file
4. Build a web component encapsulating it
5. Profit?

@LostInBrittany#wcremoteconf
"Build a web component encapsulating it"
Easier said than done?
1. Define the inputs (attributes)
2. Define the outputs (events)
3. Define the UI (template)
4. Wire the attributes and events to the
library
5. Use the lifecycle methods to initialize

@LostInBrittany#wcremoteconf
Define the inputs (attributes)

@LostInBrittany#wcremoteconf
Define the outputs (events)

@LostInBrittany#wcremoteconf
Define the UI (template)

@LostInBrittany#wcremoteconf
Wire the attributes and events to the library

@LostInBrittany#wcremoteconf
granite-qrcode-scanner

@LostInBrittany#wcremoteconf
What QR Code scan library to use?
I choose jsqrcode
https://github.com/LazarSoft/jsqrcode
● Small for a full QR Code scanner
○ 110 kb uncompressed and commented
● Quick and efficient
● Well coded
○ Structured, lots of comments, clean code
● But with some dirty DOM manipulation

@LostInBrittany#wcremoteconf
Define the inputs and outputs

@LostInBrittany#wcremoteconf
Initializing in the lifecycle methods

@LostInBrittany#wcremoteconf
But what about the wiring?
Almost no wiring needed
● Either done in the template
● Or in the initialization

@LostInBrittany#wcremoteconf
And then, does it work?
Weeeeell, not really…
And it doesn't give a clear error
What does it happen here ?

@LostInBrittany#wcremoteconf
Digging in the problem
Going deep inside the library
Adding logs and breakpoints
And I found the guilty line:

@LostInBrittany#wcremoteconf
Patching the library
Doing it the open source way...

@LostInBrittany#wcremoteconf
Other examples: ace-widget

@LostInBrittany#wcremoteconf
Thanks!
I hope you liked this talk!
Don't hesitate to send me your questions
by email, twitter, hangout, carrier pigeon...

Have some imposter syndrome? Worried that you aren't a *real* developer? You're in luck! There's an easy, anybody-can-do-it two-step process you can follow to conquer your fears and become a Real Developer. What are those two steps? Well...that's where it gets complicated. Come with Anne as she recounts her path into the world of software development, overcomes her fears, questions the nature of reality, and shows off a super cool Ruby script.

Jfokus - Rocket Propelled Java

Andres Almiray

Rocket Propelled Java - Devoxx12Andres Almiray

JAZOON'13 - Andres Almiray - Rocket Propelled Javajazoon13

Hamamatsu.rb.20111210

Masakuni Kato

Moving to PHP from Java

Ivo Roberto Batistela

Polymer in the real life - Devoxx France - 2016 04-20

Horacio Gonzalez

In the last two years I've been speaking a lot about web components and Polymer in conferences and user-groups, sharing a vision of the upcoming web-component revolution. But after these introductory talks I often got the same question: "that seems great... but does it works in Real Life?" Ah, the pesky real life question... In this talk I'm going to tackle that question in the best way I know: I'm going to tell you my experience of almost two full years web applications with Polymer in the real life, for real projects in a real enterprise with real costumers, and all the lessons I've learnt from it. You will heard why did I choose Polymer, how I dealt with the 0.x versions lifecycle, the good points and the bad ones too, how I did integrate lots of 3rd part libs into a component architecture and how now I'm able to create full fledge Progressive Web Apps using Polymer in a simple way without having to deal with the complexity of Angular/React/Whatever JS, but also how to integrate your components into those frameworks if needed.

Ah, les web components, quelle belle idée ! Du développement web basé enfin sur une vraie architecture en composants, de la réutilisation, de la modularisation, de l'encapsulation… Mais en attendant que le W3C décide de sortir le standard, ce qu'on a dans les mains c'est une panoplie de bibliothèques de polyfills : Polymer, X-Tag, Bosomic… Dans ce talk nous allos répondre à la question : "OK, le futur sera beau, mais aujourd'hui, si je fais des composants avec une bibliothèque X et mon pote en fait avec une bibliothèque Y, je peux les utiliser dans la même application ? Et ils marcheront dans mon framework favori ?".

Moodle and the Internet of Things

Kenneth Scott Huntley

Mixing Web Components - Paris Web Components - 2015 09-16

Horacio Gonzalez

The W3C has been working on a Web Components standard for almost three years, but it is still a work in progress. But polyfills like allows current developers to use Web Components today, and incorporate to their apps widgets from any library of web components. The best known of these libraries is Polymer, but it isn't the only one. In this talk we are going to compare Polymer, the '800 lb gorilla' in the Web Component field, with several of its lesser known competitors: Mozilla's X-Tags and Briks, and Bosonic, and even homemade ReactJS webcomponents We will build an Angular JS application where, instead of directives, we will use webcomponents done with Polymer, X-Tag and ReactJS. And we will take a look to the performances in both Chrome and Firefox.

Martin Splitt "Progressive web apps with Polymer"

Fwdays

Build chatbots with api.ai and Google cloud functions

The Incredible Automation Day

Three Incredibly Nerdy But Ultimately Pointless Topics - Scott Huntley

WordCamp Sydney

In this presentation, Scott's going to talk about three incredibly cool and nerdtastic things, which ultimately aren't of much use. What's the smallest computer that can run WordPress, and can you lose your blog in your sofa cushions? Does WordPress have a sibling, and just who is this mysterious member of the family? Have you ever wanted a Pherlog - not a Phlog - a Pherlog, and what's everyone's favourite rodent? And is exploring weird and crazy off-the-wall topics truly a waste of time, or will you learn something useful after all?

WCSYD: Three Incredibly Nerdy (But Ultimately Pointless) Topics

Kenneth Scott Huntley

URL Shorteners & QR Codes

Christopher Bugaj

F# for startups

joelgrus

Progressive web and the problem of JavaScript

Christian Heilmann

7 Punctuation Secrets to Influence and Persuade

Deepa Vijayan

C# .NET - Um overview da linguagem

Claudson Oliveira

Leveling up your JavaScipt - DrupalJam 2017

Christian Heilmann

JavaScript isn't evil.

Christian Heilmann

Web of Things Book Launch

Vlad Trifa

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

Horacio Gonzalez

Walter apiNicholas Schiller

From MonitoringSucks to Monitoring Love , 2016 Edition

Kris Buytaert

Horacio Gonzalez | Hey people, have you looked at Flutter yet? | Codemotion M...

Codemotion

Ya nos han dicho que Flutter es el SDK de Google para aplicaciones móviles que permite escribir interface nativos en iOS y Android en un tiempo record, que es gratuito y libre y que tiene una gran flexibilidad. En esta charla mostraremos realmente porqué Flutter es una de las plataformas de desarrollo más productivas y agradables y enseñaremos también cómo puede usarse para crear interfaces bonitas y eficaces con pocas líneas de código y casi sin código inútil. Y para ser honestos, también hablaremos de sus puntos débiles y cómo se trabaja para mejorarlo desde la comunidad. Find out more at https://madrid2018.codemotionworld.com/speakers/

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27

Horacio Gonzalez

Polymer par-ci, Polymer par-là, c'est bien beau de voir tout ce qu'on peut faire avec cette bibliothèque… Mais à la base le discours qu'on nous vend depuis des années est celui des Web Components, des briques modulaires et interopérables, suivant un standard et pouvant être mélangés comme on le souhaite pour construire des webapp comme si on faisait du LEGO. Alors, il n'est pas contradictoire de militer pour les Web Components et d'utiliser Polymer ? Ben, pas du tout ! Polymer, surtout depuis la sortie de Polymer 2, n'est qu'une surcouche de sucre syntactique au dessus du standard Web Components, et les éléments créés avec Polymer sont bel et bien des Web Components standard. De la même façon, il y a plein d'autres bibliothèques de Web Components qui ont un rôle semblable : SkateJS, SlimJS, BramJS... Chacune orientée vers une sensibilité et une façon de coder. Et bien entendu, les éléments créés avec eux se mélangent sans soucis, car ils suivent tous le même standard. Dans ce talk nous allons voir comment ces éléments Polymer sont construits à partir du standard web components, voir ce côté sucre syntactique et comprendre ce qu'ils apportent. Ensuite on verra rapidement les bases de SkateJS et de SlimJS pour finir par prouver l'intéropérabilité avec une petite application qui mélange du Web Component standard, du Polymer, du SkateJS et du SlimJS.

ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...

Horacio Gonzalez

Similar to But there is no web component for that - Web Components Remote Conference - 2017-02-16

Oktober webfest

Andrea Balducci

Mixing Web Components - Best of Web Paris - 2016 06-09

Horacio Gonzalez

Moodle and the Internet of Things

Kenneth Scott Huntley

Mixing Web Components - Paris Web Components - 2015 09-16

Horacio Gonzalez

Martin Splitt "Progressive web apps with Polymer"

Fwdays

Build chatbots with api.ai and Google cloud functions

The Incredible Automation Day

Three Incredibly Nerdy But Ultimately Pointless Topics - Scott Huntley

WordCamp Sydney

WCSYD: Three Incredibly Nerdy (But Ultimately Pointless) Topics

Kenneth Scott Huntley

URL Shorteners & QR Codes

Christopher Bugaj

F# for startups

joelgrus

Progressive web and the problem of JavaScript

Christian Heilmann

7 Punctuation Secrets to Influence and Persuade

Deepa Vijayan

C# .NET - Um overview da linguagem

Claudson Oliveira

Leveling up your JavaScipt - DrupalJam 2017

Christian Heilmann

JavaScript isn't evil.

Christian Heilmann

Web of Things Book Launch

Vlad Trifa

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

Horacio Gonzalez

Walter apiNicholas Schiller

From MonitoringSucks to Monitoring Love , 2016 Edition

Kris Buytaert

Horacio Gonzalez | Hey people, have you looked at Flutter yet? | Codemotion M...

Codemotion

Similar to But there is no web component for that - Web Components Remote Conference - 2017-02-16 (20)

Oktober webfest

Mixing Web Components - Best of Web Paris - 2016 06-09

Moodle and the Internet of Things

Mixing Web Components - Paris Web Components - 2015 09-16

Martin Splitt "Progressive web apps with Polymer"

Build chatbots with api.ai and Google cloud functions

Three Incredibly Nerdy But Ultimately Pointless Topics - Scott Huntley

WCSYD: Three Incredibly Nerdy (But Ultimately Pointless) Topics

URL Shorteners & QR Codes

F# for startups

Progressive web and the problem of JavaScript

7 Punctuation Secrets to Influence and Persuade

C# .NET - Um overview da linguagem

Leveling up your JavaScipt - DrupalJam 2017

JavaScript isn't evil.

Web of Things Book Launch

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

Walter api

From MonitoringSucks to Monitoring Love , 2016 Edition

Horacio Gonzalez | Hey people, have you looked at Flutter yet? | Codemotion M...

More from Horacio Gonzalez

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27

Horacio Gonzalez

ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...

Horacio Gonzalez

ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

Horacio Gonzalez

Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24

Horacio Gonzalez

Collecting, storing and analysing sensor data is not so simple. You often have to rebuild a complete stack if commonly used tools likes OpenTSDB or InfluxData does not fit to your needs. At the end you need to solve 3 major problems: * Performance: sensor data can require a high level of ingestion (potentially millions of data points per second) * Analyse: Time Series analysis implies a new paradigm not compatible with existing Query language likes SQL * Security: because Internet of Things should not become Internet Of Breaches Warp 10 has been created to solve this challenge: * Deploying a standalone or distributed backend * Collecting your Data with Web standards (HTTP, WebSocket) or also with Warp 10 Sensision collector daemon. * Analysing data with WarpScript, a language dedicated to time series manipulation. * Developing with web components tools for editing WarpScripts and Data visualisation

ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript

Horacio Gonzalez

ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...

Horacio Gonzalez

ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...

Horacio Gonzalez

ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL

Horacio Gonzalez

ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS

Horacio Gonzalez

ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL

Horacio Gonzalez

ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript

Horacio Gonzalez

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...

Horacio Gonzalez

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

Horacio Gonzalez

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...

Horacio Gonzalez

Beyond Polymer - JUG Summer Camp - 2015-09-18

Horacio Gonzalez

Devoxx France - Web Components, Polymer et Material Design

Horacio Gonzalez

Des concepts comme encapsulation, réutilisation de composants, data-binding ou templating sont maintenant monnaie courante dans la plupart de frameworks web… mais chacun le fait à ça façon ! Et c’est là que les Web Components débarquent. Un nouveau standard en cours d’élaboration au W3C, qui va permettre d’avoir une approche par composants au développement web. Dans cette présentation nous parlerons de ce standard en construction, de concepts comme ShadowDOM, Mutation Observers, custom elements, Model-Driven-View, Object.observe()… Nous parlerons aussi des implémentations actuelles, du projet Polymer de Google, des X-Tags de Mozilla et de comment avec AngularJS on peut déjà avoir un bon aperçu de ce que nous attend. Et ensuite on rentrera dans le détail de comment on peut dès aujourd'hui utiliser des web components avec Polymer, et on illustrera l'approche en utilisant les composants Polymer Paper pour implémenter le look Material Design d'Android L dans des applications web.

Steven Le Roux - Kafka et Storm au service de la lutte antiDDoS à OVH - Soiré...

Horacio Gonzalez

2014 03-25 - GDG Nantes - Web Components avec PolymerHoracio Gonzalez

Bootcamp d'Initiation à Android - 2013/11/30 - Live coding : Hello world!Horacio Gonzalez

Bootcamp d'Initiation à Android - 2013/11/30

Horacio Gonzalez

La Cantine Numérique Brestoise, le GDG Finistère et le FinistJUG proposent une séance d’initiation à la création création d’application mobile sous Android. Ca fait des mois que vous voulez vous mettre au développement Android. Vous avez regardé la doc, vous avez même téléchargé le SDK, vous avez peut-être même fait un HelloWorld, vous vous êtes dit que ça a l’air facile… mais vous n’êtes jamais allé jusqu’à développer une application avec. Manque de temps, plein d’autres choses à faire, manque de motivation pour démarrer. Car il faut reconnaître que se mettre au développement sur une nouvelle plate-forme tout seul dans son coin n’est pas évident, surtout quand la vraie vie s’en mêle. Alors pourquoi pas vous réserver une journée pour franchir le cap et vous mettre pour de vrai au développement sur Android ? Ce Bootcamp Android est l’opportunité pour le faire. Vous arrivez le matin équipés d’un ordinateur portable, avec Eclipse/Android Studio et une JVM pré-installés et vous partirez en fin d’après-midi en ayant développé une petite application Android et plus important encore, en ayant intégré les principes basiques du développement sur cette plate-forme. Le Bootcamp Android est une introduction accélérée et pratique au développement Android. Vous allez apprendre, vous allez mettre les mains dans le cambouis, vous allez coder, vous allez enfin cocher la case Apprendre à coder sur Android dans votre ToDo-list.

More from Horacio Gonzalez (20)