PWA starter kit: build fast, scalable, modern apps with Web Components (Google I/O '18)

Web Components are encapsulated, re-usable elements using just the web platform. But these APIs don't say much about how to turn components into fast and modern apps. Learn how Polymer has been honing methods for building apps out of Web Components by melding the best ideas from the community with new platform APIs. You'll leave this talk understanding how using a few simple patterns like Redux to wire components together enables building highly scalable apps on the web like never before.
Rate this session by signing-in on the I/O website here → goo.gl/8rLYRx
Watch more Chrome and Web sessions from I/O '18 here → goo.gl/5fgXhX
See all the sessions from Google I/O '18 here → goo.gl/q1Tr8x
Subscribe to the Chrome Developers channel → goo.gl/LLLNvf
#io18 event: Google I/O 2018; re_ty: Publish; product: Chrome - General; fullname: Monica Dinculescu; event: Google I/O 2018;

[@dekutree5979]

Google needs to buy Nintendo just so Monica can make references without worrying about copyright.

[@austinedeclan10]

No. They will ruin it

[@danf1862]

Thanks Monica and the Polymer team! I can't wait to get crackin on the new starter kit

[@MrChetbox]

Such a great talk! Fun and informative all the way through.

[@JoeWong81]

Love the analogy to video games...And now I remember how awesome the Zelda games are.

[@debkanchan]

Her presentations are always great

[@NicolasSauveur]

Thank you Monica for another great presentation. Can't wait to try pwa-starter-kit for my side-projects.

[@FrederikDussault]

Amazing presentation!! Developping has never been so fun. :-)

[@cesarsanchez5576]

So this talk is 90% about how a react-redux app works and 10% about the implementation of PWAs but with a cool presentation.

[@CodingPhase]

Yea i like here presentations its not boring very engaging

[@vinerz]

What a fun and great presentation! Monica is the best!!!

[@haydenbraxton628]

"That's banana pants" - I'm stealing this. Thank you!

[@hobbyturystaSEO]

hahaha

[@MrJohn360]

Damn, that's neat advice and fun to watch.

[@hobbyturystaSEO]

PERFECT presentation WITH funky STYLE. braVVVooo!

[@armujahid]

Great idea to gamify PWA presentation :)

[@CharlieRawlinson]

@TheGameMakeGuy not according to the dictionary - "The application of typical elements of game playing (e.g. point scoring, competition with others, rules of play) to other areas of activity, typically as an online marketing technique to encourage engagement with a product or service. " It's also spelt 'gamification'. :)

[@wendelldejelo7944]

always love monica's presentation!

[@FilmonGEMZ]

The only thing I wished would change is the audience. There's almost no laughing or responses. Or maybe I can't hear it. In general though, I wish Tech audiences would be more encouraging to speakers.

[@nevillelusimba1689]

3:1, awesome analogy. ABC

[@julian_pp]

Thank you, it's very useful

[@igeoerre]

I just met Monica and I'm already "My God, she understands what I need!" Congratulations on the way you engage the audience, you are awesome .

[@MikeWiering]

Good presentation, but I wish they would have placed that microphone better so she wouldn't be blowing into it all the time.

[@danielzondervan4803]

agreed lol.

[@reddyashok9]

Great presentation 👍

[@PavelIsp]

Anyone notice that she's actually wearing the...BANANA PANTS?

[@iamrohandatta]

I thought the same the moment she says BANANA PANTS 😆

[@lionelt.9124]

@@iamrohandatta The expression banana pants is a new one on me.

[@kamalabuhenamostafa]

Nice to see you again, Monica.

[@GlenSmith]

Nutella on Pancakes :) sweet video & very inspirational for the Polymer Project.

[@JuanCarlosMadrigal]

Always love the Monica's presentations, they're always fun, like this one with the video game and the sounds like Mario Bros. she made for it, but more important, they're also so much informative, really cool presentation!

[@d4m1n]

Awesome 🔥! I think this is a great on-boarding resource for new Web Developers. Friendly and to the point, thank you Monica!

[@TrueSQN]

I love that presentation

[@sorsai573]

This women is great and presentation was perfect. Not like many other. This is one of the best PWA video.

[@QLNPRSU]

pwa-starter-kit -> 658MB on disk (after npm install), 550+ npm packages. Why does all starter kits need to be so massive?

