Polymer is production ready, how about you?

•

1 like•938 views

"Polymer is production ready, how about you?" by Maurizio Mangione Da quando è stata rilasciata la versione 1.0 Polymer è finalmente pronto per essere usato in produzione. Quali sono le cose da tenere in considerazione, gli strumenti da usare e le pratiche migliori per deployare e mantenere i propri componenti? In questo talk vedremo come creare applicazioni basate su Polymer e come integrarlo in quelle già in produzione, dove riscrivere tutto da zero non è un'opzione.

Software

@granze
Polymer is production ready.
How about you? Maurizio Mangione
ROME 18-19 MARCH 2016

@granze
@Granze
Google Developers Expert
Milano JS Founder

@granze
Custom Elements
<my-component></my-component>
<x-element attribute="test"></x-element>

@granze
HTML Imports
<link rel="import" href="path/to/component.html">

@granze
Shadow DOM
var progressBar = document.createElement('div');
var shadowRoot = progressBar.attachShadow({mode:
'closed'});
var template = document.getElementById('template');
shadowRoot.appendChild(template).content.cloneNode
(true));
V1

@granze
“Always bet on Javascript”
Brendan Eich

@granze
“Always bet on
the Web Platform”
Me

@granze
1 Create reusable elements
● Start with the seed-element
● Use Polyserve
● Publish via Bower

@granze
<seed-element>
● Element boilerplate
● Test ready
● Auto generated docs

@granze
How elements talk to each other
API API
<child-component><child-component>

@granze
<g-tag my-attr="true">
Polymer({
is: 'g-tag',
properties: {
myAttr: {
type: Boolean
}
}
});

@granze
Mediator Pattern
API API
BUSINESS LOGIC
wrapper
<child-component><child-component>

@granze
<x-app>
<link rel="import" href="polymer/polymer.html">
<dom-module id="x-app">
<template>
<!-- add elements here -->
</template>
<script>
Polymer({ is: 'x-app' });
</script>
</dom-module>

@granze
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="x-app/x-app.html">
</head>
<body>
<x-app></x-app>
</body>
</html>

@granze
<template is="dom-bind">
<body>
<template id="app" is="dom-bind">
<a href="#" on-click="sayHello">Click me!</a>
</template>
<script>
const app = document.querySelector('#app');
app.sayHello = () => { console.log('Hello') };
</script>
</body>

@granze
Use what you like the most
● Events (fire, listen)
● Flux-like architecture
● Your own solution

@granze
Web component tester
> npm i -g web-component-tester
> wct

@granze
Tools of the trade
● Vulcanize
● Crisper
● NPM scripts or Gulp

@granze
Vulcanize
> vulcanize target.html > build.html

@granze
Crisper
> cat index.html | crisper -h build.html -j build.js

@granze
So, what I need?
● Elements
● Let them talk to each other
● Test all the things
● Build/deploy

@granze
PSK’s Hot features
● Offline support
● Complete build chain
● Responsive app layout

@granze
Yeoman
> npm i -g yo
> npm install -g generator-polymer
> yo polymer

@granze
You can win!
One component at a time

@granzeCredits: http://nocamels.com/2014/06/israeli-researchers-create-trojan-horse-of-chemotherapy

@granze
I don’t want to add more stuff
to my legacy app

@granze
Community
http://polymer-slack.herokuapp.com

@granze
Should you build your app
entirely with Web Components?

@granze
Polymer is good because
● Built on standards
● Freedom of choice
● Production ready...

What's hot

Yeoman intro

Gergely Németh

Polymer - Una bella historia de amor

Israel Blancas

These slides belong to https://CustomizeWoo.com, a technical video course that shows you how to override WooCommerce pages and elements without using plugins. You can watch me code and learn by example. A series of videos, screencasts, examples and exercises will help you feel more confident about WooCommerce customization, child themes, hooks and CSS/PHP snippets. Watch and re-watch each video how many times you like, get lifetime access to me via the comment section, exercise as much as possible and keep learning. Access your free videos or buy the course via https://businessbloomer.com/customizewoo-master-woocommerce-online-course/

WooCommerce: Customization FAQ

Rodolfo Melogli

Blogging for hackers (english)

Stephen Mariano Cabrera

De 0 a Polymer

Israel Blancas

GoCoding.Today For Rails - Episode1

Brian Hu

Thinkful FrontEnd Crash Course - HTML & CSS

TJ Stalcup

Polymer - El fin a tus problemas con el FrontEnd

Israel Blancas

Introduction to Django CMS

Pim Van Heuven

