Webpack and Workers - HTTP203
Skills:
Modern Frontend Stack70%
Key Takeaways
Explains Webpack and Workers in 2 minutes
Full Transcript
we need a name for the segment what what is it is it the 2 minute speed run of the web 2 minute speed run that's pretty good because I was thinking of like HTTP to a free into but it's just too many numbers then really isn't it drive it home so 2 minutes you're gonna talk about a thing and what you're going to talk about I'm gonna talk about my recent explorations with web heck and workers you have two minutes go work us yes I'm aware of them still I think this is a copy of exactly what we said in the previous episode but now imagine you want to have module loading in workers you can have that that's the import function but it's not available in workers anywhere yes yes so for nowt you can't okay but ok cool let's do something like roll up oh hi Pat where you basically transform the syntax into just like in lining the things or loading some with some other mechanism well cuz your input script the main threat has script tags so you can emulate the behavior yes I look into web pack and I was trying to build a little app it has logic in the worker and UI in the main thread and had some modules that were shared between the main thread and the worker oh right and this is something you can deal with because you can have you say your main page just including it as a script tag yeah or dynamic import and your worker can use that horrible import script synchronous function but it wasn't it so yes and my thought was what pet should figure this out right like you should see oh there's a shared code let's put this in a separate files using its comments drinking stuff so exactly it realizes how here's the common bit I into a separate file right from resolved you would think not quite so that's a slight difference so because in web pack you have entry points and these entry points are assumed that you take one of them at a time but with a worker you actually take an entry point and the worker entry point at the same time so there's a different assumption because you can actually between entry points usually webpack doesn't put common modules in a share say so this is when you're using webpack to do the work magic for you yeah what if you just do we've got two entry points one doesn't know that there are shared modules all these haven't figured out so now I have put in an issue in a more discuss with the webhead people how we can support workers because I feel like I want to make 2018 about workers so we need support in tooling for that that was very good timing because ah nicely done music to my ears nicely it's not as good Christmas if I set that off again do you want to just beat box and then we could dump that I was home I'll give you maybe ten maybe five seconds five four three two one
Original Description
The speed round is back! Surma has but two minutes to explain his recent exploration of Webpack and Workers to Jake. #HTTP203
Subscribe to Chrome Developers here: http://goo.gl/LLLNvf
Watch more HTTP203: https://goo.gl/bTQMrY
Listen to the HTTP203 podcast for a full hour conversation & more: https://goo.gl/LR7gNg
Itunes: https://goo.gl/cf2yRq
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Chrome for Developers · Chrome for Developers · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
Web Directions Code 2015 round up
Chrome for Developers
Maintainable Code - HTTP203
Chrome for Developers
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
The Guardian - Supercharged
Chrome for Developers
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
The Future of JavaScript - HTTP203
Chrome for Developers
Data Binding 101 -- Polycasts #28
Chrome for Developers
The Guardian part 2 - Supercharged
Chrome for Developers
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
Binding to Objects -- Polycasts #30
Chrome for Developers
Player FM - Supercharged
Chrome for Developers
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
Jake Beats Wikipedia - HTTP203
Chrome for Developers
Supercharged Observers! -- Polycasts #32
Chrome for Developers
Jai's Web blog - Supercharged
Chrome for Developers
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
Google+ Performance Improvement Comparison
Chrome for Developers
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
Binding to Arrays -- Polycasts #35
Chrome for Developers
HTTP2 - HTTP203
Chrome for Developers
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
Call For Submissions - Supercharged
Chrome for Developers
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
Highlights from Chrome Dev Summit 2015
Chrome for Developers
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers
More on: Modern Frontend Stack
View skill →Related Reads
📰
📰
📰
📰
I built a landing page with Three.js, vanilla JS, and zero frameworks — here's what I learned
Dev.to · Ayush Shekhar
Part 1: Why I Rarely Use useEffect Anymore (and what I use instead)
Dev.to · Alejandro
HTML Canvas Cheat Sheet for Pixel Art & Image Effects
Dev.to · lemon
Draw Pixel Art with Vanilla JS — A Step-by-Step Guide
Dev.to · lemon
🎓
Tutor Explanation
DeepCamp AI