[@BboyKeny]

1 single asset for a game can be 1 gig during development of the asset, like a 3d model. But after the game is compiled, the asset is barely noticeable on the disk. So try building the pwa-starter-kit in that initial state ready for deployment. Tell me how big that production build is. Don't really care how big the software is before optimizations and building.

[@arwahsapi]

I'd wish I had public speaking skills like this!

[@stereopticon]

Was watching this for content, very engaging speaker, enjoying the presentation, communication skills. Working from home. Then, I noticed my 12 yr old daughter watching over my shoulder, entranced. She's a huge Zelda fan, BTW.

[@H0LDENSUX]

A game. Great. Lead down another garden path of programming ambiguity.

[@wilhelmpaulm]

I can't believe this is already 2 years ago

[@SeaJay_Oceans]

Excellent Presentation

[@FrederikDussault]

Polymer/pwa-starter-kit Github repo: github.com/Polymer/pwa-starter-kit

[@spacesaver4063]

No longer updated, its dead now

[@oleggorbatiuk4029]

Очень круто!)

[@ankitmaheshwari3643]

Web components are not available at webcomponents.org for Polymer 3. From where do we use components to design pages.?

[@ReidMewborne]

haven't seen support for safari yet. could you expand on this? thanks

[@lzantal]

She is an incredible speaker. Super engaging speaker.

[@Gerrymon]

1:58 lol yeah that's me~

[@FilipMatuszewski]

How to use typescript with this awesome starter kit.

[@xman0820]

Is there any Update in Google I/O '19?

[@SystemsPlanet]

dut do dut da dut do do pwew pwew pwew 🤖 please upload a version of this video with everything edited out except for your sound effects!!!! please publish a component we can use to add your sound effects to our aps!!

[@chakree100]

I don’t know may be I’m new to PWA may be but majority of it bounced over! Can anyone refer me to any prerequisite content if possible? I’m new to polymer as well!

[@onetryckponi]

What's odd is that there is an earlier pitch from the Polymer team that has been taken down.... If this was 0.8 or 0.9, I wonder what 0.7 looked like?

[@DreadKnight666]

Cool! Du du du du du, boop boop boop!

[@abanoubhanna7175]

WoOoOoOoOoOoW G R E A T P R E S E N T A T I O N !

[@chunckyfreshnut]

Some many things to install . I am not sure why they killed off angular 1? It so much easier to use and learn. Make it easy for people to learn how to use.

[@xWe2s]

"The web is pretty great". Yea, we deserve that. How many horrific years we lived.

[@FrederikDussault]

Please add links to github repos. Thanks

[@kikobeats]

Monica rocks

[@Virgus66]

Did she NOT mentioned about service workers at all????

[@boot-strapper]

she did, multiple times...

[@kanaillaurent526]

Can we tdd?

[@NuncNuncNuncNunc]

If only there were 'the one good datepicker'

[@bd8063]

Is that React ?

[@boot-strapper]

looks like reinventing the react wheel

[@citisolo1]

ten minutes in and im like, wait a minute ...

[@johnpage5500]

Wouldn't it be great if prpl-server were included in Firebase static hosting? I'd just upload a builds.json, a push-manifest.json and a cache-control.json and everything would be properly handled.

[@visitforthemusic]

I imagine it is a cost thing at the moment - but I agree that is the next area which needs to be tackled as "static" hosting isn't really enough and I am sure it is being considered. Following all performance best practices (optimising critical path, progressive transpilation, effective caching strategies) and getting SSR, HTTP/2 push, offline caching with service workers, all singing in harmony is a lovely vision but at present seems to involve masses of complexity and coordination between build, deployment and hosting processes. Cloudflare Workers are the closest thing of which I am aware to this vision - in so much as they allow for custom logic to run for each and every request to a traditionally "static" CDN: blog.cloudflare.com/cloudflare-workers-unleashed.

[@valacebedo]

Haha IE 11? I thought the IE has been replaced by Edge. IE sounds classic nowadays.😁

[@Mhblabla]

Oh god. The Polymer team made a copy of React.

[@Odisej1]

Marko Hrovatič I was thinking the same .... this is just React js

[@marlonallansupetran7120]

That's what I also thought!

[@davidmaxwaterman]

Except not really, no.

[@agentpx]