Thinkful FrontEnd Crash Course - HTML & CSS

TJ Stalcup

DevDay 2018 - Blazor

Denis Voituron

Vim is everywhere. But out of the box, it is tedious to use and doesn't aid you much with your programming tasks. Due to its flexibility, it can be extended and configured to perfectly suit your needs. This demo shows you what is possible with vim, how it can be configured to efficiently support your workflow and help you writing better code with auto completion, code analysis and auto formatting.

Web Development with Vim by Johannes Raggam

T. Kim Nguyen

Kentico Cloud Best Practices

Kentico Software

Frontend Crash Course

Aaron Lamphere

Wade.Go Introduction Speech - SFD HCMC 2014

Nguyễn Thành Hải

JSConf.eu Overview

Raimonds Simanovskis

When you are about to make the step from developing web apps to making mobile apps, you should consider using a hybrid technology approach. The use of web technologies to build "native" mobile apps is a journey with a lot of choices to make and questions to answer. This presentation tells you, how we made our decisions and what options we had been looking at. It also introduces the Lungo-Angular-Bridge we use to bring together the best of Lungo and Angular to make mobile apps that rock.

From website to mobile app - a journey

Martin Naumann

Word press plugin development

Md Shahjahan Jewel

Magento 2 Community Project - Moving from LESS to SASS

Bartek Igielski

Thinkful DC FrontEnd Crash Course - HTML & CSS

TJ Stalcup

What's hot (20)

Yeoman intro

Polymer - Una bella historia de amor

WooCommerce: Customization FAQ

Blogging for hackers (english)

De 0 a Polymer

GoCoding.Today For Rails - Episode1

Thinkful FrontEnd Crash Course - HTML & CSS

Polymer - El fin a tus problemas con el FrontEnd

Introduction to Django CMS

Thinkful FrontEnd Crash Course - HTML & CSS

DevDay 2018 - Blazor

Web Development with Vim by Johannes Raggam

Kentico Cloud Best Practices

Frontend Crash Course

Wade.Go Introduction Speech - SFD HCMC 2014

JSConf.eu Overview

From website to mobile app - a journey

Word press plugin development

Magento 2 Community Project - Moving from LESS to SASS

Thinkful DC FrontEnd Crash Course - HTML & CSS

Viewers also liked

Polymer - Lego for the web!

Codemotion

Polymer in production : we did it!

Fastory

Progressive web apps with Angular 2

Manfred Steyer

"Engage and retain users in the mobile world" by Matteo Bonifazi App stores are growing day by day and millions of apps have been downloaded by users every day. Crafting an awesome mobile app does not mean having a great success in the market. It becomes crucial for app success to make your app engaging so that users who have installed actually use it. With this talk, we are diving into several techniques, like App Indexing and App Invites, that help make the mobile app a more useful and embedded part of the user's experience.

Engage and retain users in the mobile world

Codemotion

Distributed companies and organizations are getting more visibility nowadays, but how does it work in practice, day to day, to design while being remote? This talk explores how a completely distributed team works, following the steps of Hyperion, one of the teams that worked on the new "Calypso" WordPress.com. The audience will be able to see in a deeper detail how a distributed team is organized and it will get a few driving principles on how to make it work for your own remote or distributed team.

Distributed Companies: A WordPress.com Team Perspective - Davide Casali - Cod...

Codemotion

More than a technology, Sinfonier is the logic evolution of real time processing systems. It's the combination of a visual programming language (Yahoo Pipes), a collaborative philosophy (community) and a framework for real-time processing (Apache Storm) made available to users. During years solutions that exploit information using batch processing techs. have been growing. Now it is time to bring this philosophy to the world of real-time processing. Sinfonier was born with a clear focus on solving problems related to cybersecurity but technology supports other aspects we'll show this.

Sinfonier: How I turned my grandmother into a data analyst - Fran J. Gomez - ...

Codemotion

Devices (phones, tablets, etc.) already consume most services/data, but they have to get those services somewhere! In this session, learn how to use proven patterns & open source software to quickly and effectively build edge services that marshal & streamline communication between your key services and end-users with devices in hand. The presenter will demonstrate how to develop & manage microservices & expose them via an edge service, securely, using OSS tools employed by Netflix to keep movies streaming globally 24x7.

Living on the Edge (Service) - Mark Heckler - Codemotion Amsterdam 2016

Codemotion

NoSQL on the move

Codemotion

