Тёмный

Import maps - HTTP 203 

Chrome for Developers
Подписаться 759 тыс.
Просмотров 18 тыс.
50% 1

Jake and Surma chat about a new feature proposal, Import Maps, that lets you alter how JavaScript modules are imported.
Feature proposal: goo.gle/2kslHND

Опубликовано:

 

7 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 72   
@jakearchibald
@jakearchibald 5 лет назад
I'm not sure why I escaped like that. The best and easiest way is just "".
@vorniy
@vorniy 5 лет назад
Recently encountered this problem, when disabling the minifier in my bundler and suddenly the inlined script contained a valid closing tag.
@RoterFruchtZwerg
@RoterFruchtZwerg 5 лет назад
just realized once again how flawed the script tag is. If it would just parse its content as regular HTML, like any other Tag does, you would just write </script> and be okay
@digioi
@digioi 5 лет назад
Why not document.createElement(‘script’) to avoid closing tag issues?
@dimkir100
@dimkir100 5 лет назад
@@digioi I assumed that this code will be inlined into HEAD , thus when it executes dom is not built yet completely (maybe BODY is not even yet in the dom). My guess was that this way they could use insertAdjacentHTML which would literally splice this tag right after the executing script tag and seems cleaner.
@jakearchibald
@jakearchibald 5 лет назад
@@RoterFruchtZwerg I think that'd be bad when trying to use things like < and && in inline script.
@googleplexer
@googleplexer 5 лет назад
This is the best show I've ever seen. I watch every episode that happens soon :). You are the best IT bloggers from the Internet. 🦀✌️🖖✊🤘👋✍️🔥🌊
@waldemarenns4874
@waldemarenns4874 5 лет назад
Love you guys. Thanks for the interesting talk and for the nice show-off, on when import maps get interesting.
@Nikich13v
@Nikich13v 5 лет назад
This is the greatest show I have ever seen! These people should get a raise!
@sc76399
@sc76399 4 года назад
Love it, especially as it prevents cache invalidation and bundles could host generate it
@tsortanidischristos412
@tsortanidischristos412 5 лет назад
Oh I've really waiting for importmaps since I watched the polymer 3 talk
@samuel.00
@samuel.00 5 лет назад
Love the out of focus glasses directly in front of the camera.
@teamgartz-motorsports6881
@teamgartz-motorsports6881 5 лет назад
I love it! Hope it proceed! The other way is to map the backend to resolve such requests. But this allows to have a static backend instead :)
@LegendaryJew
@LegendaryJew 4 года назад
This is going to be essential to good micro front ends that use a meta framework. Single Spa is amazing and heavily leverages this.
@rajsite
@rajsite 5 лет назад
The insertAdjacent* apis are neat! I was disappointed that none of them work with DocumentFragments though :/ I guess we would need a more generic insertAdjacentNode for that case.
@digioi
@digioi 5 лет назад
Its interesting that you can override external imports via scope, not entirely sure how fun it will be tracking down why some import fails, if there was some kind of console warning or something that would let you know your current import maps may cause issues with external imports. (provided your not using some kind of bundler that generates your import maps)
@alystair
@alystair 3 года назад
Wow this is groundbreaking and would drastically reduce build requirements, hope it gets implemented soon.
@BenjaminAster
@BenjaminAster Год назад
It's now implemented in all modern browsers!
@zackpi7874
@zackpi7874 2 года назад
best thumbnail ever
@OlleHellman
@OlleHellman 5 лет назад
Best thumbnail yet?!
@OlleHellman
@OlleHellman 5 лет назад
I like the proposal.
@chriswthomsonshetland
@chriswthomsonshetland 5 лет назад
Any further info on the offhand comment about not loading jQuery (or another framework) from a CDN? You seem to suggest that browsers are only caching on a domain level, and therefore won't use a copy of a CDN asset cached from another site? Can't find much info about this at all online.
@dassurma
@dassurma 5 лет назад
It’s called “double-keyed caching”. Safari has it and Chrome will ship it, too. It means there’s an isolated HTTP cache per origin.
@chriswthomsonshetland
@chriswthomsonshetland 5 лет назад
@@dassurma Thanks! Love the show :)
@chaos_monster
@chaos_monster 5 лет назад
What if I change the importmap script tag with JavaScript (e.g. an extension) to something else? Not sure yet, but this could create interesting cases and maybe even be a security issue? What do you think?
@eus9
@eus9 5 лет назад
If the site is vulnerable to and exploited by XSS already, why would the hacker change the import map?
@jakearchibald
@jakearchibald 5 лет назад
Good question! I imagine changing the import map would work until the first thing is imported, after which changes are ignored. I don't see a security issue.
@DrRobrez
@DrRobrez 5 лет назад
Love it
@AdamArgyleInk
@AdamArgyleInk 5 лет назад
reminds me of requirejs and the dep alias map we could make..
@YinonOved
@YinonOved 5 лет назад
interesting proposal, feels like one of those that get implemented immediately
@AssemblyWizard
@AssemblyWizard 5 лет назад
How can you do progressive enhancement for the import scheme?
@jakearchibald
@jakearchibald 5 лет назад
I guess you'd only use it in places where failure is acceptable.
@innernetfunhouse1161
@innernetfunhouse1161 5 лет назад
a package.json prevents the search up for node_modules at the level it is found.
@jakearchibald
@jakearchibald 5 лет назад
Only if that package.json contains a 'main' field, I think nodejs.org/api/modules.html#modules_all_together
@Krilllind
@Krilllind 5 лет назад
But if we let the browser load our import modules, wouldn't we loose the feature of tree-shaking the code not used in a lib and therefore increase the total "bundle size"?
@jakearchibald
@jakearchibald 5 лет назад
I think you'd still use a bundler, but with code splitting you still need some kind of module loader.
@AssemblyWizard
@AssemblyWizard 5 лет назад
what is the mime type of it?
@jakearchibald
@jakearchibald 5 лет назад
application/importmap+json
@victornpb
@victornpb 5 лет назад
Are comments allowed?
@RickBeacham
@RickBeacham 5 лет назад
Why not allow a user to download their favorite js libs/frameworks and css frameworks before they are requested from a website? For example: Jquery/Bootstrap.css are used by so many websites why not just download it when a user has access to reliable internet connection? They can be saved in a cache like folder for later usage for offline PWA apps. Maybe it would save time and data usage? I'm not sure if this feature exists already in Chrome?
@jakearchibald
@jakearchibald 5 лет назад
What you're talking about is kinda already done with shared CDNs. Given how many versions there are of library*versions, there isn't a lot of benefit.
@watfordjc
@watfordjc 5 лет назад
There is a browser extension called Decentraleyes.
@RickBeacham
@RickBeacham 5 лет назад
@@jakearchibald I understand. Thanks for the explanation.
@RickBeacham
@RickBeacham 5 лет назад
@@watfordjc Thanks!
@fredbluntstoned
@fredbluntstoned 5 лет назад
What do you say to people still running Internet Explorer 9 or 11? :D I would redirect them to outdatedbrowser.com ! :D
@LucasRweb
@LucasRweb 5 лет назад
That looks very similar to System.js and require.js
@LegendaryJew
@LegendaryJew 4 года назад
Lucas R SystemJS is a poly fill for this
@meridiansoftware6177
@meridiansoftware6177 5 лет назад
Isn't this feature just doing what Require.js does?
@victornpb
@victornpb 5 лет назад
Meridian Software yep, the map was called aliases
@ischmitty
@ischmitty 5 лет назад
It's AMD all over again!
@Theraot
@Theraot 5 лет назад
15:06 *Bad boys
@jakearchibald
@jakearchibald 5 лет назад
Whatcha gonna do, watcha gonna do when they call for you… GHOST BUSTERS!
@AssemblyWizard
@AssemblyWizard 5 лет назад
is it json or can it have comments?
@jakearchibald
@jakearchibald 5 лет назад
It's JSON
@CyberAcidPlanet
@CyberAcidPlanet 5 лет назад
Hmm, why don't just use manifest for that?
@CyberAcidPlanet
@CyberAcidPlanet 5 лет назад
Discussion: github.com/WICG/import-maps/issues/1
@jakearchibald
@jakearchibald 5 лет назад
As in the web app manifest? Using an external file for this stuff is bad for performance. Also, the manifest isn't designed to download urgently.
@CyberAcidPlanet
@CyberAcidPlanet 5 лет назад
@@jakearchibald Ah ok, makes sense.
@justfly1984
@justfly1984 5 лет назад
can it be minified?
@jooowtjuh
@jooowtjuh 5 лет назад
I think it can. It looks like json
@mika2666
@mika2666 5 лет назад
Yeah just remove the whitespace and newlines
@jakearchibald
@jakearchibald 5 лет назад
It's JSON, so it can be minified as much as JSON can.
@tsortanidischristos412
@tsortanidischristos412 5 лет назад
Although at the end we're all gonna bundle our app, so I guess this is useful mainly for development?
@jakearchibald
@jakearchibald 5 лет назад
Bundling everything is usually bad for performance, as you end up downloading loads of code that you don't need for the first interaction.
@tsortanidischristos412
@tsortanidischristos412 5 лет назад
I see what you mean, but seeing a request for every single file of my code or library in my network tab scares me a little
@ColinRichardson
@ColinRichardson 5 лет назад
But But But..... That thumb nail!
@dassurma
@dassurma 5 лет назад
I wish I remembered what happened 🤔
@9072997
@9072997 4 года назад
IMO, this is unnecessary complexity. This is a lot of trouble, and it seems like the only problem this solves that can't already be solved with tooling is cache invalidation.
Далее
Web animation gotchas - HTTP 203
20:10
Просмотров 23 тыс.
Cross-origin fetches - HTTP 203
23:42
Просмотров 39 тыс.
Men Vs Women Survive The Wilderness For $500,000
31:48
Will A Guitar Boat Hold My Weight?
00:20
Просмотров 68 млн
Is postMessage slow? - HTTP 203
21:09
Просмотров 22 тыс.
Importing JSON - ABANDONED - HTTP 203
15:14
Просмотров 27 тыс.
Old vs New JavaScript - HTTP203
15:33
Просмотров 41 тыс.
Elon's Big Bet On Tesla's Future | Optimus 2
18:07
Просмотров 21 тыс.
New Javascript Feature: Import Maps Explained!
14:34
Просмотров 2,8 тыс.
Handling updates offline-first - HTTP 203
17:40
Просмотров 18 тыс.
Streaming requests with fetch - HTTP 203
22:24
Просмотров 36 тыс.
Four silly browser hacks - HTTP 203
21:01
Просмотров 39 тыс.
Is reduce() bad? - HTTP 203
23:13
Просмотров 77 тыс.