Nope Polymer has been around before reactjs only back then it was too slow to be adapted (I used polymer before but abandoned using it because of too much files being added to my project hierarchy, similar to what node_modules but much worst). Then It was copied by facebook and called it reactJs and successfully made it faster and lite. Now Polymer is going back to where it started via PWA

[@tudorhulban2817]

would be nicer in vanilla

[@vincepalejr6621]

Lol Banana Pants.. You're wearing banana pants.

[@rw7799]

just checked site out,,what is redux? go to redux page.... read it..repeat question.. what is redux?

[@BrianMuthomi]

wait a couple of days, visit redux page ...read .... what is redux?

[@judymontesa9872]

"mouth sound, it will get you anywhere" hmmmmm.

[@youtube.com-handle]

Lit

[@Fik0n]

What about iOS support?

[@codinggames8672]

I like chrome

[@heratpatel7174]

Hi why we need Lit html. There is React jsx works same as Lit Html.

[@jonaseriksson5750]

Benefits over JSX Native syntax No tooling required. Understood by all JS editors and tools. No VDOM overhead lit-html only re-renders the dynamic parts of a template, so it doesn't produce a VDOM tree of the entire template contents, it just produces new values for each expression. By completely skipping static template parts, it saves work. Scoped JSX requires that the compiler be configured with the function to compile tags to. You can't mix two different JSX configurations in the same file. The html template tag is just a variable, probably an imported function. You can have any number of similar functions in the same JS scope, or set html to different implementations. Templates are values JSX translates to function calls, and can't be manipulated on a per-template basis at runtime. lit-html produces a template object at runtime, which can be further processed by libraries like ShadyCSS. CSS-compatible syntax Because template literals use ${} as the expression delimiter, CSS's use of {} isn't interpreted as an expression. You can include style tags in your templates as you would expect: html` :host { background: burlywood; } `github.com/Polymer/lit-html

[@filipkovac767]

lol start in seconds? npm i takes like 3-20 min on my machine....

[@EdmundCiegoBelize]

who says banana pants??

[@andrewtfluck]

only the best :P

[@jamiemaher2341]

It sounds like one of those things where someone tells you to squeeze a funny word into your presentation without anyone noticing. Someone must have told her to say it because of her trousers.

[@chucksupport]

someone who wears Banana pants

[@JimTipping]

Someone *wearing* banana pants!

[@SirFaceFone]

Banana PWAnts

[@TechdubberStudios]

This is one of those moments when I'm proud to be romanian :))

[@bretts7740]

ABC: Always Be Closing.

[@noiJadisCailleach]

I got turned off when i saw html code inside the js. I really don't like it.

[@andyedwards9011]

Well, have fun making intricate, dynamic web pages and components without HTML inside JS. React went this way, and now Polymer followed its lead, because it's an extremely effective way to render dynamic content.

[@whatthefunction9140]

What ever happened to polymer?

[@edwardmacnab354]

very google like----I mean office google--corporate google

[@vivekkaushik9508]

She talks ALOT! I like her already.

[@albiceleste101]

I do like them but why is google trying to push PWAs so hard

[@martinrj30]

vid links (coz the slides didn't get published yet ...) github.com/polymer/pwa-starter-kit github.com/polymer/pwa-starter-kit/wiki github.com/polymer/lit-element github.com/polymer/pwa-helpers git clone pwa-starter-kit my-new-app npm install npm start npm test npm run build npm run serve npm run test:unit npm run test:integration npm run build:prpl-server npm run serve:prpl-server pwa-starter-kit.appspot.com

[@ritizbehl6386]

another React lol

[@random-code1]

So by the chart, 0 effort would have a good result as well 🤔 nice

[@jf-rr3gz]

Are you targeting "adults" with this presentation? I made it to about 8 minutes - is that good?

[@uphumor9128]

hahahhaha - that was funny

[@dancovrboski9135]

Сточе. Оти. Ме. Офрливте дансо врбоски

[@JasonFavrod1]

IDK, i think she was talking too fast.

[@CopernicoTube]

Still waiting for a web solution that allow web applications to be reliable and simple to develop out the box, as desktop/mobile or even server side does. The old Polymer make this promise and fail, miserably. I think that we should abandon web applications for good (utopia, I know) as the issue of updatable local apps was solved on mobile.