RESTful APIs have simplified backend access providing clean URL-based resource representations using standard HTTP methods. But growth in the number of these APIs can lead to inefficiencies: if an app needs to access many of these resources at once, performance can bog down. 'Boxcarring' is the bundling together of multiple HTTP requests into one. For example, the client might bundle multiple requests into a single call. On the server, a RESTful API can accept a POST to multiple resources in one request. This talk will demonstrate both client and server side examples of boxcar requests.

Boxcars and Cabooses: When one more XHR is too much - Peter Chittum - Codemot...

Codemotion

Death to Icon Fonts - Seren Davies - Codemotion Amsterdam 2016

Codemotion

Git is rapidly taking over the development workplace. One of the downsides of high-level tools is that they can hide the details of what is happening under the hood; when things go wrong it can be hard to understand why git behaves the way it does. But at its core Git consists of a few simple concepts that, when understood, make it a much more intuitive tool. This talk introduces these core Git concepts and uses them to clarify some examples of seemingly counterintuitive behaviour. It also introduces some of Git's less-known features and tricks that are useful to have in your arsenal.

Knowledge is Power: Getting out of trouble by understanding Git - Steve Smith...

Codemotion

Angular2 and Redux - up & running - Nir Kaufman - Codemotion Amsterdam 2016

Codemotion

We produce software systems at an ever increasing rate, but our ability to get cleanup after older systems does not keep up with that pace. An IDC study showed that there are some 10k mainframe systems in use containing some 200B LOC. This shows that software is not that soft, and that once let loose systems produce long lasting consequences. Because of the impact of our industry, we need to look at software development as a problem of environmental proportions. We must build our systems with recycling in mind. As builders of the future world, we have to take this responsibility seriously.

Software environmentalism - Tudor Girba - Codemotion Amsterdam 2016

Codemotion

If there is bad press about Node.js it's because of performance issues and how hard it is to track them down. Usually these problems are hiding during development but start to kick in under high load. Not good. In my talk we will briefly go through the "hall of fame" of Node.js performance problems and the technical details behind them. By doing so, we will also get some valuable insights on how Node.js (V8, libuv) works internally. Then we will learn how to create metrics that the V8 engine provides to us out of the box and learn about tools that help interpreting them.

Welcome to Mordor - Daniel Kahn - Codemotion Amsterdam 2016

Codemotion

According to the F# Foundation (http://fsharp.org) "F# is a mature, open source, cross-platform, functional-first programming language. It empowers users and organizations to tackle complex computing problems with simple, maintainable and robust code." It sounds attractive, but it's different enough that without a guide getting started can be a bit intimidating - and why do you want to anyway? Come along to this gentle introduction to F# for the curly brace developer and find out.

F# for the curly brace developer - Michael Newton - Codemotion Amsterdam 2016

Codemotion

"Maker Experience: user centered toolkit for makers" by Mino Parisi Can we inspire and contaminate the technological innovation of the Makers through the point of view of users? Make Experience is a step-by-step methodology created to join the UX Design in the creative process of the Makers. This talk includes the following topics: - User research to understanding users needs and goals; - Co-Design and Rapid Prototyping to evolve your project; - testing your prototypes and learn from user's feedback; - organize informations and interactions in a World made of bits & atoms - from product to service/startup (Service Design for Internet of the Things).

Maker Experience: user centered toolkit for makers

Codemotion

Virtual Reality (VR) is nothing new. @ the Mesdag in the Hague you can step into a 360° degree painting for over a 100 years. These museums where all over Europe and exchanged paintings with each other. In the late 80s and 90s virtual reality gained popularity but not enough to break through. Now fast-forward in 2016 we use our smartphones to experience virtual reality. We can immerse ourselves into 360Ëš movies & VR games. But VR can also be used for serious means like product marketing and for health & safety trainings. Adriaan Rijkens will dive into these topics and share practical examples.

The rise and fall and rise of Virtual Reality - Adriaan Rijkens - Codemotion...

Codemotion

ReactJs has a young brother called React Native that it is ready to jump from the web development to mobile native development. And that is great, because React and its "one direction data flow" philosophy is one of the coolest things that happened past year :) In this talk I'll give a brief summary about React, its style and philosophy and how we can use React Native to build native applications for iOS and Android using JavaScript and the same set of tools and workflow we use to create web applications.

React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...

Codemotion

Microsoft <3 Open Source: Un anno dopo!

Codemotion

Can you imagine a database that stands as much traffic as you want, adding and removing nodes automatically, working interruption-free even if a volcano starts spitting lava over your data centres? That's the promise of distributed systems like Cassandra, Voldemort or Riak. But, how do they do it? In this talk I will tell you the basics of distributed databases. Come to my talk if you want to learn about CAP, BASE, incremental scalability, replication or consensus. I will also explain geeky things like gossip, vector clocks, hinted handoff, or entropy.

