PWA starter kit: build fast, scalable, modern apps with Web Components (Google I/O '18)
Вставка
- Опубліковано 1 жов 2024
- 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;
Google needs to buy Nintendo just so Monica can make references without worrying about copyright.
No. They will ruin it
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.
Anyone notice that she's actually wearing the...BANANA PANTS?
I thought the same the moment she says BANANA PANTS 😆
@@iamrohandatta The expression banana pants is a new one on me.
pwa-starter-kit -> 658MB on disk (after npm install), 550+ npm packages. Why does all starter kits need to be so massive?
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.
Good presentation, but I wish they would have placed that microphone better so she wouldn't be blowing into it all the time.
agreed lol.
Her presentations are always great
What a fun and great presentation! Monica is the best!!!
Such a great talk! Fun and informative all the way through.
"The web is pretty great". Yea, we deserve that. How many horrific years we lived.
Polymer/pwa-starter-kit Github repo:
github.com/Polymer/pwa-starter-kit
No longer updated, its dead now
So this talk is 90% about how a react-redux app works and 10% about the implementation of PWAs but with a cool presentation.
Yea i like here presentations its not boring very engaging
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
I'd wish I had public speaking skills like this!
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?
Did she NOT mentioned about service workers at all????
she did, multiple times...
Amazing presentation!!
Developping has never been so fun. :-)
Haha IE 11? I thought the IE has been replaced by Edge. IE sounds classic nowadays.😁
another React lol
PERFECT presentation WITH funky STYLE. braVVVooo!
Oh god. The Polymer team made a copy of React.
Marko Hrovatič I was thinking the same .... this is just React js
That's what I also thought!
Except not really, no.
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
Great idea to gamify PWA presentation :)
@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'.
:)
very google like----I mean office google--corporate google
would be nicer in vanilla
I can't believe this is already 2 years ago
"That's banana pants" - I'm stealing this. Thank you!
hahaha
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
.
If only there were 'the one good datepicker'
always love monica's presentation!
Thank you, it's very useful
What ever happened to polymer?
This women is great and presentation was perfect. Not like many other. This is one of the best PWA video.
who says banana pants??
only the best :P
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.
someone who wears Banana pants
Someone *wearing* banana pants!
Banana PWAnts
I love that presentation
ABC: Always Be Closing.
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!
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.
Сточе. Оти. Ме. Офрливте дансо врбоски
Is there any Update in Google I/O '19?
"mouth sound, it will get you anywhere" hmmmmm.
A game. Great. Lead down another garden path of programming ambiguity.
lol start in seconds? npm i takes like 3-20 min on my machine....
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.
just checked site out,,what is redux? go to redux page.... read it..repeat question.. what is redux?
wait a couple of days, visit redux page ...read .... what is redux?
looks like reinventing the react wheel
ten minutes in and im like, wait a minute ...
She talks ALOT! I like her already.
I do like them but why is google trying to push PWAs so hard
Nutella on Pancakes :) sweet video & very inspirational for the Polymer Project.
Web components are not available at webcomponents.org for Polymer 3.
From where do we use components to design pages.?
haven't seen support for safari yet. could you expand on this? thanks
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.
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.
Thank you Monica for another great presentation. Can't wait to try pwa-starter-kit for my side-projects.
Awesome 🔥! I think this is a great on-boarding resource for new Web Developers. Friendly and to the point, thank you Monica!
Please add links to github repos. Thanks
Love the analogy to video games...And now I remember how awesome the Zelda games are.
Thanks Monica and the Polymer team! I can't wait to get crackin on the new starter kit
Excellent Presentation
Great presentation 👍
How to use typescript with this awesome starter kit.
Is that React ?
Damn, that's neat advice and fun to watch.
Can we tdd?
3:1, awesome analogy. ABC
WoOoOoOoOoOoW G R E A T P R E S E N T A T I O N !
I got turned off when i saw html code inside the js. I really don't like it.
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.
Lol Banana Pants.. You're wearing banana pants.
This is one of those moments when I'm proud to be romanian :))
Cool! Du du du du du, boop boop boop!
I like chrome
Monica rocks
IDK, i think she was talking too fast.
1:58 lol yeah that's me~
Очень круто!)
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!
So by the chart, 0 effort would have a good result as well 🤔 nice
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.
She is an incredible speaker. Super engaging speaker.
hahahhaha - that was funny
Nice to see you again, Monica.
Hi why we need Lit html. There is React jsx works same as Lit Html.
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
What about iOS support?
Are you targeting "adults" with this presentation? I made it to about 8 minutes - is that good?
Lit