Build Processes, Totally Tooling Tips (S2, Ep 5)

Chrome for Developers · Intermediate ·📰 AI News & Updates ·10y ago

Key Takeaways

Discusses the importance of build processes in web front-end projects and how to set them up

Full Transcript

[Music] so build processes are important um important because when you want to be fast you have to sort of give up the things that are slowing you down t-shirt t-shirt it's a t-shirt slogan love it he says wearing a yman t-shirt product placement but you are you completely right like things like minifying your CSS and your JavaScript um optimizing images like all of that stuff is really laborious if you have to do it manually so getting in your build process makes total sense because just whenever you do a build of your site it's just done taken care of yeah the sort of this sort of fits into um my three tiers of optimization tooling should I should I should make a pamphlet I feel like an advert is about to start playing that's what it feels like right now it's life advice the difference um okay so there's sort of a baseline of tools that everybody should be doing these days yeah like hash ihate you know data roaming charges I don't want anyone shipping a thousand images down the line so the Baseline is you should be at least minifying your Styles um in your JavaScript optimizing your images um using compression on the server side using like uh acing scripts leverage caching yep we' redirect so that's stuff that's the Baseline yeah then we've got stuff that you and I have been exploring a lot lately which is sort of get fast and stay fast tools like things that will help you inline your critical path CSS so you can improve first render yeah um things that will help you remove unus CSS like a ton of those those things what I I'm finding myself doing is I'm using the bill process like building out custom little things where basically I can still control what the critical path is and the build price is just helping me manage it like I know there are build pro steps where it's like it'll do everything for you and it's like magic and that scares me because I don't feel like I understand it enough to know whether those tools are doing the right thing or not yeah so I'm still in like a learning phase but I I'm using the build process just to make it easier for me to explore so there's web starter kit there's also polymer starter kit which is very similar to web starter kit except it's got extra plugins specific to POA like vulcanized and things like that but then yman is basically like you can just go in and it'll ask you what like generator you want to use is what they called where you can then just generate any style of project so if you wanted to use something like angular or react or whatever new hotness is out there there's chances are there's a generator that will give you a Bild process already for those things yeah exactly and like one thing I find so we've got all of the Baseline performance optimization is pretty much covered by web starter kit and if you're if you're like one thing I find a lot of uh agencies doing is that they'll they'll use yen to scaffold out their projects and they'll go into we and they take a look and say okay well we're interested in the image optimization parts or the script modification parts we're just going to steal like 70% of this file and just like Drop it into our project and that's that's perfectly fine you know you pick and choose what makes sense to you so the way that I've started doing this now and I know you kind of don't agree with this approach but I just going to walk out yeah you should but it so I have one gulp file that basically um you can do a thing like require directory and then any Javascript file within that directory it will basic basically take the gulp tasks from those each individual files and then you can basically use them as you would like in just one big long gulp file and the reason I'm doing that is you can split it out into like Styles and scripts and images like each section will deal with its own thing and then I can copy those files into a new project delete any old ones that I don't want and just change the directories and it's like a really nice way of getting reuse out of my go files cuz before when I had big ones everything would just become messy it'd be hard to maintain or understand like where problems were whereas when I've got them in multiple files everything just sort of becomes much easier to manage and maintain and share you've been demoted from colleague to desk occupant H um this approach is actually pretty legit if um if if you're finding that you've got a really really long G file splitting them out totally makes sense the reason we haven't done it in some of our boiler Play Projects is that you know for beginners you don't want them to have to like think about one other thing and it also gets a little bit trickier to debug if you've got you know multiple tasks and different files that depend on each other it's not a whole lot more but it's just another thing you got to think about yeah like this is where I always get to a we point of like best practice versus like ease of use yeah and I always tend to go for best practice cuz like you ever look at um any of the Native platforms they always just say this is the right way of doing something for this platform or this IDE or library or whatever there's no like Middle Ground where you could do something because it's easier so no that's I'm not say you're wrong but it's totally fair I remember when we were like a little while ago you gave me um a rundown of one of your your presentations and it was one of the bits was on build processes and you were like everyone should just use grunt actually gulp is going out it's new kid on the Block it's kind of cool everyone should just use gulp actually there's this new thing that's kind of coming out called broccoli that's also a bill process then again mpm scripts is also coming maybe use that yep and in my head I realized this was at the time where I just learned Grunt and I was switching over to gulp because it seemed like that that was getting used a lot and I realized that basically all of the web tooling ecosystem is basically a Game of Thrones where the minute I fall in love with one it's going to die and be replaced so there's a bit of me that feels like I should just never get attached to any of my tools because Sooner or Later by getting attached I'm almost dooming it [Music]

Original Description

A build process is vital to any web front end project, it saves you time, implements best practice with ease and is easy to set up with all the existing boilerplate projects. Matt & Addy discuss the main projects and how they use a build process on a day to day basis. Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7 Links for this episode: Yeoman: http://yeoman.io Gulp: http://gulpjs.com Grunt: http://gruntjs.com Web Starter Kit: http://wsk.io Polymer Starter Kit: https://developers.google.com/web/tools/polymer-starter-kit/ Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 45 of 60

1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
57 Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

Related Reads

📰
xAI cut a published rate from $0.05 to $0.04 (-20%)
xAI reduces its published rate by 20% from $0.05 to $0.04, learn how to analyze pricing changes and their impact
Dev.to · The Pricing Diff
📰
AI slop is good for business if you know what you're doing
Embracing AI imperfections can be beneficial for businesses that understand how to leverage them effectively
The Register
📰
Did a Human Really Become a Dog? — The AI Miracle Behind the Viral Story
Discover how AI can create realistic transformations, making it difficult to distinguish reality from fiction
Medium · AI
📰
Token Prices Fell 214x Since GPT-4. Enterprise AI Budgets Grew 483% Anyway.
Despite token prices falling 214x since GPT-4, enterprise AI budgets have grown 483% due to increasing inference costs and demand
Medium · AI
Up next
Since February, Reddit has lost almost half of its keyword rankings.
Edward Sturm
Watch →