Everything you always wanted to know about highly available distributed datab...

Codemotion

Viewers also liked (20)

Polymer - Lego for the web!

Polymer in production : we did it!

Progressive web apps with Angular 2

Engage and retain users in the mobile world

Distributed Companies: A WordPress.com Team Perspective - Davide Casali - Cod...

Sinfonier: How I turned my grandmother into a data analyst - Fran J. Gomez - ...

Living on the Edge (Service) - Mark Heckler - Codemotion Amsterdam 2016

NoSQL on the move

Boxcars and Cabooses: When one more XHR is too much - Peter Chittum - Codemot...

Death to Icon Fonts - Seren Davies - Codemotion Amsterdam 2016

Knowledge is Power: Getting out of trouble by understanding Git - Steve Smith...

Angular2 and Redux - up & running - Nir Kaufman - Codemotion Amsterdam 2016

Software environmentalism - Tudor Girba - Codemotion Amsterdam 2016

Welcome to Mordor - Daniel Kahn - Codemotion Amsterdam 2016

F# for the curly brace developer - Michael Newton - Codemotion Amsterdam 2016

Maker Experience: user centered toolkit for makers

The rise and fall and rise of Virtual Reality - Adriaan Rijkens - Codemotion...

React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...

Microsoft <3 Open Source: Un anno dopo!

Everything you always wanted to know about highly available distributed datab...

Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019

Codemotion

A key challenge we face at Pacmed is quickly calibrating and deploying our tools for clinical decision support in different hospitals, where data formats may vary greatly. Using Intensive Care Units as a case study, I’ll delve into our scalable Python pipeline, which leverages Pandas’ split-apply-combine approach to perform complex feature engineering and automatic quality checks on large time-varying data, e.g. vital signs. I’ll show how we use the resulting flexible and interpretable dataframes to quickly (re)train our models to predict mortality, discharge, and medical complications.

Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019

Codemotion

Coolblue is a proud Dutch company, with a large internal development department; one that truly takes CI/CD to heart. Empowerment through automation is at the heart of these development teams, and with more than 1000 deployments a day, we think it's working out quite well. In this session, Pat Hermens (a Development Managers) will step you through what enables us to move so quickly, which tools we use, and most importantly, the mindset that is required to enable development teams to deliver at such a rapid pace.

Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019

Codemotion

Quantum computers can use all of the possible pathways generated by quantum decisions to solve problems that will forever remain intractable to classical compute power. As the mega players vie for quantum supremacy and Rigetti announces its $1M "quantum advantage" prize, we live in exciting times. IBM-Q and Microsoft Q# are two ways you can learn to program quantum computers so that you're ready when the quantum revolution comes. I'll demonstrate some quantum solutions to problems that will forever be out of reach of classical, including organic chemistry and large number factorisation.

James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...

Codemotion

Chinese food exploded across America in the early 20th century, rapidly adapting to local tastes while also spreading like wildfire. How was it able to spread so fast? The GY6 is a family of scooter engines that has achieved near total ubiquity in Europe. It is reliable and cheap to manufacture, and it's made in factories across China. How are these factories able to remain afloat? Chinese-American food and the GY6 are both riveting studies in product-market fit, and both are the product of a distributed open source-like development model. What lessons can we learn for open source software?

Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...

Codemotion

Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019

Codemotion

Would you fly in a plane designed by a craftsman or would you prefer your aircraft to be designed by engineers? We are learning that science and empiricism works in software development, maybe now is the time to redefine what “Software Engineering” really means. Software isn't bridge-building, it is not car or aircraft development either, but then neither is Chemical Engineering. Engineering is different in different disciplines. Maybe it is time for us to begin thinking about retrieving the term "Software Engineering" maybe it is time to define what our "Engineering" discipline should be.

Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019

Codemotion

What is the job of a CTO and how does it change as a startup grows in size and scale? As a CTO, where should you spend your focus? As an engineer aspiring to be a CTO, what skills should you pursue? In this inspiring and personal talk, I describe my journey from early Red Hat engineer to CTO at Bloomon. I will share my view on what it means to be a CTO, and ultimately answer the question: Should the CTO be coding?

Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019

Codemotion

More from Codemotion (20)

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...

Pompili - From hero to_zero: The FatalNoise neverending story

Pastore - Commodore 65 - La storia

Pennisi - Essere Richard Altwasser

Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...

Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019

Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019

Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -

Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...

Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...

Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...

Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...