---
title: "A future without Webpack and an interview with Nicolás Bevacqua"
publication: "JavaScript Weekly"
issue: 430
published_at: "2019-03-29"
canonical_url: "https://javascriptweekly.com/issues/430"
---

This week's JavaScript news       

#430 — March 29, 2019 

[Read on the Web](https://javascriptweekly.com/issues/430)   

⚡️ We have another interview this week, this time with Nicolás Bevacqua of _Pony Foo_ fame at _the end of this issue._  

JavaScript Weekly 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/yr330yro0rckmita2d15.jpg)](https://alistapart.com/article/responsible-javascript-part-1)  

[Responsible JavaScript: Part I](https://alistapart.com/article/responsible-javascript-part-1) — Jeremy Wagner plots a course to avoid the unnecessary bloat and inaccessible patterns of current JavaScript trends. 

Jeremy Wagner   

[What You Should Know About JavaScript Arrays](https://thomlom.dev/what-you-should-know-about-js-arrays/) — It’s nice to see an article that essentially delivers on a lofty title. It goes into a lot of depth about all the different ways you can work with arrays. If you're an expert-level JavaScript developer, however, move on ↓ 

Thomas Lombart   [![\](https://copm.s3.amazonaws.com/10782630.png)](https://workers.dev/?utm_source=Cooperpress&utm_medium=display&utm_campaign=CooperpressJSW) 

[Build & Deploy Serverless Apps on a Global Cloud Network](https://workers.dev/?utm_source=Cooperpress&utm_medium=display&utm_campaign=CooperpressJSW) — Learn how to start writing serverless APIs in JavaScript, and reserve a custom subdomain for your next project. 

Cloudflare Workers sponsor   

[Pika/Web for a Future Without Webpack?](https://www.pikapkg.com/blog/pika-web-a-future-without-webpack) — Using an approach that's not without controversy, [@pika/web](https://github.com/pikapkg/web) can install npm packages that run natively in the browser. 

Fred K. Schott   

[Majestic: A Zero Config GUI for Jest](https://github.com/Raathigesh/majestic/) — An interesting tool to help make your JavaScript testing life a little easier. Try it now by running `npx majestic` in the folder of any project that uses [Jest](https://jestjs.io/) for testing (assuming you have `npm` installed). 

Raathi Kugarajan   

[Advanced Map Shading with JavaScript and WebGL](https://wwwtyro.net/2019/03/21/advanced-map-shading.html) — This is a really neat and thorough look at an interesting use for JavaScript: shading satellite imagery. The final result is beautiful. 

Rye Terrell   

['Keep JavaScript Dumb'](http://www.hyperorg.com/blogger/2019/03/08/keep-javascript-dumb/) — David, who coauthored the _Cluetrain Manifesto_ and has played [a significant role](https://cyber.harvard.edu/people/dweinberger) in US tech, thinks that JavaScript is being damaged by becoming harder to use by hobbyists and amateurs. He admits he’s probably wrong but it’s important to discuss this stuff. 

David Weinberger  

💻 Jobs  

[Senior JavaScript Developer (Remote)](https://witharsenal.com/jobs) — Our hardware/software product uses machine learning/AI to help DSLR/mirrorless users get better photos. 

Arsenal   

[Find A Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-javascriptweekly&utm_term=tech&utm_content=grouped&utm_campaign=ad-77584) — Vettery specializes in dev roles and is completely free for job seekers. 

Vettery  

📘 Tutorials and Opinions  

[An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods](https://css-tricks.com/an-illustrated-and-musical-guide-to-map-reduce-and-filter-array-methods/) — A look at how to leverage these three useful JS array methods. 

Una Kravets   

[Experimenting with the Streams API](https://deanhume.com/experimenting-with-the-streams-api/) — You probably associate streams with Node.js, but did you know they’re also supported in _browsers_? 

Dean Hume   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/a99yyd9nukwrhsnl8tcu.jpg)](https://dev.to/jfet97/the-shortest-way-to-conditional-insert-properties-into-an-object-literal-4ag7)  

[The Shortest Way to Conditionally Insert Properties into an Object Literal](https://dev.to/jfet97/the-shortest-way-to-conditional-insert-properties-into-an-object-literal-4ag7) — A dig into how a particularly short bit of confusing-looking JavaScript works. I’m not sure I like it, but the explanation is good. 

Andrea Simone Costa   

[The Pitfalls of `async`/`await` in Array Loops](https://t.co/ZmOht8vECS) — Using `async`/`await` while looping through arrays seems simple, but there’s some non-intuitive behavior to look out for. 

Tory Walker   

[Build a Slack App in 10 minutes with MongoDB Stitch](https://www.mongodb.com/blog/post/build-a-slack-app-in-10-minutes-with-mongodb-stitch?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship&utm_content=20190329&utm_medium=display&utm_source=javascriptweekly) — Want to extend Slack with chat bots and additional commands? Check out this tutorial to learn how to build a Slack app in 10 minutes with MongoDB Stitch. 

MongoDB sponsor   

[Creating a Reusable Pagination Component in Vue.js](https://css-tricks.com/creating-a-reusable-pagination-component-in-vue/) 

Mateusz Rybczonek   

[How to Remove Duplicates from an Array in JavaScript](https://blog.bitsrc.io/how-to-remove-duplicates-from-an-array-in-javascript-b4b2fcf3530e) — Leaning on ES6’s set support seems to be the quickest way. 

Maciej Cieślar   

[Routing in React with Hooks: A New Approach to Routing?](https://parastudios.de/modern-and-clean-routing-with-hooks/) — [hookrouter](https://github.com/Paratron/hookrouter) has some compelling advantages compared to existing routers. 

Christian Engel  

🔧 Code and Tools  

[Tone.js: An Audio Framework for Interactive Music in the Browser](https://github.com/Tonejs/Tone.js) — There are lots of [examples](https://tonejs.github.io/examples/) of the main features but also [full scale demos](https://tonejs.github.io/demos) to enjoy. 

Yotam Mann   

[A Much Faster Way to Debug Code Than with Breakpoints or console.log](https://wallabyjs.com/?utm_source=javascriptweekly&utm_medium=sponsored_newsletter&utm_campaign=javascriptweekly&utm_content=javascriptweekly) — Wallaby catches errors in your tests and code and displays them right in your editor as you type, making your development feedback loop more productive. 

Wallaby.js sponsor   

[Vue DevTools 5.0: A DevTools Extension for Debugging Vue Apps](https://github.com/vuejs/vue-devtools) — A significant new release ([5.0.0](https://github.com/vuejs/vue-devtools/releases/tag/v5.0.0)) that adds a variety of new features including new tabs and NativeScript support. For [Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) and [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd). 

Vue.js   

[eslint-plugin-unicorn: Various Awesome ESLint Rules](https://github.com/sindresorhus/eslint-plugin-unicorn) — Includes 34 different rules for things like enforcing a case style for filenames, disallowing `process.exit()`, avoiding unsafe regexes, and more. 

Sindre Sorhus et al.   

[Recommended VS Code Extensions for Angular Developers](https://johnpapa.net/rec-ng-extensions/) 

John Papa   

[Leadership Training for Engineers: Free Talk - Sign Up Today](https://hub.bignerdranch.com/big-nerd-ranch-webinars?utm_source=ad&utm_medium=banner&utm_campaign=2019_03_JavaScriptWeekly&utm_content=MotivaimCampaign2) 

Big Nerd Ranch sponsor   

[📊 Cube.js: An Open Source Analytics Framework](https://github.com/statsbotco/cube.js) — For building things like internal BI tools or customer dashboards. There’s [a guide to its use here](https://statsbot.co/blog/cubejs-open-source-dashboard-framework-ultimate-guide/). 

Statsbot   

[React LoadCon: Use Your Favicon to Show Progress](https://foreseaz.github.io/react-loadcon/) — Turns your page’s favicon (as displayed in the browser tab) into a donut or circle that can indicate progress. [GitHub repo](https://github.com/foreseaz/react-loadcon). 

foreseaz       ![Nicolás Bevacqua](https://res.cloudinary.com/cpress/image/upload/r_max/dju6iyi6ew2gbfzhmjqs.png) 

💬 A Q&A with…
Nicolás Bevacqua
the author of _Mastering Modular JavaScript_  

Nicolás Bevacqua is a long-time JavaScript developer who has authored multiple books and has recently published [Mastering Modular JavaScript](https://ponyfoo.com/books/mastering-modular-javascript). We caught up with him to ask a few questions about modular JavaScript development in general: 

What's your one paragraph pitch for _Mastering Modular JavaScript_? 

Keeping complexity in check is hard. Today, more and more applications are turning to front-end JavaScript frameworks, and many choose React. You might've noticed how React apps are structured as acyclical component trees. Those trees turn out to be ideal in not just encapsulating code, but also in encouraging modularity. Writing modular JavaScript is, in no small part, a matter of writing code that lends itself to writing other, small pieces of software. 

What's the most common mistake you see in relation to modularity? 

At every level of an application, such as modules, functions, blocks, and individual expressions, there's room for modular thinking. One of the most common mistakes is not splitting modules (or functions, or blocks) as they grow larger and larger. Even in otherwise modular applications, it's not uncommon for modules to become dauntingly large. Prune your trees every so often! 🌳 

What three resources do you consider a must-read for developers looking to improve the structure of their code? 

One of the most influential works that I've read on structuring code is definitely [The Twelve Factor App.](https://12factor.net/) It has definitely shaped how I think about and write open-source software. 

Performance mindedness is useful when it comes to reasoning about whether something belongs critically in client-side code or could be dealt with through a web service. [High Performance Browser Networking](https://www.amazon.com/High-Performance-Browser-Networking-performance/dp/1449344763/) helps you respect the user and encourages transmitting fewer bytes. 

Having an interest in security also helps, as you're more likely to be on the lookout for exploitable angles like unescaped or poorly sanitized user inputs. [The Tangled Web](https://www.amazon.com/Tangled-Web-Securing-Modern-Applications/dp/1593273886/) is a great book in that space. 

If you could get JavaScript developers to all adopt the same piece of advice at once, what would it be? 

_Everyone?_ Stop using webpack _*poof!*_ 🔥 

You're the face behind Pony Foo — what's the latest? 

We're aiming to reinvent Pony Foo as one of the web developer's go-to platforms, like CSS-Tricks or Smashing Magazine are. We already have quite a few articles lined up and we're on [the lookout for (paid!) guest authors!](https://ponyfoo.com/contributors/join-us)   

Nicolás Bevacqua runs [Pony Foo](https://ponyfoo.com/) and is a JavaScript developer at Elastic.          

Curated by [Cooperpress](https://cooperpress.com/) and [Peter Cooper](https://twitter.com/peterc). 

'JavaScript' is a trademark of Oracle Corporation in the US
We are not endorsed by or affiliated with Oracle. 

[Change your email address](https://javascriptweekly.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://javascriptweekly.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom