Fri Jul 07 2023 08:35:35 GMT+0000 (UTC)https://survivejs.com/RelativeCI - In-depth bundle stats analysis and monitoring - Interview with Viorel Cojocaruarelativeciindepthbundlestatsanalysisandmonitoringinterviewwithviorelcojocaru2023-07-07t00:00:00z2023-07-07T00:00:00Z<p>In terms of development productivity, Continuous Integration (CI) has become a common technique across development teams across the world.</p>
<p>In this article, I'll interview <a href="https://twitter.com/vio">Viorel Cojocaru</a> about the topic to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/b3fc8f72b34d2d56bf44c7d3b58f1785?s=200" alt="Viorel Cojocaru" class="author" width="100" height="100" /><figcaption>Viorel Cojocaru</figcaption></figure></p>
<p>Hi! I am Vio, the founder of <a href="https://relative-ci.com">RelativeCI</a> and the maintainer of <a href="https://github.com/relative-ci/bundle-stats">bundle-stats</a>. I started programming for the web over 15 years ago with Java, PHP, and HTML/CSS/Javascript. In the last ten years, I've worked on web applications with React/Preact/Angular and Typescript/GraphQL/Node.js.</p>
<p>When I'm not coding, I enjoy spending time with family and friends outdoors, exploring southern Spain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_relativeci_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_relativeci_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>RelativeCI</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_relativeci_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>RelativeCI is a web service that helps developers to optimize and fix web application bundles before shipping to production by analyzing and monitoring every build.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_relativeci_-work-" id="how-does-_relativeci_-work-"></a><span class="text">How does <em>RelativeCI</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_relativeci_-work-">#</a></h2>
<p>RelativeCI agents (<a href="https://github.com/relative-ci/agent">webpack plugin</a>, <a href="https://github.com/relative-ci/agent">CLI</a>, <a href="https://github.com/relative-ci/agent-action">GitHub action</a>) extract, validate, and filter the bundle stats during the CI build task and send it to the service along with the build information. The service generates the bundle-stats report, compares it to the baseline report, and shows the impact of the change on the web bundle.</p>
<p><figure><img src="/e6fa3ebbbb5a2206be1db82df94e0b80.png" alt="Report assets" class="" width="" height="" /><figcaption>Report assets</figcaption></figure></p>
<p>You can review the report summary directly on GitHub (pull request comment, check report, status review) or Slack. Click on any insight/metric link to navigate directly to the corresponding section of the report.</p>
<p><figure><img src="/64561a47ca1053f31e77c84a753f4bca.png" alt="GitHub Pull Request comment" class="" width="" height="" /><figcaption>GitHub Pull Request comment</figcaption></figure></p>
<p><figure><img src="/b2255dd33b1f2d3d583ea46fdc9935e9.png" alt="Slack notification" class="" width="" height="" /><figcaption>Slack notification</figcaption></figure></p>
<p>You can also monitor changes over extended periods by exploring the project insights or the metric insights.</p>
<p><figure><img src="/f24b5f2863f8fccf02244d33d39800d6.png" alt="Project insights" class="" width="" height="" /><figcaption>Project insights</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_relativeci_-differ-from-other-solutions-" id="how-does-_relativeci_-differ-from-other-solutions-"></a><span class="text">How does <em>RelativeCI</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_relativeci_-differ-from-other-solutions-">#</a></h2>
<p>RelativeCI generates an in-depth bundle report with insights and metrics and compares assets, modules, and packages with the baseline report. The report allows us to quickly determine the cause of a change during the code review phase without having to rebuild and re-analyze older versions. Thanks to the report, you can:</p>
<ol>
<li>Notice regressions including<ul>
<li>large assets</li>
<li>duplicate packages</li>
<li>new direct or transitive packages</li>
</ul>
</li>
<li>Identify opportunities for optimization such as<ul>
<li>extract async chunks</li>
<li>improve commons chunks</li>
<li>replace large dependencies</li>
</ul>
</li>
</ol>
<p>Depending on the project's needs, you can set up dynamic conditions to get the report summary via a Slack notification or trigger the GitHub review flow.</p>
<p><figure><img src="/76e872425bcb69df64c5b86b87eb621e.png" alt="Review pending" class="" width="" height="" /><figcaption>Review pending</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_relativeci_-" id="why-did-you-develop-_relativeci_-"></a><span class="text">Why did you develop <em>RelativeCI</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_relativeci_-">#</a></h2>
<p>While migrating the build flow from Grunt/Gulp to webpack for a half dozen projects, I followed a manual process that involved running long build tasks, saving the webpack assets and modules stats data into spreadsheets, and comparing the results. It was error-prone and time-consuming, and I had to repeat the process multiple times for every change.</p>
<p>To automate the process, I built an open-source tool that compared multiple webpack stats and generated a standalone report: bundle-stats. To allow the team to proactively fix or optimize the web application bundle before shipping to production, we needed to continuously analyze the bundle stats as part of the CI flow and surface the report summary directly on GitHub.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We recently started working on bundle-stats v5. The plan for the new major version is to improve the support for Rollup & Vite, add the foundation for esbuild/parcel support and start exploring the module & package dependency graph. Also, we are working on making it easier to monitor and set up monorepos. <a href="https://relative-ci.com/roadmap">Our roadmap is publicly available online.</a></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_relativeci_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_relativeci_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>RelativeCI</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_relativeci_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The web platform increased capabilities and performance, and the modern frameworks and tools empower us to build web applications that solve more problems for our users, at scale, with better performance, UX, and DX. At RelativeCI, we are seeing our users build web applications that are becoming more complex, getting closer in terms of functionality with native applications: no/low code editors, design tools, programming playgrounds, productivity tools, home automation platforms, and so on.</p>
<p>I expect this trend to accelerate even more when implementing other capabilities at scale (for example, Web Assembly). I am amazed by the progress made by the front-end ecosystem in recent years and excited to see what new projects will emerge.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Modern web development stack can appear intimidating at first. Starting with the fundamentals (HTML, CSS, Javascript) can help create a solid base and speed up the learning process for the latest tools, libraries, and frameworks.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://github.com/sokra">Tobias Koppers</a> - Turbopack/Webpack</li>
<li><a href="https://github.com/devongovett">Devon Govett</a> - ParcelJS, React Aria Kit, LightningCSS</li>
<li><a href="https://github.com/devongovett">Miško Hevery</a> - Qwik, Angular</li>
<li><a href="https://github.com/hardfist">hardfist</a> - rspack</li>
<li><a href="https://github.com/zkochan">Zoltan Kochan</a> - pnpm</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you have any questions, please feel free to reach out on <a href="https://twitter.com/vio">Twitter</a> or via <a href="mailto:vio@relative-ci.com">email</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Vio! I like your fresh take on a CI and I am sure many developers will find your solution useful in their work.</p>
<p>To learn more about RelativeCI, consider the following resources:</p>
<ul>
<li><a href="https://relative-ci.com">RelativeCI homepage</a></li>
<li><a href="https://relative-ci.com/documentation/setup/install-github-application">RelativeCI - How to get started</a></li>
<li><a href="https://twitter.com/relative_ci">RelativeCI Twitter account</a></li>
<li><a href="https://github.com/relative-ci">RelativeCI GitHub</a></li>
</ul>
Future Frontend - A new conference to reimagine the future of the frontend - Interview with Juho Vepsäläinenafuturefrontendanewconferencetoreimaginethefutureofthefrontendinterviewwithjuhovepsalainen2023-01-30t00:00:00z2023-01-30T00:00:00Z<p>For a conference organizer, one of the hardest things to do is to keep your conference relevant. That is exactly the problem we faced with <a href="https://react-finland.fi/">React Finland</a>. As a result, we decided to pivot from React into frontend. <a href="https://futurefrontend.com/">Future Frontend</a> conference was born as a result.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>I'm Juho, the founder of this site and also the founder of the organization behind React Finland and Future Frontend. Lately I've been working on a new tool called <a href="https://gustwind.js.org/">Gustwind</a> to enable rapid creation of websites but that's another story.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_future-frontend_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_future-frontend_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Future Frontend</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_future-frontend_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://futurefrontend.com/">Future Frontend</a> is a new frontend focused conference that aims to imagine the future of the space by bringing together authors of contemporary tools and services such as <a href="https://astro.build/">Astro</a>, <a href="https://qwik.builder.io/">Qwik</a>, <a href="https://www.solidjs.com/">Solid.js</a>, and <a href="https://www.jsdelivr.com/">jsDelivr</a>. That's not all of course and we run with the tried and true format of React Finland where we organize the conference week into workshop days (6-7.6) and single track conference (8-9.6).</p>
<p>Through experience we found out that it makes a lot of sense to compose conference days out of themed sessions as that allows the speakers to build cohesive wholes and make sure their content fits together. This time around, we went with two speakers per session to allow interaction with the audience in the 1.5 hour sessions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-_future-frontend_-offer-" id="what-does-_future-frontend_-offer-"></a><span class="text">What does <em>Future Frontend</em> offer?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-_future-frontend_-offer-">#</a></h2>
<p>When we had to make a decision whether to run React Finland one more time or not, we realized that although it would have made sense business-wise, it was not a conference we would like to participate anymore. As a topic, React has become stable and mature meaning there is less space for radical innovation in terms of topics and content. It is from this background that the idea for the Future Frontend conference was born.</p>
<p>We have chosen both workshops and speakers from emerging topics that are shaping the field. You'll learn about topics such as green and edge computing, universal design systems, audio, and security to mention some.</p>
<p>In case you cannot make it to Finland, we'll make sure to stream the content online so you have access to it. That is missing a big part of the experience, though, as often the real conference happens between the talks and outside of the official program. Given the event is held at Summer, you'll have a great chance to experience Finland at its best.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_future-frontend_-differ-from-other-events-" id="how-does-_future-frontend_-differ-from-other-events-"></a><span class="text">How does <em>Future Frontend</em> differ from other events?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_future-frontend_-differ-from-other-events-">#</a></h2>
<p>Future Frontend is one the few developer conferences held in Finland. We also want to keep the conference relatively small and this time around our aim is to reach 200-250 developers as that would make it viable to run the event again next year. Going with a new brand and concept is always a risky so I can only hope the new approach resonates with both the local and global market.</p>
<p>This time around, one of our differentiating factors has to do with the focus on future themes and speakers that represent the top of the field. We went with fewer speakers than usually but I believe this is a good thing as it is giving more space for the speakers that join our event.</p>
<p>I believe single track is a good way to run events as it gives everyone a consistent experience. The benefit of having multiple tracks is that you have more to choose from as an attendee but at the same time I think I may be able to surprise you a couple of times even in this model.</p>
<p>Our themed sessions have proven successful in the past and talks fitting to each other can illuminate a topic more than an individual talk ever could.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-arrange-_future-frontend_-" id="why-did-you-decide-to-arrange-_future-frontend_-"></a><span class="text">Why did you decide to arrange <em>Future Frontend</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-arrange-_future-frontend_-">#</a></h2>
<p>As mentioned, we had to decide whether or not to keep on running React Finland. The topic of frontend is close to my personal interests and after I drafted an initial plan for the event, the rest of the organizer group resonated with the idea. That sealed the deal as we decided to go forward with the new concept.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p><a href="https://futurefrontend.com/blog/ff23/">We announced the conference</a> recently and now our target is to sell the early bird tickets and some of the workshop ones. We have tried to keep the pricing reasonable even with the ongoing inflation. To get most of the value from the event, I suggest participating in a workshop or two if you can fit it to your schedule. Also, if you are coming from abroad, take a couple of days to enjoy the Summer magic of Finland.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_future-frontend_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_future-frontend_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Future Frontend</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_future-frontend_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think frontend has a bright future as there is plenty of room for innovation. I expect the next generation frameworks to address issues, such as page size and JavaScript loading. We can do the same we do today but in a far more optimized manner. I expect artificial intelligence to be a part of the development as it will allow faster development of variants. It is only a matter of time until we see assisted tooling leveraging the latest breakthroughs of the field.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Focus on the basics. Even as frameworks and tools change, basic ideas behind HTML, JavaScript, and CSS remain roughly the same. There are subtle changes each year but that does not change the fundamentals and the value of understanding those.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I hope you consider joining the conference or at least check out the content online later. One easy way to keep in touch with it is to <a href="https://twitter.com/future_frontend">follow Future Frontend at Twitter</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I can only hope <a href="https://futurefrontend.com/">Future Frontend</a> is a success. The formula we discovered with React Finland keeps on going with the new event and it is definitely a conference I would enjoy visiting as an attendee or a speaker.</p>
Console Cat - Privacy-friendly CLI telemetry in less than five minutes - Interview with Matt Evensonaconsolecatprivacyfriendlyclitelemetryinlessthanfiveminutesinterviewwithmattevenson2022-07-28t00:00:00z2022-07-28T00:00:00Z<p>As an open source developer of Node.js command line tools, you often have the question of which versions are being used and how.</p>
<p>To solve the problem, Matt Evenson developed a service called <a href="https://www.consolecat.dev/">Console Cat</a>. Read on to learn more about it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>I'm Matt, one of the founders of Console Cat. I've been writing full-stack JS for a few years, including at companies like Robinhood and Retool.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_console-cat_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_console-cat_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Console Cat</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_console-cat_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Console Cat makes it easy to see how your Node.js scripts and command-line interfaces (CLIs) are being used.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_console-cat_-work-" id="how-does-_console-cat_-work-"></a><span class="text">How does <em>Console Cat</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_console-cat_-work-">#</a></h2>
<p>After you sign up on <a href="https://consolecat.dev/">Console Cat's website</a>, we give you a short code snippet to paste into the entrypoint of your Node.js CLI. Console Cat's SDK then collects the telemetry for every execution of your CLI and visualizes it for you in a dashboard on our site.</p>
<p>Under the covers, the <a href="https://github.com/console-cat/sdk">Console Cat SDK</a> works by accessing properties on Node's <code>process</code> object, such as <code>process.argv</code> for the flags and <code>process.exitCode</code> for the exit code.</p>
<p>Since we need to know the exit code and duration, the SDK adds an exit hook to the Node.js process so that we can run some code just before the CLI exits.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_console-cat_-differ-from-other-solutions-" id="how-does-_console-cat_-differ-from-other-solutions-"></a><span class="text">How does <em>Console Cat</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_console-cat_-differ-from-other-solutions-">#</a></h2>
<p>As far as we know, Console Cat is the first analytics product built from the ground up for CLIs.</p>
<p>Before Console Cat, if you wanted to collect usage information on your CLI, your best option was to retrofit a website analytics service like Google Analytics or Mixpanel to work for CLIs.</p>
<p>Of course, these services are meant for websites and mobile apps, not scripts, so you have to make your events and dashboards, which is a pain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_console-cat_-" id="why-did-you-develop-_console-cat_-"></a><span class="text">Why did you develop <em>Console Cat</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_console-cat_-">#</a></h2>
<p>We built Console Cat because we love command line tools and think that command line interfaces would benefit from data-driven decisions like websites.</p>
<p>For example, I've written one-off, buggy scripts at work that became critical to my coworkers' workflows, but I didn't realize that until later. Had I known how much they were being used, I would have put in the effort to make the scripts more robust. That's the kind of insight that Console Cat provides.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We launched with support for Node.js and are working on rolling out Python support very soon. Together, those two languages will allow us to support the majority of CLIs and scripts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_console-cat_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_console-cat_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Console Cat</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_console-cat_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I don't pretend to know the future, especially since we're an early startup, but I can tell you that we are passionate about bringing the type of tooling we have for web development to the command line.</p>
<p>If we're talking about general web development trends, I think Typescript will continue to gain popularity (Console Cat is a full-stack TS shop). I'm also very interested in the proliferation of WebAssembly and have toyed around with <a href="https://yew.rs/">Yew</a>, Rust's version of React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Expect to spend a lot of time debugging. Google every error message you get until you know how to fix it.</p>
<p>As a beginner, it's easy to get discouraged because you try following a tutorial and something is wrong with your environment, and the code won't run as expected. I gave up a few times early on when I tried to learn programming because of that very thing. Just keep googling until it works. The prize is worth it.</p>
<p>The other thing I would recommend is to shorten your feedback loop as much as possible. For example, if you're learning HTML and CSS, make it so that you see your changes reflected in the browser immediately. The shorter the feedback loop, the quicker you will learn.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>My friend Harshal wrote <a href="https://harshal.sheth.io/2022/01/31/webassembly.html">a great article on WebAssembly</a>. I think he'd be a great one to interview.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p><a href="mailto:matt@consolecat.dev">Drop me a line</a> if you have any questions. I love talking to other devs about tools, learning, or anything else!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Matt! I can see the value of plugging in the service to a CLI as it provides insight into its use and can further motivate its development.</p>
<p>To get started, <a href="https://www.consolecat.dev/">head to Console Cat's website</a>. You can also <a href="https://github.com/console-cat">find the project on GitHub</a>.</p>
Nhost - Backend-as-a-Service with GraphQL for modern app development - Interview with Johan Eliassonanhostbackendasaservicewithgraphqlformodernappdevelopmentinterviewwithjohaneliasson2022-01-27t00:00:00z2022-01-27T00:00:00Z<p>Developing a full-blown web application, including a backend, can be quite an undertaking for a single developer or a small team. Several solutions have appeared in the market during the last few years that make this less daunting.</p>
<p>To learn about one, I am interviewing <a href="https://twitter.com/elitasson">Johan Eliasson</a>, the founder of <a href="https://www.nhost.io/">Nhost</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>Hey, I'm Johan, Co-Founder & CEO of Nhost. I am from Sweden and love the intersection between business, engineering, and web development. I'm amazed about the optimization that can be done with technical tools and services in the real world.</p>
<p>Ever since I learned to program 14 years ago, I've always been building projects both in my day job and with side indie hacker projects, which I love.</p>
<p>I also like working out (gym & running), gaming, reading books, and spending time with friends and family.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-nhost-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-nhost-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Nhost</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-nhost-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Nhost is Backend-as-a-Service (BaaS). We're doing for the backend what Netlify and Vercel are doing for the frontend.</p>
<p>Nhost is especially suitable for developers who want to move fast and focus on their core business rather than spending time on setup and configuration.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-nhost-work-" id="how-does-nhost-work-"></a><span class="text">How does <em>Nhost</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-nhost-work-">#</a></h2>
<p>We manage thousands of backends for our customers. Every backend consists of:</p>
<ul>
<li>Database (Postgres)</li>
<li>GraphQL (Hasura)</li>
<li>Authentication</li>
<li>Storage</li>
<li>Functions</li>
</ul>
<p>That is the core of our offering.</p>
<p>We've been very thoughtful when choosing the different parts of the stack to ensure they are as productive, timeless, and scalable as possible.</p>
<p>On top of that, we provide JavaScript, TypeScript, and Dart SDKs to make it easy to integrate our services. We also have specific libraries to make it easy to use Nhost with React, Next.js, Vue, Nuxt, Flutter, and Apollo.</p>
<p>I mentioned earlier that Nhost is for the backend, what Netlify and Vercel are for the frontend. Many developers have fallen in love with pushing code and letting the platform take care of deploying everything automatically with services like this.</p>
<p>We do the same but for the backend, which means we have a GitHub integration that automatically deploys your backend, database migrations, and functions.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>We also have a good summary of our offering in a repository on Github: <a href="https://github.com/nhost/nhost">https://github.com/nhost/nhost</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-nhost-differ-from-other-solutions-" id="how-does-nhost-differ-from-other-solutions-"></a><span class="text">How does <em>Nhost</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-nhost-differ-from-other-solutions-">#</a></h2>
<p>There are three options if you don't use Nhost for your backend:</p>
<ol>
<li>Building your own backend</li>
<li>Stitch together different services to your own backend (ex, ElephantSQL + Auth0 + Fauna + S3 + AWS Lambda)</li>
<li>Using another BaaS</li>
</ol>
<p>If we start with the first one, building your own backend takes a lot of time and requires technical expertise in infrastructure, security, and maintainability. Developers can spend weeks just setting up a backend for a new app while still not providing any value for end-users or the business.</p>
<p>Stitching together different services is another option but is very time-consuming, and every combination of services is different, making it hard to do. In theory, it sounds good, but in reality, you end up with siloed services with different pricing, different SDKs, and different level of maturity. What you'll miss is the unified experience across your backend.</p>
<p>The third option has gained a lot of traction lately — using a BaaS to manage your backend that includes the building blocks that almost every app needs. <a href="https://firebase.google.com/">Firebase</a> has been dominant lately, but we have begun to see more modern and open source alternatives appear: <a href="https://supabase.com/">Supabase</a>, <a href="https://www.8base.com/">8base</a>, <a href="https://appwrite.io/">Appwrite</a>, and more.</p>
<p>Compared to all of these alternatives, Nhost is different in at least one of the following:</p>
<ul>
<li>Hosted offering</li>
<li>Relational database (PostgreSQL)</li>
<li>GraphQL API</li>
<li>Open Source</li>
<li>CLI</li>
<li>GitHub integration with automatic deployments to production</li>
</ul>
<p>We see other BaaS alternatives only being focused on hosting the backend. Nhost hosts the backend for customers as well, but we're more focused on solving end-to-end problems for developers related to local development, deployments, preview environments, and more.</p>
<p><figure><img src="/817636c89776a1bdb8c09de58044a168.png" alt="Nhost comparison" class="" width="" height="" /><figcaption>Nhost comparison</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-nhost-" id="why-did-you-develop-nhost-"></a><span class="text">Why did you develop <em>Nhost</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-nhost-">#</a></h2>
<p>Simply, I wanted it myself.</p>
<p>I love building - but not just building in general. Instead, more specifically, I love creating things that add value for customers.</p>
<p>I realized building a new backend for every app was not time well spent. When looking for the perfect backend, I found out it didn't exist. Now, this is the beauty of being an engineer. If you want something that does not exist, you can build it yourself, which I did.</p>
<p>In the early days of Nhost, I received a lot of traction from other developers who also wanted to have a ready-to-use backend. The feedback kept me motivated to build a fantastic experience for other developers who, just like me, love to develop.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We just <a href="https://www.nhost.io/blog/nhost-v2-the-beginning-of-something-big">launched Nhost v2 in beta</a> at the end of January 2022. Nhost v2 is everything we've learned over the past 18 months while building Nhost and talking to customers. We have focused on developer experience, CLI, and productivity for our customers.</p>
<p>We recently raised $3M from, among others, the founders of GitHub and Netlify, which means we're also focusing a lot on hiring. We will be expanding the team in 2021 and 2022.</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/5WTetOgDGLk" frameborder="0" allowfullscreen></iframe>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-nhost-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-nhost-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Nhost</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-nhost-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The frontend has gone through an innovation cycle for the last five years with excellent tools and frameworks like TypeScript, React, Vue, Next.js, Nuxt, GraphQL, and more.</p>
<p>In the next five years, we'll see the same innovation happen for back-end and full-stack app development.</p>
<p>Generally, developers will be more focused on picking tools and services that make them productive to provide value for their customers and business. Here, I think it's essential that companies providing these tools focus on developer experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Always be building! You can read and watch tutorials, but it's in the process of creating that you learn!</p>
<p>I also recommend paying for courses when you want to learn more about a specific topic, a framework, software, or tool. This way, you get a structured way to learn and quickly expand your understanding of the topic you're studying - instead of jumping between different youtube videos and blog posts. I regularly buy courses on <a href="http://udemy.com">udemy.com</a>, which I've found helpful.</p>
<p>But in short: build, build, build!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/UriGoldshtein">Urigo</a>, the founder of The Guild, is always interesting to listen to, and they are building excellent tools for GraphQL!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you so much for this interview. It was a lot of fun!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Elias! It's great to see offerings to emerge in the BaaS space as the development will make it faster, and most importantly, more fun to develop web applications.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about Nhost, <a href="https://www.nhost.io/">head to their site</a>. You can also <a href="https://github.com/nhost/nhost">find the project on GitHub</a>.</blockquote>How to tame the devDependencies of your project?ahowtotamethedevdependenciesofyourproject2022-01-13t00:00:00z2022-01-13T00:00:00Z<p>It's not uncommon for a normal JavaScript application to have thousands of dependencies. Once you start having multiple projects, the problem of having to maintain them is pronounced.</p>
<p>It's for this reason that solutions like <a href="https://create-react-app.dev/">Create React App</a> and <a href="https://nx.dev/">Nx</a> exist. They capture at least some of the complexity and own certain dependencies for you.</p>
<p>It's not only dependencies that you have to maintain. Often you have to worry about concerns such as linting, testing, and formatting. Assuming you want to keep these concerns consistent across different projects, then the question becomes how to maintain configuration.</p>
<p>In this post, I'll describe a package based approach that addresses both concerns. By encapsulating development dependencies and configuration to a npm package, you can maintain them in a single place to share across projects. As a side effect, doing this makes it easy to bootstrap new projects with the same defaults.</p>
<p>As an added benefit, as you evolve the package, you'll be able to cascade changes to the projects via version updates that then patch configuration to the most recent one by leveraging the power of mrm.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#brief-introduction-to-mrm" id="brief-introduction-to-mrm"></a><span class="text">Brief introduction to mrm</span><a class="header-anchor-select" href="https://survivejs.com/#brief-introduction-to-mrm">#</a></h2>
<p><a href="https://survivejs.com/blog/codemod-interview/">Codemods</a> are pieces of code that describe changes to code. In effect, by writing codemods, you are writing small tools for yourself to make it easier to migrate to a new style of an API for example.</p>
<p><a href="https://www.npmjs.com/package/mrm">mrm</a> works in a similar way but at the level of configuration. By using mrm's API, you can describe what a change to configuration should look like. This is similar to what you would do with a database migration for example.</p>
<p>In practice, mrm works best with JSON format as it's convenient to apply patches to it. It's a good argument for favoring JSON or some other regular format over code for configuration although you lose some power in return.</p>
<p>Although mrm was designed for patching projects to new configuration, it happens to work well for bootstrapping new projects since in that case it will build the configuration from scratch.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>mrm includes common tasks so you might not even use the programmatic API. You'll have to learn it to do anything more complex, though, so I'll cover the programming model briefly in this post.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#using-a-package-to-capture-dependencies-and-configuration" id="using-a-package-to-capture-dependencies-and-configuration"></a><span class="text">Using a package to capture dependencies and configuration</span><a class="header-anchor-select" href="https://survivejs.com/#using-a-package-to-capture-dependencies-and-configuration">#</a></h2>
<p>Now that we know what mrm is and what it does, it's a good spot to put everything we know together and implement a small package to contain both development dependencies and configuration. The result won't encompass everything you'll need but it's going to be enough code so that you understand how to extend the solution based on your exact needs.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-up-a-project" id="setting-up-a-project"></a><span class="text">Setting up a project</span><a class="header-anchor-select" href="https://survivejs.com/#setting-up-a-project">#</a></h3>
<p>To get started, create a new directory (<code>mkdir module-config</code>) and trigger <code>npm init -y</code> within it to create the initial <strong>package.json</strong> file.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>This is a good spot to initialize git (<code>git init</code>) within the project if you want to create commits step by step.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-up-prettier" id="setting-up-prettier"></a><span class="text">Setting up Prettier</span><a class="header-anchor-select" href="https://survivejs.com/#setting-up-prettier">#</a></h3>
<p>In order to simplify formatting, let's set up <a href="https://prettier.io/">Prettier</a>. We'll also share this setup with the consumers of the project so it's a double win. Although Prettier can run without any configuration, let's add some anyway to illustrate the approach. Set up a file as follows:</p>
<p><strong>.prettierrc.json</strong></p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"printWidth"</span><span class="token operator" >:</span> <span class="token number" >90</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can add your favored Prettier configuration here. I went with a single change to keep this simple.</p>
<p>Next, add Prettier to the project using <code>npm add prettier --save-exact</code>. Doing this means that Prettier will be added to the project as a regular dependency and its version will be fixed.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I've found it a good idea to fix versions exactly to avoid trouble if and when a dependency breaks in a minor version. If you prefer this behavior, you can set it in <a href="https://docs.npmjs.com/cli/v8/using-npm/config">npm config</a> globally.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#using-mrm-to-patch-prettier-to-projects" id="using-mrm-to-patch-prettier-to-projects"></a><span class="text">Using mrm to patch Prettier to projects</span><a class="header-anchor-select" href="https://survivejs.com/#using-mrm-to-patch-prettier-to-projects">#</a></h3>
<p>Although Prettier has been set up now, we still have to share it with the consumers of the package. As it's a direct dependency of our configuration package, it will be installed but it will still miss the configuration. That's where mrm will come in so let's install it first with <code>npm add mrm mrm-core --save-exact</code>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><code>mrm</code> is the CLI and <code>mrm-core</code> contains API needed for handling configuration files.</blockquote><p>To add our Prettier configuration to the consumers and include a <code>format</code> script, set up a module as follows:</p>
<p><strong>index.js</strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> json<span class="token punctuation" >,</span> packageJson <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"mrm-core"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> prettierConfig <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"./.prettierrc.json"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
module<span class="token punctuation" >.</span><span class="token function-variable function" >exports</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >json</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >".prettierrc.json"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >merge</span><span class="token punctuation brackets-parentheses" >(</span>prettierConfig<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >save</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >packageJson</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >setScript</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"format"</span><span class="token punctuation" >,</span> <span class="token string" >"prettier --write ."</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >save</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>Also make sure that <strong>.prettierrc.json</strong> is included to the files to publish so it won't be left behind:</p>
<p><strong>package.json</strong></p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
...
<span class="token property" >"files"</span><span class="token operator" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >".prettierrc.json"</span><span class="token punctuation" >,</span>
<span class="token string" >"index.js"</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>The question is, how to test that our code works? To keep things simple, we can use <code>npm link</code> to link our configuration project locally and then refer to it another project that we want to patch. Try the following from the project directory:</p>
<pre><code><span class="token function" >npm</span> <span class="token function" >link</span>
cd<span class="token punctuation" >..</span>
<span class="token function" >mkdir</span> module-config-demo
<span class="token function" >cd</span> module-config-demo
<span class="token function" >npm</span> init -y
<span class="token function" >npm</span> <span class="token function" >link</span> module-config
npx mrm module-config
</code></pre><p>When the last command runs, you should see something like this:</p>
<pre><code class="lang-bash">Running module-config<span class="token punctuation" >..</span>.
Create .prettierrc.json
Update package.json
</code></pre>
<p>To verify that it worked as we expected, inspect the two files as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#development-flow" id="development-flow"></a><span class="text">Development flow</span><a class="header-anchor-select" href="https://survivejs.com/#development-flow">#</a></h2>
<p>In order to move from a demonstration to production, you should publish the package behind your own npm namespace for example. After that, you can consume the package. Then you can have the consumers install <code>module-config</code> first and then have them run <code>node_modules/.bin/mrm module-config</code> since installing the package will install mrm as well.</p>
<p>To improve the approach further, your initial patching process could write a npm script called <code>update-configuration</code> that's running that command. Then, whenever you want to apply new configuration to project, you would invoke <code>npm run update-configuration</code> after updating the <code>module-config</code> dependency.</p>
<p>The core point is that you can treat configuration and dependency updates as a package dependency now and as a result you can apply the same practices you would use for any package including describing changes between releases and you could consider applying SemVer to describe the severity of the changes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I've found that the combination of using a package and mrm to manage development dependencies is powerful as it allows you to encapsulate common development concerns into a single place. In a client project, we use it to manage VS Code configuration, Jest, Karma, TypeScript, ESLint, <strong>.gitignore</strong>, Dependabot, licensing and even more.</p>
<p>Although approaches, such as monorepos, alleviate some of the related pain, I've found the package approach can complement them and give you a single place where to extract meta concerns of JavaScript projects while allowing sharing of knowledge across an organization while avoiding duplication of practices.</p>
<p>The side effect of this is that it's easier to move across projects as you know what kind of setup to expect assuming it's kept up to date through the package dependency.</p>
Medusa - Own your ecommerce stack - Interview with Sebastian Rindomamedusaownyourecommercestackinterviewwithsebastianrindom2021-12-14t00:00:00z2021-12-14T00:00:00Z<p>Building an online shop can be complex, and there are many factors to consider, not to mention compliance with all the different laws.</p>
<p>To learn more about the niche and how to get into e-commerce, I am interviewing <a href="https://twitter.com/sebrindom">Sebastian Rindom</a> from Medusa.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>I am Sebastian Rindom, one of the founders of <a href="https://www.medusajs.com/">Medusa Commerce</a>. I have always been very interested in computers and programming, which resulted in me studying computer science.</p>
<p>While studying, I began working on different projects and eventually focused on helping e-commerce businesses. When Oliver (one of the cofounders at Medusa) and I started working together, we had a customer who wanted to migrate away from WooCommerce.</p>
<p>As we weren't able to find a solution that accommodated their requirements, we ended up building a custom solution, which after many iterations became Medusa.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_medusa_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_medusa_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Medusa</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_medusa_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Medusa is an API that allows you to create powerful e-commerce experiences easily. Medusa comes with a lot of standard functionality that you would expect from an e-commerce system. Still, it has an architecture that makes it very easy to add custom functionality, automate common flows and switch out parts of your stack as your business grows or new solutions appear.</p>
<p>As a developer, this allows you to spend more time making things that move the needle instead of battling bad APIs, and as a merchant, you can be confident that everything is possible when you need it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_medusa_-work-" id="how-does-_medusa_-work-"></a><span class="text">How does <em>Medusa</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_medusa_-work-">#</a></h2>
<p>Medusa is essentially an npm package that you can install in a Node project and deploy to a server. Once it is up and running, you can use the default APIs that enable you to do things like creating products, adding products to a cart, processing payments, fulfilling orders, managing returns and exchanges, and many other great features.</p>
<p>Once installed in the Node project, you can add custom functionality and extensions by either installing plugins shipped as individual npm packages or adding files directly to your project. Examples of plugins that you might want include payment providers like Stripe and PayPal or shipping providers that cover the markets you sell to and so on.</p>
<p>To get going with Medusa fast, try the following:</p>
<pre><code><span class="token function" >npm</span> <span class="token function" >install</span> -g @medusajs/medusa-cli
medusa new my-medusa-store --seed
medusa develop
curl localhost:9000/store/products <span class="token operator" >|</span> python -m json.tool
</code></pre><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_medusa_-differ-from-other-solutions-" id="how-does-_medusa_-differ-from-other-solutions-"></a><span class="text">How does <em>Medusa</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_medusa_-differ-from-other-solutions-">#</a></h2>
<p>The e-commerce space that we are a part of has many big players like Shopify and BigCommerce. Our main difference is that we are headless, which means that we are agnostic about which presentation layer you use to take the customer through the purchasing experience.</p>
<p>The approach allows you to have a lot more flexibility regarding what types of experiences you can create and frees you from hacking your way into a platform that doesn't support your use case natively.</p>
<p>Naturally, we are also a lot more developer-focused than many other solutions. We believe that if you make developers more powerful, they will create more robust solutions for the end customer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_medusa_-" id="why-did-you-develop-_medusa_-"></a><span class="text">Why did you develop <em>Medusa</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_medusa_-">#</a></h2>
<p>Oliver and I had an agency where we did a fair amount of e-commerce related work, and too often, we experienced annoying moments where we either had to say no to our clients. They might have had a feature request or had to pull our hair out in frustration over some existing solutions.</p>
<p>It was clear that we weren't the only ones with this experience, and when we found a customer that perfectly fit the use case for a new solution, we decided to build the APIs that we had always wished existed. Our strong hope is that developers who try out Medusa have the same great feeling when implementing Medusa stores.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>For Medusa right now, we are just focused on having as many people try out our solution as possible. We have a solid foundation for growing our community, and we have a lot of people who are willing to help and guide people when they spin up Medusa for the first time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_medusa_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_medusa_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Medusa</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_medusa_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>One thing that I think will be huge for e-commerce, in particular, is the need for customization. After COVID, so many companies have realized that they need to think of e-commerce as one of their primary channels instead of a secondary channel that is "just there".</p>
<p>When more and more businesses begin to invest in this area, this will naturally increase the competition. In this area, I would expect the companies that dare to think differently and create experiences that are genuinely in line with their brands to come out on top.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I think the very best way of getting your hands dirty with web-dev is actually to buy a book - and try to find one that has been around for a long time, at least five years, and with an up-to-date edition.</p>
<p>I would then read it from end to end and try to do every example in the book - when you are probably ready to do 80% of the work that a professional web developer does.</p>
<p>At this point, you will feel comfortable with starting up a project, which will get you through the last 20%, which takes hard work and experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Nicklas! I know from experience e-commerce is tough and it's great to see open source options appear in the niche.</p>
<p>To learn more, <a href="https://www.medusajs.com/">head to Medusa site</a> and make sure to <a href="https://github.com/medusajs/medusa">check out the project on GitHub</a>.</p>
iHateReading - Where knowledge is shared - Interview with Shrey Vijayvargiyaaihatereadingwhereknowledgeissharedinterviewwithshreyvijayvargiya2021-06-16t00:00:00z2021-06-16T00:00:00Z<p>Developing content is hard work, and it takes consistent effort to become a successful content producer.</p>
<p>To learn more about one approach, I am interviewing <a href="https://twitter.com/treyvijay">Shrey Vijayvargiya</a> about <a href="https://ihatereading.in/">iHateReading</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/11a6d376d4332dd35b148e46508cff7a.jpg" alt="Shrey Vijayvargiya" class="author" width="100" height="100" /><figcaption>Shrey Vijayvargiya</figcaption></figure></p>
<p>Hello, My name is Shrey Vijayvargiya. Thanks a lot for showing a bit of interest in me 🙃; I define myself in three steps in both professional and personal life:</p>
<ul>
<li>I am a Developer by profession with three years of working experience.</li>
<li>I am also a Designer by interest because I love omitting my thoughts, opinions, and ideas using Designs and Software.</li>
<li>And in the end, I called myself a Journalist by blood because I love sharing my knowledge with my audiences in whatever way I can; it's really in my blood 😁 that one day I will become a Journalist.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_ihatereading_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_ihatereading_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>iHateReading</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_ihatereading_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>I called iHateReading, a place where knowledge is shared. iHateReading is made to teach development, designing, launching, and product management in the easiest and chill way.</p>
<p>We at iHateReading write code while listening to music, we teach UI and UX using background music and motivational beats 😁✌️. We shared what we know and in which we believe, we believe in journalism, we believe in teaching all software development and designing in one go and in a fun and more accessible way.</p>
<p>Every development content we create is less than seven minutes and full of images and coding examples and sometimes demo videos which makes understanding and learning more accessible.</p>
<p>Every design concept we teach encompasses videos and practical applications of them.</p>
<p>At last, we provide a single interface for developers to come and access the world-class professional boilerplates, which makes development and learning easier.</p>
<p><figure><img src="/3727e03f04fcf6cf295f86fc98ea15d1.png" alt="iHateReading homepage" class="" width="" height="" /><figcaption>iHateReading homepage</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_ihatereading_-work-" id="how-does-_ihatereading_-work-"></a><span class="text">How does <em>iHateReading</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_ihatereading_-work-">#</a></h2>
<p>It's pretty simple whatever we learn and know we share with our audiences, no filter, no decorations. Our website is simple and easy to navigate. We get inspiration from Medium and Figma, and Dribbble. We are still learning, So do show some support by visiting our website and learning in whatever way you can 🙃.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_ihatereading_-differ-from-other-solutions-" id="how-does-_ihatereading_-differ-from-other-solutions-"></a><span class="text">How does <em>iHateReading</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_ihatereading_-differ-from-other-solutions-">#</a></h2>
<p>Haha 😁, not at all; we are not competing with anyone, neither are we on that level to compete. We give our users clean and straightforward access to the content; you don't have to pay to read, nor do you need to log in.</p>
<p>We work very hard to get a decent amount of traffic, fewer users, but whosoever visit do reach us back, which is our ultimate goal. We will never ask for any money or anything in the future, our prime motive is to share knowledge, and we will be doing it forever.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_ihatereading_-" id="why-did-you-develop-_ihatereading_-"></a><span class="text">Why did you develop <em>iHateReading</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_ihatereading_-">#</a></h2>
<p>It all started when we start writing on Medium. Back in 2021 March, we took a 30DaysOfCodeChallenge in which we indulge in writing new code every day. The challenge was quite common in the technical domain; the new thing we were doing is sharing the simple 5–7 minute article with code examples and demo video every day.</p>
<p>That consistent work helps us reach and anticipate us to make a single accessible platform for all our audience to read our logs (tech articles).</p>
<p>We follow the same pattern with UI designs and illustrations, leading to creating a single web page for our audience to view all our designs on <a href="www.ihatereading.in/creativity">one single platform</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We have quite a bigger picture for iHateReading. Let me explain in a bit simpler and listed way :</p>
<ul>
<li>We are planning to create more technical content across all development domains (backend, frontend, architecture, infrastructure) in all languages we can. Sharing knowledge in less than seven minutes full of images and live coding examples is quite challenging.</li>
<li>We are about to create videos and podcasts for designers on our platform to learn designing while watching. This makes learning very simple in the future, and with one click away, you will learn design and its concepts.</li>
<li>We have a panel called <a href="www.ihatereading.in/repos">Repos</a>; this single section is loved by users a lot. We provide world-class professional boilerplates for developers to download and use and learn from it. I highly recommend you check it out to help you understand how large-scale applications are being developed.</li>
</ul>
<p><figure><img src="/540a1ec0999a5b745229159b52c067f9.png" alt="Boilerplates" class="" width="" height="" /><figcaption>Boilerplates</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_ihatereading_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_ihatereading_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>iHateReading</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_ihatereading_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Web development is at its peak at the current point of time. It is the most widely used tech domain, and millions of opportunities are laying, coming back and forth for web developers. Stay tuned to this domain and keep learning the new tech stacks because that is the only way to stay fit in the development domain.</p>
<p>The only trend I can see is that web development is shifting towards developing more full stack applications instead of just writing CSS or HTML. Learning the basic concepts of backend, frontend, product management, UI, UX will become imperative for a web developer in the succeeding years. And that is where our iHateReading comes in the game where you can learn web development, product management, and Designing in one go.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I always believe in one thing while learning any technology or skill, and that is to enjoy it or Love it. Once you start enjoying it, you will always perpetuate it even when the odds are against you. And that is the key to success, I guess, consistency and self-confidence.</p>
<p>So, To all budding developers, keep enjoying those tricky debugging nights and challenging learning curve. You are trying your best, and that is all you can do, so don't be upset; this journey is not a cakewalk, and remembers that the key to success is consistency and confidence.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I always want to hear the story of <a href="https://www.youtube.com/channel/UCXgGY0wkgOzynnHvSEVmE3A">Hitesh Choudhary</a> and how he built <a href="https://web.learncodeonline.in/">Learn Code Online</a>, and why he built it. Not sure whether he wants to give an interview, but I would love to give his name.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Yes, I am thankful to you as a reader for showing a decent interest in iHateReading, in what we believe. And lastly, a big thanks to SurviveJS for having my interview; keep growing and be happy.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Shrey! I like your aggregation based approach and there's value in filtering all the available content out there so it's easier to consume.</p>
<blockquote>
<p>You can <a href="https://ihatereading.in/">check iHateReading online</a>.</p>
</blockquote>
Forage Analytics - Analytics for React Native - Interview with Steven Maloneaforageanalyticsanalyticsforreactnativeinterviewwithstevenmalone2021-05-31t00:00:00z2021-05-31T00:00:00Z<p>Analytics is a big topic. What you don't know, you cannot optimize.</p>
<p>To learn more about it, I am interviewing Steven Malone about <a href="https://www.forage-analytics.com/">Forage Analytics</a>, an analytics solution aimed for React Native.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/16148cbb431ff53b62ed08ed02371e74.jpg" alt="Steven Malone" class="author" width="100" height="100" /><figcaption>Steven Malone</figcaption></figure></p>
<p>I am the Marketing Coordinator for Yozu & Forage Analytics. My background includes Computer Science & Digital Marketing. For the last three years, I have led all marketing activities within Yozu. It's the company that built Forage Analytics.</p>
<p>These activities range from paid advertising, SEO, content, social media, and include the biggest software event in Liverpool, UK. My biggest interests sit within lead generation through PPC and trying to outrank our competitors through organic traffic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_forage-analytics_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_forage-analytics_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Forage Analytics</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_forage-analytics_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Forage is a mobile analytics product built from the ground up for React Native. We give development teams powerful insight into all mobile app user interactions. Forage captures and stores data without limits and delivers responsive analysis, removing the constraints faced with other tools.</p>
<p><figure><img src="/7136c549b745dd6ee62936a56ab7b994.png" alt="Forage sessions" class="" width="" height="" /><figcaption>Forage sessions</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_forage-analytics_-work-" id="how-does-_forage-analytics_-work-"></a><span class="text">How does <em>Forage Analytics</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_forage-analytics_-work-">#</a></h2>
<p>Forage provides an SDK distributed through npm as this allows you to integrate the SDK into your application and begin learning session activities and behaviors about your users. Forage SDK allows you to send custom screen and data events of any size with no limit on the amount of information you can send us.</p>
<p>When the user minimizes your application, Forage SDK bundles all the collected information you have requested and sends it to our scalable AWS backend for instant access to your data on app.forage-analytics.com.</p>
<p><figure><img src="/583b2ce382c65b2e07659204ad68239f.png" alt="Forage dashboard" class="" width="" height="" /><figcaption>Forage dashboard</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_forage-analytics_-differ-from-other-solutions-" id="how-does-_forage-analytics_-differ-from-other-solutions-"></a><span class="text">How does <em>Forage Analytics</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_forage-analytics_-differ-from-other-solutions-">#</a></h2>
<p>Forage is the first purpose-built product made specifically for React Native. As a software company, our dev teams were constantly faced with project delays due to the limitations of other mobile analytics tools we used. With Forage, we now capture and store unlimited data without being obstructed by daily limitations to what we can process.</p>
<p><figure><img src="/2849f09ee689abae92ef1417477ac345.png" alt="Forage graphs" class="" width="" height="" /><figcaption>Forage graphs</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_forage-analytics_-" id="why-did-you-develop-_forage-analytics_-"></a><span class="text">Why did you develop <em>Forage Analytics</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_forage-analytics_-">#</a></h2>
<p>Forage was built after continuous frustration with the current market offerings. Using the industry's leading mobile application analytics tools, our developers faced daily limitations to the amount of data we could capture and store. The mobile analytics market lacked a limitless and intuitive solution offering all of the most important features the big players do for a fraction of the cost.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We aim to make Forage a market leader within the mobile analytics space, continually taking on user feedback and testing new ways to help our end users.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_forage-analytics_-and-mobile-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_forage-analytics_-and-mobile-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Forage Analytics</em> and mobile development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_forage-analytics_-and-mobile-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>We have been listening to our users and are currently working on a technical overview screen of all your devices broken down in an easy-to-use dashboard. Another exciting feature that's coming up is called user funnels. The feature will allow Product Owners / Project Managers to define their flows within their application and track the user dropout rate over any period specified.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-mobile-development-" id="what-advice-would-you-give-to-programmers-getting-into-mobile-development-"></a><span class="text">What advice would you give to programmers getting into mobile development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-mobile-development-">#</a></h2>
<p><strong>Find out where you learn best and learn as much as possible</strong></p>
<p>There are many ways to learn – videos, books, audiobooks, and podcasts to name a few. Discover your preference and own it.</p>
<p><strong>Embrace a struggle to solve a problem, but not too much</strong></p>
<p>Struggling to solve a problem is natural. Embrace the frustration often as it only makes finding the solution only that sweeter. However, at a certain point, you should seek help from another person or a resource.</p>
<p><strong>Learn as much from others as possible</strong></p>
<p>Two heads are better than one. If the primary developer encounters a problem, there will be two of you to solve the issue. You'll make fewer mistakes, and it's an effective way to share knowledge.</p>
<p><strong>Pass your knowledge on. Teach others what you learn</strong></p>
<p>The software development community is collaborative, and it strives to help one another. There will be many communities online you can participate in to help others, and we'd urge you to join one. Teaching others what you know enables you to further your knowledge of that subject.</p>
<p>Volunteer to hold a talk about a topic that piques your interest as it will force you to research the areas you never thought about to ensure you know the topic front and back. You'll be sharing your knowledge while furthering your understanding.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>We would recommend interviewing <a href="https://twitter.com/treyvijay">Shrey Vijayvargiya</a>. He's a lovely guy who has recently just received a demo from us at Forage. Shrey is a Developer by profession with two years of experience and is a designer by interest.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Steven! I hope you'll push the solution forward as analytics is a growing space that has the potential to make software development more data-driven.</p>
<p>You can see the solution in action below, and you can <a href="https://www.forage-analytics.com/">find Forage online</a> in case you want to try it out in your React Native app.</p>
<iframe src="https://player.vimeo.com/video/555723705" width="100%" height="300px" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
Blitz.js - The Full-stack React Framework - Interview with Brandon Bayerablitzjsthefullstackreactframeworkinterviewwithbrandonbayer2021-04-12t00:00:00z2021-04-12T00:00:00Z<p>Although React is a UI library, that doesn't mean you couldn't write full-stack applications around it. Frameworks, such as <a href="https://nextjs.org/">Next.js</a>, have appeared to make it easier.</p>
<p>To learn more about one such framework, Blitz.js, I am interviewing <a href="http://twitter.com/flybayer">Brandon Bayer</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/60898d6da82fd77abfd4f3838bda2ece?s=200" alt="Brandon Bayer" class="author" width="100" height="100" /><figcaption>Brandon Bayer</figcaption></figure></p>
<p>I'm the creator and full-time maintainer of Blitz.js. I have been a professional developer since 2010. In 2017 I quit my job to do full-time consulting. That was one of the best decisions I have ever made. When I started Blitz, I cut back my consulting hours to 20 per week or less. That allows me to work on Blitz while still making a living.</p>
<p>Outside of work, I love aviation. I got my pilot's license right after I turned 17 years old. I haven't flown in a few years, but I'm hoping to get back in the air as soon as possible.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_blitz-js_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_blitz-js_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Blitz.js</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_blitz-js_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It's the equivalent of Ruby on Rails or Laravel but for JavaScript and React. It's built on top of Next.js so that you get everything excellent about Next.js plus everything else you need for building a full-stack app.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn about Next.js, <a href="https://survivejs.com/blog/nextjs-interview">read the interview with Arunoda Susirapala</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_blitz-js_-work-" id="how-does-_blitz-js_-work-"></a><span class="text">How does <em>Blitz.js</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_blitz-js_-work-">#</a></h2>
<p>Fundamentally it works the same as Next.js. However, Blitz adds a novel new "zero-API" data layer, which abstracts the API layer into a compile step. As a developer, you don't need to mess with REST or GraphQL APIs. Blitz lets you write functions that run on the server, import them into your React components, and they will work like magic.</p>
<p><figure><img src="/1c8e8766253821a4e0bc0df161fadf9c.jpg" alt="Server and client" class="" width="" height="" /><figcaption>Server and client</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_blitz-js_-differ-from-other-solutions-" id="how-does-_blitz-js_-differ-from-other-solutions-"></a><span class="text">How does <em>Blitz.js</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_blitz-js_-differ-from-other-solutions-">#</a></h2>
<p><a href="https://redwoodjs.com/">RedwoodJS</a> is the only other alternative trying to solve the same problems. They take a different approach. Instead of abstracting away the API, they keep the GraphQL API layer and double down on making it easy to use.</p>
<p>Also, Blitz has built-in user email/password authentication, and it's already set up for you by default out of the box. So you never have to set up auth again if you use Blitz.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_blitz-js_-" id="why-did-you-develop-_blitz-js_-"></a><span class="text">Why did you develop <em>Blitz.js</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_blitz-js_-">#</a></h2>
<p>I developed Blitz because I was so frustrated with having to manage APIs and data fetching. It's incredible how much the API layer slows you down and causes problems. People are saying Blitz makes you 5-10x more productive because of this. And then also the headache of choosing libraries and getting them all to work together. I wanted a battery-included framework like Ruby on Rails.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_blitz-js_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_blitz-js_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Blitz.js</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_blitz-js_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Full-stack development with JavaScript/TypeScript and React is going to continue to get easier and faster. We've already made such a difference with Blitz. But there's a TON more we can and want to do. It's still early days for full stack web dev.</p>
<p>Serverless full stack with Blitz is still the wild west right now. But I fully expect this to improve over the next couple of years dramatically.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I recommend working at an agency at some point, so you get more varied experience than working on a single enterprise product. Also don't stay at the same job for too long. Ideally, switch jobs every couple of years, so you gain more experience and because you can raise your salary much easier by changing companies.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/colinhacks">Colin McDonnell</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Go to <a href="https://blitzjs.com/">blitzjs.com</a> to learn more about Blitz and take it for a test drive. TLDR is run <code>npm i -g blitz</code> and then <code>blitz new myAppName</code>, and in just a couple minutes, you'll have a new Blitz app running, complete with user sign up, log in, log out, and forgot password all working!</p>
<p>If you want to keep up with what I'm working on, follow me at <a href="http://twitter.com/flybayer">@flybauer</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Brandon! I agree the full-stack experience with React can be improved further, but it's pretty impressive what you've done so far.</p>
<p>To get started with Blitz, consider the following resources:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=UHyx8MtCVVk">Video: Complete intro to Blitz</a></li>
<li><a href="https://discord.gg/blitzjs">Blitz Discord</a></li>
<li><a href="https://twitter.com/blitz_js">@blitz_js</a></li>
<li><a href="https://github.com/blitz-js/blitz">Blitz on GitHub</a></li>
</ul>
<p><strong>React Finland Vodcast #3 - Full Stack React (featuring Blitz.js)</strong></p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/ee3riQ0aVbs" frameborder="0" allowfullscreen></iframe>
Rubico - [a]synchronous functional programming - Interview with Richard Tongarubicoasynchronousfunctionalprogramminginterviewwithrichardtong2021-03-10t00:00:00z2021-03-10T00:00:00Z<p>One of the tricky parts of JavaScript is dealing with asynchronous behavior. The language itself has introduced improved syntax (<code>async</code>/<code>await</code>) and utilities like <code>Promise.all</code> and <code>Promise.race</code> but it's not enough for more advanced use cases.</p>
<p>To learn about a potential solution, I am interviewing <a href="https://twitter.com/richytong_">Richard Tong</a> about a new library called Rubico.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/c6448099cd4214a65480fabc2d6187b7?s=200" alt="Richard Tong" class="author" width="100" height="100" /><figcaption>Richard Tong</figcaption></figure></p>
<p>I am a programmer based in Los Angeles who enjoys solving problems with JavaScript. Currently, I am working on <a href="https://claimyr.com">Claimyr</a> - the quickest way to speak with an unemployment agent. In my spare time, I enjoy going out to eat and getting coffee.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_rubico_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_rubico_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Rubico</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_rubico_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Rubico is a set of functions that supports a simple and expressive way of programming in JavaScript. With Rubico, you can reduce a ton of boilerplate surrounding <code>Promise</code> handling in your code, allowing you to focus on writing business logic and shipping quickly. Rubico is geared towards ES2018+, requiring syntax for async generator functions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_rubico_-work-" id="how-does-_rubico_-work-"></a><span class="text">How does <em>Rubico</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_rubico_-work-">#</a></h2>
<p>Use Rubico's operators to create async-enabled compositions of functions. Each operator handles <code>Promise</code> resolution for you. Consider the following example:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> pipe<span class="token punctuation" >,</span> map<span class="token punctuation" >,</span> filter <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> rubico<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >isOdd</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>number<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> number <span class="token operator" >%</span> <span class="token number" >2</span> <span class="token operator" >==</span> <span class="token number" >1</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> asyncSquare <span class="token operator" >=</span> <span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span>number<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> number <span class="token operator" >**</span> <span class="token number" >2</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> squaredOdds <span class="token operator" >=</span> <span class="token function" >pipe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span>
<span class="token comment" spellcheck="true" >// each asyncSquare Promise is resolved before filter</span>
<span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>asyncSquare<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token function" >filter</span><span class="token punctuation brackets-parentheses" >(</span>isOdd<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >squaredOdds</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >4</span><span class="token punctuation" >,</span> <span class="token number" >5</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation brackets-parentheses" >(</span>console<span class="token punctuation" >.</span>log<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// [1, 9, 25]</span>
</code></pre>
<p>At the moment, Rubico supports the following functions:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span>
pipe<span class="token punctuation" >,</span>
tap<span class="token punctuation" >,</span>
switchCase<span class="token punctuation" >,</span>
tryCatch<span class="token punctuation" >,</span>
fork<span class="token punctuation" >,</span>
assign<span class="token punctuation" >,</span>
<span class="token keyword keyword-get" >get</span><span class="token punctuation" >,</span>
pick<span class="token punctuation" >,</span>
omit<span class="token punctuation" >,</span>
map<span class="token punctuation" >,</span>
filter<span class="token punctuation" >,</span>
reduce<span class="token punctuation" >,</span>
transform<span class="token punctuation" >,</span>
flatMap<span class="token punctuation" >,</span>
and<span class="token punctuation" >,</span>
or<span class="token punctuation" >,</span>
not<span class="token punctuation" >,</span>
any<span class="token punctuation" >,</span>
all<span class="token punctuation" >,</span>
eq<span class="token punctuation" >,</span>
gt<span class="token punctuation" >,</span>
lt<span class="token punctuation" >,</span>
gte<span class="token punctuation" >,</span>
lte<span class="token punctuation" >,</span>
thunkify<span class="token punctuation" >,</span>
always<span class="token punctuation" >,</span>
curry<span class="token punctuation" >,</span>
__<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> rubico<span class="token punctuation" >;</span>
</code></pre>
<p>You can create full applications with just <code>pipe</code> and <code>tap</code>. Usually I recommend people start with these two. Use <code>pipe</code> to chain a bunch of functions (sync or async) together, then use <code>tap</code> to specify any "side-effecting" functions, i.e., functions that shouldn't contribute to the main flow, such as writing to a file or database. The rule is pretty arbitrary and will always be as pure as your best effort.</p>
<p>Here's a setup you could get started with that I've been using for my HTTP handlers:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >MyHttpHandler</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
dependencyA<span class="token punctuation" >,</span> dependencyB<span class="token punctuation" >,</span> myConfigValue<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>request<span class="token punctuation" >,</span> response<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >tryCatch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >pipe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span>
<span class="token function" >always</span><span class="token punctuation brackets-parentheses" >(</span>request<span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >transform</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>chunk <span class="token operator" >=></span> chunk<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> Buffer<span class="token punctuation" >.</span><span class="token keyword keyword-from" >from</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >''</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token function" >callProp</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'toString'</span><span class="token punctuation" >,</span> <span class="token string" >'utf8'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
JSON<span class="token punctuation" >.</span>parse<span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// { parameterA: 'hey', parameterB: 100 }</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> error <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >error</span><span class="token punctuation brackets-parentheses" >(</span>error<span class="token punctuation" >.</span>message<span class="token punctuation brackets-parentheses" >)</span>
response<span class="token punctuation" >.</span><span class="token function" >writeHead</span><span class="token punctuation brackets-parentheses" >(</span>error<span class="token punctuation" >.</span>code <span class="token operator" >?</span><span class="token operator" >?</span> <span class="token number" >500</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >'Content-Type'</span><span class="token punctuation" >:</span> <span class="token string" >'text/plain'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
response<span class="token punctuation" >.</span><span class="token function" >end</span><span class="token punctuation brackets-parentheses" >(</span>error<span class="token punctuation" >.</span>message<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Initialize dependencies, grab config values...</span>
http<span class="token punctuation" >.</span><span class="token function" >createServer</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >MyHttpHandler</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
dependencyA<span class="token punctuation" >,</span> dependencyB<span class="token punctuation" >,</span> myConfigValue<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >listen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >3000</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>If you are interested in getting started with Rubico, I recommend <a href="https://rubico.land/tour">taking the tour</a> and then glancing over all the functions at the <a href="https://rubico.land/docs">docs</a>. Try to master the core API first, then move on to the advanced functions in <code>rubico/x</code>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_rubico_-differ-from-other-solutions-" id="how-does-_rubico_-differ-from-other-solutions-"></a><span class="text">How does <em>Rubico</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_rubico_-differ-from-other-solutions-">#</a></h2>
<p>Rubico is comparable to <a href="https://lodash.com/">Lodash FP</a>, <a href="https://ramdajs.com/">Ramda</a>, <a href="https://www.npmjs.com/package/bluebird">Bluebird</a>, and <a href="https://www.npmjs.com/package/rxjs">RxJS</a> libraries. All five libraries are competing in the utility space, though with differing core principles/ideologies. I've compared them briefly below to show you the differences:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#rubico-vs-lodash-fp-" id="rubico-vs-lodash-fp-"></a><span class="text">Rubico vs Lodash FP:</span><a class="header-anchor-select" href="https://survivejs.com/#rubico-vs-lodash-fp-">#</a></h3>
<ul>
<li>Lodash FP - immutable, auto-curried, iteratee-first, and data-last methods</li>
<li>Rubico - mutable, uncurried, promise-resolving, iteratee-first, and data-last methods</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#rubico-vs-ramda-" id="rubico-vs-ramda-"></a><span class="text">Rubico vs Ramda:</span><a class="header-anchor-select" href="https://survivejs.com/#rubico-vs-ramda-">#</a></h3>
<ul>
<li>Ramda - immutability, and side-effect free functions are at the heart of its design philosophy</li>
<li>Rubico - composability, performance, and simplicity are at the heart of its design philosophy</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#rubico-vs-bluebird-" id="rubico-vs-bluebird-"></a><span class="text">Rubico vs Bluebird:</span><a class="header-anchor-select" href="https://survivejs.com/#rubico-vs-bluebird-">#</a></h3>
<ul>
<li>Bluebird - built around Promises. Utility operators focus on <code>Promise</code> handling.</li>
<li>Rubico - built around async functions. Utility operators focus on async function composition.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#rubico-vs-rxjs-" id="rubico-vs-rxjs-"></a><span class="text">Rubico vs RxJS:</span><a class="header-anchor-select" href="https://survivejs.com/#rubico-vs-rxjs-">#</a></h3>
<ul>
<li>RxJS - a library for composing asynchronous and event-based programs by using observable sequences</li>
<li>Rubico - a library for composing asynchronous and event-based programs with async functions</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#similarities" id="similarities"></a><span class="text">Similarities</span><a class="header-anchor-select" href="https://survivejs.com/#similarities">#</a></h3>
<p>Rubico, Lodash FP, and Ramda all have a placeholder operator <code>__</code>. Rubico's <code>__</code> can be used in conjunction with Rubico's <code>curry</code> to create new functions from existing ones by fixing some of the arguments.</p>
<p>Lodash FP and Ramda don't need the <code>curry</code> function as much because their functions come as auto-curried. Rubico does not curry automatically for performance reasons and instead exports higher-order functions with fixed signatures.</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> curry<span class="token punctuation" >,</span> __ <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"rubico"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> R <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"ramda"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> _ <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"lodash/fp"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >add</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> a <span class="token operator" >+</span> b<span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// rubico</span>
<span class="token keyword keyword-const" >const</span> add3Rubico <span class="token operator" >=</span> <span class="token function" >curry</span><span class="token punctuation brackets-parentheses" >(</span>add<span class="token punctuation" >,</span> __<span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >add3Rubico</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >5</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// 8</span>
<span class="token comment" spellcheck="true" >// ramda</span>
<span class="token keyword keyword-const" >const</span> add3Ramda <span class="token operator" >=</span> R<span class="token punctuation" >.</span><span class="token function" >curry</span><span class="token punctuation brackets-parentheses" >(</span>add<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>R<span class="token punctuation" >.</span>__<span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >add3Ramda</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >5</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// 8</span>
<span class="token comment" spellcheck="true" >// lodash/fp</span>
<span class="token keyword keyword-const" >const</span> add3Lodash <span class="token operator" >=</span> _<span class="token punctuation" >.</span><span class="token function" >curry</span><span class="token punctuation brackets-parentheses" >(</span>add<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>_<span class="token punctuation" >.</span>__<span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >add3Lodash</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >5</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// 8</span>
</code></pre>
<p>Both Rubico and Bluebird provide an asynchronous pooling option. With Rubico, you can specify an asynchronous limit while applying an async function to each item of a collection via the property function <code>map.pool</code>. Bluebird enables pooling functionality via the <code>concurrency</code> option on Bluebird's <code>Promise.map</code>.</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> Promise <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"bluebird"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> map <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"rubico"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >sleep</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>ms<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
<span class="token keyword keyword-new" >new</span> <span class="token class-name" >Promise</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>resolve<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >setTimeout</span><span class="token punctuation brackets-parentheses" >(</span>resolve<span class="token punctuation" >,</span> ms<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// bluebird</span>
Promise<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >4</span><span class="token punctuation" >,</span> <span class="token number" >5</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >asyncSquare</span><span class="token punctuation brackets-parentheses" >(</span>number<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"squaring"</span><span class="token punctuation" >,</span> number<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >sleep</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >500</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> number <span class="token operator" >**</span> <span class="token number" >2</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> concurrency<span class="token punctuation" >:</span> <span class="token number" >2</span> <span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// rubico</span>
map<span class="token punctuation" >.</span><span class="token function" >pool</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >2</span><span class="token punctuation" >,</span> <span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >asyncSquare</span><span class="token punctuation brackets-parentheses" >(</span>number<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"squaring"</span><span class="token punctuation" >,</span> number<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >sleep</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >500</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> number <span class="token operator" >**</span> <span class="token number" >2</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >4</span><span class="token punctuation" >,</span> <span class="token number" >5</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_rubico_-" id="why-did-you-develop-_rubico_-"></a><span class="text">Why did you develop <em>Rubico</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_rubico_-">#</a></h2>
<p>Initially, I developed Rubico because I needed a function that could chain async functions together in a data-last fashion. Then I wondered about other ways in which async functions could be composed. The rest went from there.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm building <a href="https://claimyr.com">Claimyr</a> with Rubico and a couple of other libraries I'm working on: <a href="https://github.com/richytong/presidium">Presidium</a> and <a href="https://github.com/richytong/arche">Arche</a>.</p>
<p>Presidium provides a type system that addresses the complete set of needs of a back-end Node.js application architect: from handling HTTP to working with Amazon Web Services like DynamoDB or S3, to deploying on your in-house docker swarm.</p>
<p>Arche is a simple wrapper over React, enabling a declarative interface for working with React without the need for transpilation.</p>
<p>These libraries and others contribute to high-quality software development at Claimyr.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_rubico_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_rubico_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Rubico</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_rubico_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Rubico has a long roadmap - it is just getting started. There's still a lot of cool and useful asynchronous behaviors yet to be implemented. For example, <code>reduce.parallel</code> could apply an asynchronous reducer in parallel to a possibly infinite or asynchronous source.</p>
<p>I think it's hard to predict exactly where we'll end up in the next few years or next year even. Innovation happens every day, for sure - chances are you'll be using new software a year from now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>If you feel like you are struggling, keep at it for as long as you can, then get a good night's sleep. Chances are, you will grasp it a little better the next day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/ThomasWang">Thomas Wang</a>, the co-founder of <a href="https://twitter.com/napkin">@Napkin</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for giving me the time.</p>
<p>It's an exciting time to be a web developer. If you are interested in contributing to Rubico or any of my other projects, or even just learning about how to build for the web, <a href="mailto:richytong@gmail.com">please reach out to me via email</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Richard! Rubico looks like a great solution for handling any complex asynchronous case and I hope you keep improving it.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://www.npmjs.com/package/rubico">find rubico on npm</a> and on <a href="https://github.com/a-synchronous/rubico">GitHub</a>.</blockquote>PropagateAt - Talk to your greatest fans via text - Interview with Kumar Abhirupapropagateattalktoyourgreatestfansviatextinterviewwithkumarabhirup2021-02-12t00:00:00z2021-02-12T00:00:00Z<p>Developing your products is both exciting and challenging. There's both the business side and the development side to worry about and to manage. Both have to be on a good enough level for the product to work.</p>
<p>In this interview, we'll learn about a product called <a href="https://propagate.at/">PropagateAt</a> by <a href="https://twitter.com/kumar_abhirup">Kumar Abhirup</a>. It's the first product he has developed, so it's interesting to hear what he has to say about the product and the experience!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/792939b409d9f156b91bd8f8ee50ebcd?s=200" alt="Kumar Abhirup" class="author" width="100" height="100" /><figcaption>Kumar Abhirup</figcaption></figure></p>
<p>Hi, I am Kumar. I am in 11th grade, coding since age 12, currently building PropagateAt, the Substack for SMS. You can find me online at the following places:</p>
<ul>
<li>GitHub: <a href="https://github.com/KumarAbhirup">https://github.com/KumarAbhirup</a></li>
<li>Website: <a href="https://kumarabhirup.me">https://kumarabhirup.me</a></li>
<li>dev.to: <a href="https://dev.to/kumar_abhirup">https://dev.to/kumar_abhirup</a></li>
<li>Medium: <a href="https://medium.com/@kumar_abhirup">https://medium.com/@kumar_abhirup</a></li>
<li>LinkedIn: <a href="https://linkedin.com/in/kumar-abhirup/">https://linkedin.com/in/kumar-abhirup/</a></li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_propagateat_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_propagateat_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>PropagateAt</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_propagateat_-to-someone-who-has-never-heard-of-it-">#</a></h3>
<p>I call it, the <a href="https://substack.com/">Substack</a> for SMS. Substack is a writing platform oriented for independent writers and exclusive access to their content! PropagateAt is a similar tool, except it has been built around SMS. It allows creators to create paid texting communities, chat, send newsletters, and connect to their fans one-on-one using a US phone number.</p>
<p>A creator who wants to start his/her own paid Text Message newsletter first signs up with PropagateAt. The creator then gets a new personal US number they can advertise anywhere. For example, "Hey, text me here!". After this, the fans will text the number, and if the newsletter is free, they will be subscribed right away.</p>
<p>If the newsletter was a premium one, the fans get an auto payment link, and after the payment, they get subscribed to the newsletter at a monthly cost. These fans then get the privilege to chat via SMS with their favorite influencers! It works just like Substack, paid newsletters, but on SMS.</p>
<p>Whatever the creators earn, they keep 85% of it. They can connect their Stripe accounts and withdraw the money earned anytime!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_propagateat_-differ-from-other-solutions-" id="how-does-_propagateat_-differ-from-other-solutions-"></a><span class="text">How does <em>PropagateAt</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_propagateat_-differ-from-other-solutions-">#</a></h2>
<p>There are many companies building SMS solutions. Most of them are for corporates and companies to send unsolicited marketing spam or so. There are many MailChimp for SMS services out there already.</p>
<p>The closest (and you could say the biggest) competitor to us is <a href="https://www.community.com/">Community</a>. It has been made for really famous creators who are sending bulk text messages to their fans. But, Creators cannot use it like a paid blogging platform and cannot monetize their text newsletter effectively. Also, Community is very costly, so that medium-scale influencers mostly cannot afford it.</p>
<p>What makes PropagateAt different is its appeal to creators and influencers of all scales and giving them a platform and a billing infrastructure to help them earn money over SMS by sending premium content to their fans, on a monthly subscription basis, at a lower price.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_propagateat_-" id="why-did-you-develop-_propagateat_-"></a><span class="text">Why did you develop <em>PropagateAt</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_propagateat_-">#</a></h2>
<p>My mother had 10k subscribers on WhatsApp. To automate her tedious WhatsApp process, I tried to create a WhatsApp bulk newsletter service with Twilio. Then I realized that there are a ton of Facebook restrictions with it.</p>
<p>Do you know what does not have such restrictions? It's SMS! And it's barely touched by creator-friendly marketing companies. Also, creators and influencers earning their income over SMS content is a new thing and is a vastly uncovered idea market.</p>
<p>After I understood the potential of SMS marketing for creators, I decided to make PropagateAt!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I am currently building and growing the product (MVP at the moment) by slowly giving users access to the dashboard and new features to ensure everything goes smooth.</p>
<p>We have an AppSumo launch scheduled, then will launch on <a href="https://www.producthunt.com/">Product Hunt</a>, and we'll also apply to <a href="https://www.ycombinator.com/">Y Combinator</a>. I am mostly over calls with influencers these days, and they love the idea, and I am slowly onboarding them over to PropagateAt.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_propagateat_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_propagateat_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>PropagateAt</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_propagateat_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>For PropagateAt, there is a massive redesign coming, so yea, stay tuned, haha. When I started building the product back in 2020, I didn't make the architecture scalable. The target of the work is to improve this aspect over time.</p>
<p>In the upcoming years, web development will probably get easier with all these no-code tools coming up.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-technical-challenges-did-you-encounter-while-developing-_propagateat_-" id="what-technical-challenges-did-you-encounter-while-developing-_propagateat_-"></a><span class="text">What technical challenges did you encounter while developing <em>PropagateAt</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-technical-challenges-did-you-encounter-while-developing-_propagateat_-">#</a></h2>
<p>I mean, a lot. While building the MVP for 7-8 months, I faced many issues. And I still do.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#information-security-is-hard" id="information-security-is-hard"></a><span class="text">Information security is hard</span><a class="header-anchor-select" href="https://survivejs.com/#information-security-is-hard">#</a></h3>
<p>One biggest technical challenge for me was to keep everything secure, and I am not going to lie, I am not good at CyberSec.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#server-side-rendering-is-challenging" id="server-side-rendering-is-challenging"></a><span class="text">Server-side rendering is challenging</span><a class="header-anchor-select" href="https://survivejs.com/#server-side-rendering-is-challenging">#</a></h3>
<p>The second thing I am struggling with is making the current stack work with <a href="https://www.apollographql.com/">Apollo GraphQL</a> server-side rendering (SSR). At the moment, all the queries are being made client-side, and I want it to be done on the server-side for better link previews, for example. I am using <a href="https://nextjs.org/">Next.js</a>, so it should be easy, right? But I guess there's something that's not right, and I am still trying to figure it out.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#payments-are-complex" id="payments-are-complex"></a><span class="text">Payments are complex</span><a class="header-anchor-select" href="https://survivejs.com/#payments-are-complex">#</a></h3>
<p>Currently, the service works on <a href="https://www.twilio.com/">Twilio</a> internally. I am figuring out a way to streamline the money flow from clients to PropagateAt to Twilio Balance. Now the process is all manual so that when a client pays, I get a notification, and then I add a top-up in Twilio. I want to make it seamless where it automatically tops-up the Twilio Account balance when a new user pays, but I am still figuring out how to do that.</p>
<p><a href="https://stripe.com/">Stripe</a> regulations in India are complex. Stripe Express Connect Account does not work for Indian Merchants, and therefore we have to resort to a secondary Connect Account method. I am using Stripe Connected Accounts service to pay creators what they earn via PropagateAt.</p>
<p>It currently does not work well because to send money to creators your Stripe wallet needs to be filled. But for Indian Stripe Accounts, the money gets withdrawn to banks as soon as it comes, which means Stripe cannot be used as a wallet in India, making it harder for creators to get paid.</p>
<p>Currently, to solve this issue, we manually pay creators via PayPal. And later, to fix this issue, all we need is a Stripe Atlas incorporation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Just build something! I am not great at coding, but when it comes to learning new things, I can hack and develop stuff my way, I can do it pretty well!</p>
<p>I used to be in a tutorial purgatory back in 2019, and I am glad I got out of it. I would recommend beginners to log on to <a href="https://www.freecodecamp.org/">FreeCodeCamp</a>, get their JavaScript course, try it out, and start building small projects! Your portfolio will be your first great start!</p>
<p>Your aim at the beginner stage should mainly be that, after 1-2 years, you could be able to build a working full-stack app. That will be a nice goal to have in the early stages. The ability to develop whatever you want is a great skill, and I would always choose it over anything else.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/novadigvijay">Digvijay Singh Rathore</a>. He is multi-talented, better than me at everything.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>The questions were great! They really got me thinking!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Kumar! I find it admirable you built your product and found a growing market for it. I wish great success for your business!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about the product, <a href="https://propagate.at">head to PropagateAt site</a>.</blockquote>GruCloud - Infrastructure as Code in JavaScript - Interview with Frederic Heemagrucloudinfrastructureascodeinjavascriptinterviewwithfredericheem2021-02-03t00:00:00z2021-02-03T00:00:00Z<p>For me, it's always amazing how complex infrastructure it's possible to configure these days. If you master a platform like AWS or GCP, you can do quite a lot. Earlier it took a lot of expertise and hardware to pull this off, and these days you can go to a suitable service and manage it all through a web interface.</p>
<p>As a JavaScript programmer, it's interesting for me you can achieve the same but using a language I know. Frederic Heem has developed a new solution called GruCloud that does this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/2327ce3a89bc1eecbc6273990933ca14.jpg" alt="Frederic Heem" class="author" width="100" height="100" /><figcaption>Frederic Heem</figcaption></figure></p>
<p>I have been developing software for the last 20 years, mainly in the UK and Italy. Lately, the focus has been on JavaScript: frontend, backend, and mobile.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>In case you want to learn more of Frederic's work, I interviewed him a few years back about his <a href="https://survivejs.com/blog/starhackit-interview/">starter kit for React and Node</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_grucloud_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_grucloud_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>GruCloud</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_grucloud_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>GruCloud is an <em>Infrastructure as Code</em> tool. DevOps people can write in JavaScript a description of their cloud infrastructure. Then they use the GruCloud CLI to manage the deployment, update, and destruction of such infrastructure. By cloud infrastructure, we mean servers, public IP addresses, DNS settings, file storage, and so on.</p>
<p>At the moment, GruCloud interfaces with AWS, Google Cloud, and Microsoft Azure.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_grucloud_-work-" id="how-does-_grucloud_-work-"></a><span class="text">How does <em>GruCloud</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_grucloud_-work-">#</a></h2>
<p>First of all, we describe infrastructure in JavaScript, for example, a virtual machine on Google Cloud:</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> GoogleProvider <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"@grucloud/core"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
exports<span class="token punctuation" >.</span>createStack <span class="token operator" >=</span> <span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> config <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> provider <span class="token operator" >=</span> <span class="token function" >GoogleProvider</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> config <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> server <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> provider<span class="token punctuation" >.</span><span class="token function" >makeVmInstance</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`webserver`</span></span><span class="token punctuation" >,</span>
properties<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
diskSizeGb<span class="token punctuation" >:</span> <span class="token string" >"20"</span><span class="token punctuation" >,</span>
machineType<span class="token punctuation" >:</span> <span class="token string" >"f1-micro"</span><span class="token punctuation" >,</span>
sourceImage<span class="token punctuation" >:</span>
<span class="token string" >"projects/ubuntu-os-cloud/global/images/family/ubuntu-2004-lts"</span><span class="token punctuation" >,</span>
metadata<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
items<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
key<span class="token punctuation" >:</span> <span class="token string" >"enable-oslogin"</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> <span class="token string" >"True"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span>
provider<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>The next step is to use the GruCloud command-line interface <strong>gc</strong> to deploy, list, update and destroy the server.</p>
<p>In the first step, planning, the tool performs the following steps:</p>
<ol>
<li>It queries the cloud providers to find out which resources are already deployed</li>
<li>Compares to what should be installed according to the code</li>
<li>Produces a plan of what needs to be deployed or removed</li>
</ol>
<pre><code> $ gc apply
Querying resources on 1 provider: google
✓ google
✓ Initialising
✓ Listing 16/16
✓ Querying
✓ VmInstance 1/1
┌──────────────────────────────────────────────────────────────────────┐
│ 1 VmInstance from google │
├───────────┬──────────┬───────────────────────────────────────────────┤
│ Name │ Action │ Data │
├───────────┼──────────┼───────────────────────────────────────────────┤
│ webserver │ CREATE │ kind: compute<span class="token comment" spellcheck="true" >#instance │</span>
│ │ │ name: webserver │
│ │ │ zone: projects/grucloud-e2e/zones/southameri… │
│ │ │ machineType: projects/grucloud-e2e/zones/sou… │
│ │ │ labels: │
│ │ │ managed-by: grucloud │
│ │ │ stage: dev │
│ │ │ metadata: │
│ │ │ items: │
│ │ │ - key: enable-oslogin │
│ │ │ value: True │
│ │ │ kind: compute<span class="token comment" spellcheck="true" >#metadata │</span>
│ │ │ disks: │
│ │ │ - kind: compute<span class="token comment" spellcheck="true" >#attachedDisk │</span>
│ │ │ type: PERSISTENT │
│ │ │ boot: <span class="token boolean" >true</span> │
│ │ │ mode: READ_WRITE │
│ │ │ autoDelete: <span class="token boolean" >true</span> │
│ │ │ deviceName: webserver-managed-by-gru │
│ │ │ initializeParams: │
│ │ │ sourceImage: projects/ubuntu-os-cloud/… │
│ │ │ diskType: projects/grucloud-e2e/zones/… │
│ │ │ diskSizeGb: 20 │
│ │ │ diskEncryptionKey: │
│ │ │ networkInterfaces: │
│ │ │ - kind: compute<span class="token comment" spellcheck="true" >#networkInterface │</span>
│ │ │ subnetwork: projects/grucloud-e2e/region… │
│ │ │ accessConfigs: │
│ │ │ - kind: compute<span class="token comment" spellcheck="true" >#accessConfig │</span>
│ │ │ name: External NAT │
│ │ │ type: ONE_TO_ONE_NAT │
│ │ │ networkTier: PREMIUM │
│ │ │ aliasIpRanges: <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span> │
│ │ │ displayDevice: │
│ │ │ enableDisplay: <span class="token boolean" >false</span> │
│ │ │ canIpForward: <span class="token boolean" >false</span> │
│ │ │ scheduling: │
│ │ │ preemptible: <span class="token boolean" >false</span> │
│ │ │ onHostMaintenance: MIGRATE │
│ │ │ automaticRestart: <span class="token boolean" >true</span> │
│ │ │ nodeAffinities: <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span> │
│ │ │ deletionProtection: <span class="token boolean" >false</span> │
│ │ │ reservationAffinity: │
│ │ │ consumeReservationType: ANY_RESERVATION │
│ │ │ shieldedInstanceConfig: │
│ │ │ enableSecureBoot: <span class="token boolean" >false</span> │
│ │ │ enableVtpm: <span class="token boolean" >true</span> │
│ │ │ enableIntegrityMonitoring: <span class="token boolean" >true</span> │
│ │ │ confidentialInstanceConfig: │
│ │ │ enableConfidentialCompute: <span class="token boolean" >false</span> │
│ │ │ │
└───────────┴──────────┴───────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ Plan summary <span class="token keyword keyword-for" >for</span> provider google │
├─────────────────────────────────────────────────────────────────────┤
│ DEPLOY RESOURCES │
├────────────────────┬────────────────────────────────────────────────┤
│ VmInstance │ webserver │
└────────────────────┴────────────────────────────────────────────────┘
? Are you sure to deploy 1 resource, 1 <span class="token function" >type</span> on 1 provider? › <span class="token punctuation brackets-parentheses" >(</span>y/N<span class="token punctuation brackets-parentheses" >)</span>
</code></pre><p>In the second step, performing the deployment, the tool calls the cloud providers' API to create, updates or deletes resources according to the plan produced in the previous step:</p>
<pre><code>Deploying resources on 1 provider: google
✓ google
✓ Initialising
✓ Deploying
✓ VmInstance 1/1
1 resource deployed of 1 <span class="token function" >type</span> and 1 provider
Running OnDeployed resources on 1 provider: google
✓ google
✓ Initialising
Command <span class="token string" >"gc apply"</span> executed <span class="token keyword keyword-in" >in</span> 2m 5s
</code></pre><p>At this stage, the server should be up and running.</p>
<p>To check the state of the deployment, you can use the <strong>list</strong> command.</p>
<pre><code>gc list
</code></pre><p>To reduce your cloud provider bills, destroy the infrastructure:</p>
<pre><code>gc destroy
</code></pre><p>Things can get a little bit more complex with more resources and the dependencies between them. The <strong>gc graph</strong> command produces a graph displaying the infrastructure:</p>
<p><figure><img src="/74d8f958386de857b2cfa6991cd2e45d.svg" alt="graph" class="" width="" height="" /><figcaption>graph</figcaption></figure></p>
<p>GruCloud takes care of creating and destroying the resources in the right order.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_grucloud_-differ-from-other-solutions-" id="how-does-_grucloud_-differ-from-other-solutions-"></a><span class="text">How does <em>GruCloud</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_grucloud_-differ-from-other-solutions-">#</a></h2>
<p>The two other solutions on the market are <a href="https://www.terraform.io/">Terraform</a> and <a href="https://www.pulumi.com/">Pulumi</a>.</p>
<p>With Terraform, the infrastructure code is written in <strong>Domain Specific Language</strong> called HCL, as opposed to Pulumi and GruCloud, where you use JavaScript, a <strong>General Purpose Language</strong>.</p>
<p>The other difference is in the implementation of the numerous resources for the various cloud providers. JavaScript for GruCloud and Go for Terraform and Pulumi.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_grucloud_-" id="why-did-you-develop-_grucloud_-"></a><span class="text">Why did you develop <em>GruCloud</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_grucloud_-">#</a></h2>
<p>Infrastructure as Code is gaining traction and popularity. At the moment, there is no tool entirely written in JavaScript, and GruCloud is filling this gap.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Many resources on various cloud providers need to be implemented. For example, AWS Lambda and Kubernetes are missing at the moment. Fortunately, adding a new simple resource is relatively easy. Complete with testing and documentation, it should take about a day on average.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_grucloud_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_grucloud_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>GruCloud</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_grucloud_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Many companies are moving from owning their equipment to renting from cloud providers. So the pool of potential users is still increasing. The future is bright.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Stay focus on one problem at a time, and finish it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Richard Tong, the author of <a href="https://github.com/a-synchronous/rubico">rubico</a>, an asynchronous functional programming library heavily used by GruCloud.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>For more information about this project, visit <a href="https://grucloud.com">GruCloud</a></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I find it highly interesting it's possible to define and orchestrate infrastructure by using JavaScript alone. That means I don't have to become an expert at navigating a particular provider's user interface, which seems like a win.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://www.grucloud.com/">Head to GruCloud site</a> to learn more about the solution, <a href="https://github.com/grucloud/grucloud">star them on GitHub</a>, and <a href="https://twitter.com/grucloud_iac">follow them on Twitter</a>.</blockquote>Renderlesskit React - Collection of composable headless hooks - Interview with Anurag Hazraarenderlesskitreactcollectionofcomposableheadlesshooksinterviewwithanuraghazra2021-01-29t00:00:00z2021-01-29T00:00:00Z<p>When developing user interfaces with React, you often create a set of basic primitives. Another option is to consume them from a third-party library and perhaps build more complex components yourself.</p>
<p>To learn about a potential solution to the problem, I am interviewing <a href="https://twitter.com/anuraghazru">Anurag Hazra</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/ac875caed366acf3a501c47e66883a3c?s=200" alt="Anurag Hazra" class="author" width="100" height="100" /><figcaption>Anurag Hazra</figcaption></figure></p>
<p>Hi! My name is Anurag, and I'm a frontend engineer from India currently working at <a href="https://timeless.co">timelessco</a>. I enjoy building interactive user interfaces and also love to do creative coding in my free time.</p>
<p>I love to contribute to open source projects and even created a few of my own.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_renderlesskit-react_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_renderlesskit-react_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Renderlesskit React</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_renderlesskit-react_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/timelessco/renderlesskit-react">Renderlesskit React</a> is a component library that's focusing on flexibility, reusability, and accessibility. We are developing the solution at timelessco and I have been working with my colleague <a href="https://twitter.com/navin_moorthy">Navin Moorthy</a> on this project for the past six months.</p>
<p>It's a <strong>renderless</strong> component library. The solution handles behaviors, logic, and accessibility via React hooks. The approach enables the consumers to have full control over styling while tackling the other concerns.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://renderlesskit-react.vercel.app">Check out our Storybook preview</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_renderlesskit-react_-work-" id="how-does-_renderlesskit-react_-work-"></a><span class="text">How does <em>Renderlesskit React</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_renderlesskit-react_-work-">#</a></h2>
<p>Under the hood, Renderlesskit uses <a href="http://reakit.io/">Reakit</a> created by <a href="https://twitter.com/diegohaz">Diego Haz</a>. The toolkit comes with excellent base components and helpful utilities for handling accessibility and hooks based component systems.</p>
<p>There are two parts for creating any components in Reakit: component hook and state hook.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#component-hook" id="component-hook"></a><span class="text">Component Hook</span><a class="header-anchor-select" href="https://survivejs.com/#component-hook">#</a></h3>
<p>The component hook handles all the logic which the component needs and returns the component's accesibility logic and HTML props. We can also add event listeners/refs/a11y props in this hook too.</p>
<p>Reakit provides a wonderful <code>createHook</code> function which is used to create the hooks. The cool thing is that we can even combine multiple hooks together to supercharge our components easily. It looks something like this:</p>
<pre><code class="lang-ts"><span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> useAccordionPanel <span class="token operator" >=</span> createHook<span class="token operator" ><</span>
AccordionPanelOptions<span class="token punctuation" >,</span>
AccordionPanelHTMLProps
<span class="token operator" >></span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> <span class="token string" >"AccordionPanel"</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// We can compose with other hooks</span>
compose<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>unstable_useId<span class="token punctuation" >,</span> useDisclosureContent<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// Keys are generated automatically</span>
keys<span class="token punctuation" >:</span> ACCORDION_PANEL_KEYS<span class="token punctuation" >,</span>
<span class="token function" >useProps</span><span class="token punctuation brackets-parentheses" >(</span>options<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> ref<span class="token punctuation" >:</span> htmlRef<span class="token punctuation" >,</span> <span class="token operator" >...</span>htmlProps <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> accordionId <span class="token operator" >=</span> <span class="token function" >getAccordionId</span><span class="token punctuation brackets-parentheses" >(</span>options<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Add event listeners, do a11y logic, and other things</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"aria-labelledby"</span><span class="token punctuation" >:</span> accordionId<span class="token punctuation" >,</span>
<span class="token operator" >...</span>htmlProps<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Reakit also provides a <code>createComponent</code> function that connects the hook to a React component.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#state-hook" id="state-hook"></a><span class="text">State Hook</span><a class="header-anchor-select" href="https://survivejs.com/#state-hook">#</a></h3>
<p>The state hook is the main hook which handles all of the component state. It's a plain custom React hook:</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >useAccordionState</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// logic</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span> <span class="token operator" >...</span>state <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>Then we can create our components by combining those two hooks and use them in our app:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >App</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> state <span class="token operator" >=</span> <span class="token function" >useAccordionState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Accordion</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >state</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>AccordionTrigger</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >state</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
Trigger <span class="token number" >1</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>AccordionTrigger</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>AccordionPanel</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >state</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>Panel <span class="token number" >1</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>AccordionPanel</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>AccordionTrigger</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >state</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
Trigger <span class="token number" >2</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>AccordionTrigger</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>AccordionPanel</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >state</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>Panel <span class="token number" >2</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>AccordionPanel</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Accordion</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>With this approach, the benefit we get is that all our components are hook based and completely unstyled. The users can compose one or multiple hooks together to extend the system, just like Lego bricks.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://survivejs.com/blog/reakit-interview">learn how Reakit works from the interview of Diego Haz</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_renderlesskit-react_-differ-from-other-solutions-" id="how-does-_renderlesskit-react_-differ-from-other-solutions-"></a><span class="text">How does <em>Renderlesskit React</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_renderlesskit-react_-differ-from-other-solutions-">#</a></h2>
<p>The main difference is that unlike traditional component libraries, Renderlesskit does not have any styling opinions nor does it depend on any CSS frameworks while providing as much flexibility as possible.</p>
<p>It also differs from other libraries in the aspect of the core system. We are only extending the Reakit component ecosystem using <a href="https://www.npmjs.com/package/reakit-system">reakit-system</a>. It is similar to <a href="https://react-spectrum.adobe.com/react-aria/index.html">react-aria</a> but uses reakit-system to achieve the same behaviors.</p>
<p>There are other similar hooks/component libraries out there that solve the issue nicely too. Consider the examples below:</p>
<ul>
<li><a href="https://bumbag.style/">Bumbag</a></li>
<li><a href="https://radix-ui.com/">radix-ui</a></li>
<li><a href="https://github.com/downshift-js/downshift">downshiftjs</a></li>
<li><a href="https://github.com/tailwindlabs/headlessui">headlessui</a></li>
<li><a href="https://github.com/adobe/react-spectrum">react-spectrum</a></li>
</ul>
<p>These are all amazing libraries which are very similar at core, but what we wanted is an in-house component library at timelessco to use as a foundation for our next design system.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://github.com/timelessco/renderlesskit-react/blob/master/docs/core-principles.md">read more about our core concepts online</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_renderlesskit-react_-" id="why-did-you-develop-_renderlesskit-react_-"></a><span class="text">Why did you develop <em>Renderlesskit React</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_renderlesskit-react_-">#</a></h2>
<p>Our CEO, <a href="https://twitter.com/_iamsandeep">Sandeep Prabhakaran</a>, came up with the idea as we needed an in-house component library which we can manage and support our requirements in the future. The hope is that we can build a UI library and ultimately to create a <strong>nocode design system designer</strong>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The next step is to create an in-house design system for our company using Renderlesskit itself.</p>
<p>We have already started working on it, and we are using <a href="https://tailwindcss.com/">Tailwind</a> for styling and the solution as a base.</p>
<p>After finishing the design system, we plan on creating a system for our design tokens in Figma so that these tokens can be in sync with our code via a common theme specification. We are still researching this topic.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can find the source code of our design system here: <a href="https://github.com/timelessco/renderlesskit-react-tailwind">@renderlesskit/react-tailwind</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In general, I'm seeing a trend in web development which is "rediscovering lost patterns". We are now leaning towards making things less complicated and using the platform. For example:</p>
<ul>
<li><a href="https://tailwindcss.com/">Tailwind</a> rediscovered the way we use CSS.</li>
<li><a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html">React server components</a> rediscovered the way we write server-side code.</li>
</ul>
<p>I also think that tooling will become more and more sophisticated and faster in the future. We already have <a href="https://www.snowpack.dev/">Snowpack</a>, <a href="https://swc.rs">swc</a>, <a href="https://rome.tools/">Rome</a>, and <a href="https://vitejs.dev/">Vite</a> doing excellent work on pushing the limits.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>The only advice I can give them is to stay focused, don't feel overwhelmed, start slow, and keep trying! :)</p>
<p>Learn the fundamentals first and then jump to more advanced topics later. Grasping the fundamentals goes a long way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/kumar_abhirup">Kumar Abhirup</a> is doing excellent work on his project <a href="http://propagate.at/">propagate.at</a>.</p>
<h1 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h1>
<p>From the past few month we worked on this project and learned a lot about accessibility and building a component library.</p>
<p>Renderlesskit would not have been possible without the following people:</p>
<ul>
<li>My colleague <a href="https://twitter.com/navin_moorthy">Navin Moorthy's</a> excellent skills</li>
<li><a href="https://twitter.com/_iamsandeep">Sandeep Prabhakaran's</a> ideas and logical thinking.</li>
<li>Amazing <a href="https://reakit.io">reakit</a> by <a href="https://twitter.com/diegohaz">Haz</a></li>
<li><a href="https://chakra-ui.com/">chakra-ui</a> by <a href="https://twitter.com/thesegunadebayo">Segun</a></li>
<li><a href="https://twitter.com/devongovett">Devon Govett</a> for his amazing work on <a href="https://github.com/adobe/react-spectrum">react-spectrum</a> which we also took inspiration from.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Anurag! I like the approach you chose as it avoids the pitfalls of coupling styling to components. I've seen this cause trouble many times.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://github.com/timelessco/renderlesskit-react">check out Renderlesskit React on GitHub</a>.</blockquote>PixelCraft - a Pixel Art Editor - Interview with Abhishek Chaudharyapixelcraftapixelarteditorinterviewwithabhishekchaudhary2021-01-19t00:00:00z2021-01-19T00:00:00Z<p>It's cool to write small web applications for the sake of learning. You can set the boundaries yourself and experiment with new technologies.</p>
<p><a href="https://twitter.com/theabbiee">Abhishek Chaudhary</a> developed a pixel art editor to learn, and in this interview he'll give an overview of the tool.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/873c18955bfdb8cd225ede1348eab4ec?s=200" alt="Abhishek Chaudhary" class="author" width="100" height="100" /><figcaption>Abhishek Chaudhary</figcaption></figure></p>
<p>I am a web developer who likes making web applications. I create apps that are fun and useful. I also enjoy contributing to open source.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I have a portfolio online at <a href="https://theabbie.github.io">theabbie.github.io</a> and you can <a href="https://www.freecodecamp.org/news/author/theabbie/">find my articles at freeCodeCamp</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_pixelcraft_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_pixelcraft_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>PixelCraft</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_pixelcraft_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>PixelCraft is a pixel art editor; you can create pixel art images and animated GIFs using this tool. It is effortless to use and is a progressive web app, i.e., you can use it entirely within a web browser on any device.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_pixelcraft_-work-" id="how-does-_pixelcraft_-work-"></a><span class="text">How does <em>PixelCraft</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_pixelcraft_-work-">#</a></h2>
<p>PixelCraft uses HTML5 canvas to draw graphics on a webpage. You can create all sorts of pixel arts using it. For creating animated GIFs, it uses <a href="https://github.com/jnordberg/gif.js/">gif.js</a>, and it then renders GIF within the browser.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about the technical details of the application, <a href="https://www.freecodecamp.org/news/how-to-make-a-pixel-art-editor/">read Abhishek's code oriented article about PixelCraft</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-challenges-did-you-have-while-developing-_pixelcraft_-" id="what-challenges-did-you-have-while-developing-_pixelcraft_-"></a><span class="text">What challenges did you have while developing <em>PixelCraft</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-challenges-did-you-have-while-developing-_pixelcraft_-">#</a></h2>
<p>The biggest challenge was making it responsive, i.e., compatible on all screen sizes; this is challenging because there's less space available on mobile devices. At the same time, we needed to utilize the large space available on the desktop.</p>
<p>Another challenge was to keep the code-base maintainable, so it's easy to add new features. At the same time, the source remains readable for the wider community.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_pixelcraft_-differ-from-other-solutions-" id="how-does-_pixelcraft_-differ-from-other-solutions-"></a><span class="text">How does <em>PixelCraft</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_pixelcraft_-differ-from-other-solutions-">#</a></h2>
<p>It differs in terms of simplicity and ease of use. Most other pixel art editors require some practice to master them, PixelCraft is easy to use compared to other options. It is also mobile-friendly so that you can use it on your phone too.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Alternatives: <a href="https://github.com/lospec/pixel-editor">Lospec</a>, <a href="https://www.pixilart.com/">Pixilart</a>, and <a href="https://www.piskelapp.com/">Piskel</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_pixelcraft_-" id="why-did-you-develop-_pixelcraft_-"></a><span class="text">Why did you develop <em>PixelCraft</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_pixelcraft_-">#</a></h2>
<p>Because it was a fun project and I wanted to build an easy to use pixel art editor which people could play around with. It has easy to understand design and is compatible with all screen sizes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We plan to add many features to PixelCraft to make it more useful without losing its simplicity, adding support for useful editing features like layers, onion skinning, and much more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_pixelcraft_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_pixelcraft_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>PixelCraft</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_pixelcraft_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Web development has been very underappreciated since application development became popular. People don't understand that web apps can do most of the things that don't need a native app. They also provide performance and security.</p>
<p>Web development has been gaining popularity thanks to developers worldwide and is likely to become more prevalent in the future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>There is no better way to learn than to build things; when you create something unique and share it with the community, they appreciate it, and that motivates you to do even better. Start small, keep trying new things, you will master it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I would suggest <a href="https://mobile.twitter.com/anuraghazru">Anurag Hazra</a>. He has been building great things and would be very insightful on this topic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>The web is a great place and the easiest to share your creations with people. Building great stuff is never tricky. Find the thing that motivates you, and don't give up.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Abhishek! I hope you push your pixel editor further although it looks nice already.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://pixelcraft.web.app/">try PixelCraft online</a> and <a href="https://github.com/rgab1508/PixelCraft">find the source on GitHub</a>.</blockquote>Nullstack - Full-stack JavaScript Components - Interview with Christian Mortaroanullstackfullstackjavascriptcomponentsinterviewwithchristianmortaro2021-01-15t00:00:00z2021-01-15T00:00:00Z<p>If you look into what happened during the past few years in the world of JavaScript, you can see that component thinking made it to the mainstream. Even with this, there's still some kind of a boundary between the frontend and the backend.</p>
<p>In this interview, we'll learn about <a href="https://twitter.com/mortaro_">Christian Mortaro</a>'s approach to the problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/c8b87c4d6b85b9bee5bfba5424dec6de?s=200" alt="Christian Mortaro" class="author" width="100" height="100" /><figcaption>Christian Mortaro</figcaption></figure></p>
<p>I am a 28 years old Brazilian programmer, and I recently found out that I'm on the autism spectrum. I fell in love with code back when I was 11 years old as It was one of the few things that made sense to me since my social skills are pretty bad.</p>
<p>I prefer to spend my days in front of my computer working and testing new libs for fun since I tend to have sensory overload when I go outside.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_nullstack_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_nullstack_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Nullstack</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_nullstack_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Nullstack is a full-stack framework for building progressive web applications. It connects a stateful UI layer to specialized microservices in the same component using vanilla JavaScript.</p>
<p>Nullstack components are regular JavaScript classes but with both the frontend and backend. I want the developer to have a full-stack application by default without dealing with all the decisions.</p>
<p>Nullstack allows you to make your application work as fast as possible, but it is also flexible enough so you can refactor it into something beautiful.</p>
<p>Consider the example below where a stateful component uses a server function to read from a database connection saved on the server context:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> Nullstack <span class="token keyword keyword-from" >from</span> <span class="token string" >"nullstack"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-class" >class</span> <span class="token class-name" >BookPage</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Nullstack</span> <span class="token punctuation brackets-braces" >{</span>
title <span class="token operator" >=</span> <span class="token string" >""</span><span class="token punctuation" >;</span>
description <span class="token operator" >=</span> <span class="token string" >""</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-static" >static</span> <span class="token keyword keyword-async" >async</span> <span class="token function" >findBookBySlug</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> database<span class="token punctuation" >,</span> slug <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token keyword keyword-await" >await</span> database
<span class="token punctuation" >.</span><span class="token function" >collection</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"books"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >findOne</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> slug <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-async" >async</span> <span class="token function" >initiate</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> page<span class="token punctuation" >,</span> params <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> book <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >findBookBySlug</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
slug<span class="token punctuation" >:</span> params<span class="token punctuation" >.</span>slug<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>book<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
page<span class="token punctuation" >.</span>title <span class="token operator" >=</span> book<span class="token punctuation" >.</span>title<span class="token punctuation" >;</span>
Object<span class="token punctuation" >.</span><span class="token function" >assign</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >,</span> book<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
page<span class="token punctuation" >.</span>status <span class="token operator" >=</span> <span class="token number" >404</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>section</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h1</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>title<span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h1</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>description<span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>section</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> BookPage<span class="token punctuation" >;</span>
</code></pre>
<p>In the example, Nullstack server-side renders and returns SEO ready HTML when the user enters the application from this route. When the user navigates to this page, an API call is made to an automatically generated micro-service that returns the book as JSON and updates the DOM.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_nullstack_-work-" id="how-does-_nullstack_-work-"></a><span class="text">How does <em>Nullstack</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_nullstack_-work-">#</a></h2>
<p>Nullstack generates two bundles: one for the server and one for the client with the least dependencies possible. The framework is responsible for deciding when to use an API call or using a local function; the programmer only needs to think about the behavior of their functions.</p>
<p>Each environment has its context, which is a proxy passed to every function. The feature makes Nullstack a horizontal structure instead of a tree, which is very important for my daily job since I often have to move code around based on customer feedback, and I wouldn't want to be locked into a structure.</p>
<p>In the example below, we are parsing the README only when the application starts and saving it in the server context memory:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> Nullstack <span class="token keyword keyword-from" >from</span> <span class="token string" >"nullstack"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> readFileSync <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"fs"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Remarkable <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"remarkable"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-class" >class</span> <span class="token class-name" >About</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Nullstack</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-static" >static</span> <span class="token keyword keyword-async" >async</span> <span class="token function" >start</span><span class="token punctuation brackets-parentheses" >(</span>context<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> text <span class="token operator" >=</span> <span class="token function" >readFileSync</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"README.md"</span><span class="token punctuation" >,</span> <span class="token string" >"utf-8"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> md <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Remarkable</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
context<span class="token punctuation" >.</span>readme <span class="token operator" >=</span> md<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span>text<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-static" >static</span> <span class="token keyword keyword-async" >async</span> <span class="token function" >getReadme</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> readme <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> readme<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-async" >async</span> <span class="token function" >initiate</span><span class="token punctuation brackets-parentheses" >(</span>context<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token operator" >!</span>context<span class="token punctuation" >.</span>readme<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
context<span class="token punctuation" >.</span>readme <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >getReadme</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> readme <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>article</span> <span class="token attr-name" >html</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>readme <span class="token operator" >||</span> <span class="token string" >""</span><span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> About<span class="token punctuation" >;</span>
</code></pre>
<p>The client invokes a server function and saves the README content in the client context that is available offline on other views. Both <code>readFileSync</code> and <code>remarkable</code> are excluded from the client bundle. There are many optimizations in this code, but the component looks almost as simple as a basic one.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_nullstack_-differ-from-other-solutions-" id="how-does-_nullstack_-differ-from-other-solutions-"></a><span class="text">How does <em>Nullstack</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_nullstack_-differ-from-other-solutions-">#</a></h2>
<p>The nice answer is that it was, since the beginning, thought of as a complete solution that uses the same concept to solve every problem. The approach makes Nullstack very easy to learn since picking up the first steps is enough to allow you to code full-stack.</p>
<p>I used many more complicated stacks in the past, and you could always notice where things were glued together.</p>
<p>The not so nice answer is that it doesn't differ that much from any other web framework. All of the options have the same goal, and eventually, one inspires the other.</p>
<p>Nowadays, the market is trending towards a "one size fits all" approach where React is the solution for everything. If you think of frameworks as shoes, Nullstack is just a shoe that fits my size and makes me comfortable.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_nullstack_-" id="why-did-you-develop-_nullstack_-"></a><span class="text">Why did you develop <em>Nullstack</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_nullstack_-">#</a></h2>
<p>My friends and I were getting burned out of web development as it seemed like things didn't match our thought process.</p>
<p>The first idea was to make an extension for React to make it look a bit more like Ember.js and add a server layer very similar to the server components they just announced. However, we got carried away and started modifying it so much that we eventually reset the project as its own thing.</p>
<p>I wrote a class that would be "the ideal code for us" and reverse-engineered the idea until it worked.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll keep developing my freelancing projects with Nullstack as I finally don't feel the need to change stacks at every project anymore. The work will result in more features being extracted into Nullstack as long as they follow the same principles. It's essential to me that Nullstack remains a single concept.</p>
<p>Besides that, I will focus on creating content on Youtube both in English and Portuguese, so more people can understand it while I get the plus of developing my social skills. More people have the same barriers as me, and I hope to reach them, so they don't burn out of web development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_nullstack_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_nullstack_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Nullstack</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_nullstack_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I can't tell what the future is, but I can tell you what I wish it were. I prefer a more decentralized web. For the last years, I've been passionate about PWAs since it removed the centralization of the stores.</p>
<p>The next step I'd like to see decentralized is the frameworks, so developers can pick and choose a stack that makes them happy instead of looking good on the job market.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Test everything yourself, look inside the code, and don't merely use things because the community says so.</p>
<p>Breaking stuff is the most fun part of developing, and there is no shame in figuring out what you like is not the most popular thing as long as you can deliver results.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Honestly, I have no idea. I lived in a "cave" for the last 28 years; I just gathered the courage to make <a href="https://twitter.com/mortaro_">a Twitter account</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I want to thank everyone who gave me feedback and for the opportunity of this interview. Nullstack is almost two years old, and my poor communication skills and anxiety prevented me from showing it to people. I'm thrilled that none of the catastrophic scenarios I had in my head happened so far.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Christian! I find it refreshing that there's movement to have shared logic in the same files while having transparent optimizations in place. Perhaps the division between the frontend and the backend will become blurry over time.</p>
<p>To learn more about Nullstack, <a href="https://nullstack.app/">head over to the project site</a>. You can also <a href="https://github.com/nullstack/nullstack">find the project on GitHub</a>.</p>
<p>There's also a brief introduction to the topic on YouTube:</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/l23z00GEar8" frameborder="0" allowfullscreen></iframe>
Preloading Web Assetsapreloadingwebassets2020-12-08t00:00:00z2020-12-08T00:00:00Z<p>Preloading data is useful yet perhaps underused web development technique. When it comes to performance, the best work is the one you don't have to do. The second best is the one you can do ahead of time.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content">Preloading</a> achieves exactly this as it gives the browser a hint to begin loading and evaluating script as soon as possible. In my use case, I used preloading to speed up the worker architecture of my application by loading them immediately when the first view is shown and the user has to log in.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#wrapping-the-idea-of-preloading-as-a-script" id="wrapping-the-idea-of-preloading-as-a-script"></a><span class="text">Wrapping the idea of preloading as a script</span><a class="header-anchor-select" href="https://survivejs.com/#wrapping-the-idea-of-preloading-as-a-script">#</a></h2>
<p>Although I often use webpack in my projects, in this particular case I found it most useful to wrap the behavior as a small script to invoke after the main build has completed. Note that I use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/modulepreload">modulepreload</a> as <a href="https://web.dev/module-workers/">suggested by Jason Miller</a>.</p>
<p>To get to the point, consider the script below:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> fs <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fs"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> path <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"path"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> glob <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"glob"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// This script writes preload links for workers within the built</span>
<span class="token comment" spellcheck="true" >// source to tell the browser that it should load them beforehand.</span>
<span class="token comment" spellcheck="true" >// That avoids work later on.</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >writePreloads</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> cwd <span class="token operator" >=</span> process<span class="token punctuation" >.</span><span class="token function" >cwd</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// The assumption here is that we're processing</span>
<span class="token comment" spellcheck="true" >// build/index.html.</span>
<span class="token keyword keyword-const" >const</span> indexPath <span class="token operator" >=</span> path<span class="token punctuation" >.</span><span class="token function" >join</span><span class="token punctuation brackets-parentheses" >(</span>cwd<span class="token punctuation" >,</span> <span class="token string" >"build"</span><span class="token punctuation" >,</span> <span class="token string" >"index.html"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> indexFile <span class="token operator" >=</span> fs<span class="token punctuation" >.</span><span class="token function" >readFileSync</span><span class="token punctuation brackets-parentheses" >(</span>indexPath<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
encoding<span class="token punctuation" >:</span> <span class="token string" >"utf8"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// In my case, I wanted to preload workers so I choose those</span>
<span class="token comment" spellcheck="true" >// from the output and then add related links to the document</span>
<span class="token comment" spellcheck="true" >// head.</span>
<span class="token keyword keyword-const" >const</span> workerFiles <span class="token operator" >=</span> glob<span class="token punctuation" >.</span><span class="token function" >sync</span><span class="token punctuation brackets-parentheses" >(</span>
path<span class="token punctuation" >.</span><span class="token function" >join</span><span class="token punctuation brackets-parentheses" >(</span>cwd<span class="token punctuation" >,</span> <span class="token string" >"build"</span><span class="token punctuation" >,</span> <span class="token string" >"static"</span><span class="token punctuation" >,</span> <span class="token string" >"js"</span><span class="token punctuation" >,</span> <span class="token string" >"*.worker.js"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> modifiedIndexFile <span class="token operator" >=</span> indexFile<span class="token punctuation" >.</span><span class="token function" >replace</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token string" >"</head>"</span><span class="token punctuation" >,</span>
workerFiles
<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>p<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> path<span class="token punctuation" >.</span><span class="token function" >relative</span><span class="token punctuation brackets-parentheses" >(</span>path<span class="token punctuation" >.</span><span class="token function" >join</span><span class="token punctuation brackets-parentheses" >(</span>cwd<span class="token punctuation" >,</span> <span class="token string" >"build"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> p<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token punctuation brackets-parentheses" >(</span>p<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> `<span class="token operator" ><</span>link rel<span class="token operator" >=</span><span class="token string" >"modulepreload"</span> href<span class="token operator" >=</span><span class="token string" >"/${p}"</span> <span class="token operator" >/</span><span class="token operator" >></span>`
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >join</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >""</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >+</span> <span class="token string" >"</head>"</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
fs<span class="token punctuation" >.</span><span class="token function" >writeFileSync</span><span class="token punctuation brackets-parentheses" >(</span>indexPath<span class="token punctuation" >,</span> modifiedIndexFile<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>require<span class="token punctuation" >.</span>main <span class="token operator" >===</span> module<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >writePreloads</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> writePreloads<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>If you end up using the script, make sure to install <a href="https://www.npmjs.com/package/glob">glob</a> as a dependency to your project. The code could be generalized further and I only wanted to give you a basic idea so you can adjust it to your needs.</p>
<p>It's good to note that it's not idempotent by design so if you run it multiple times, it will add the tags multiple times as well. One way to avoid the problem would be to use something like <a href="https://www.npmjs.com/package/cheerio">cheerio</a> to detect the case or rely on a pure JavaScript based check.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>For those interested, it's possible to wrap the behavior within a webpack plugin. I've written in detail how to do this in <a href="https://survivejs.com/webpack/extending/plugins/">the plugins chapter</a> of my webpack book.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#when-to-use-" id="when-to-use-"></a><span class="text">When to use?</span><a class="header-anchor-select" href="https://survivejs.com/#when-to-use-">#</a></h2>
<p>Preloading/prefetching is a powerful technique and it can be useful in the following cases:</p>
<ul>
<li>When inspecting the application and especially its networking behavior, you realize some of the work should occur sooner. This can happen with workers you want to run as soon as possible for example. That's when preloading will come in handy.</li>
<li>If you detect that the user intends to navigate to another page, you could prefetch it. Solutions like <a href="https://guess-js.github.io/">guess.js</a> can be helpful here.</li>
</ul>
<p>You shouldn't use the techniques for each asset as that would defeat the point. Consider it as a means of prioritization of work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you find the technique useful. At least in my use case it made a definite difference as we were able to move loading earlier in the process to avoid work later.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Ivan Akulov has <a href="https://3perf.com/blog/link-rels/">explained the difference between preloading, prefetching and other options</a> in detail over at his blog.</blockquote>CV Compiler - The Fastest Way to Improve Your CV - Interview with Andrew Stetsenkoacvcompilerthefastestwaytoimproveyourcvinterviewwithandrewstetsenko2020-12-01t00:00:00z2020-12-01T00:00:00Z<p>When you apply for a new position or a business case, often people want to see your CV (Curriculum Vitae). Although it sounds simple to create one, it's far from it.</p>
<p><a href="https://twitter.com/Stetsenko_me">Andrew Stetsenko</a> has created a service that addresses the problem. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/ddea473871037bade6bd44e266ae6852?s=200" alt="Andrew Stetsenko" class="author" width="100" height="100" /><figcaption>Andrew Stetsenko</figcaption></figure></p>
<p>I'm an HR-Tech entrepreneur with some coding background and a passion for machine learning (ML) and natural language processing (NLP). I started to learn coding in 2003 with C and Visual Basic and worked as a QA engineer in late 2010. This experience helped me to grow my expertise as a tech recruiter later.</p>
<p>I'm not trying to fix recruiting, but do my best to match companies and software engineers better, so I founded a range of products like <a href="https://cvcompiler.com">CV Compiler</a>, <a href="https://relocate.me">Relocate.me</a>, and <a href="https://glossarytech.com">GlossaryTech</a>.</p>
<p>I'm a big fan of long-distance swimming, coffee tasting, and traveling in my spare time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_cv-compiler_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_cv-compiler_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>CV Compiler</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_cv-compiler_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>CV Compiler is an instant resume-checker aimed at helping its users land more job interviews.</p>
<p>There are many topics on the internet about robots—applicant tracking systems—that help rank your resumes and then reject you if it is missing keywords related to the job description. With our team and external NLP scientists, we spent quite some time researching this topic.</p>
<p>Briefly, all that stuff about ATS-compliant resumes is only misleading people. I even <a href="https://cvcompiler.com/blog/do-you-need-an-ats-compatible-resume-when-applying-for-a-tech-job">wrote an article</a> about it.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>ATS means applicant tracking systems, and generally, the term is used to describe machine-readable CVs.</blockquote><p>Our team followed a more scientific approach, and we built ML algorithms that assess resumes based on feedback from hundreds of recruiters/hiring managers and repeated mistakes in IT resumes.</p>
<p>CV Compiler was launched at the end of 2018. Since then, we've received a great deal of positive feedback from software developers around the world. These developers say that our product helped them significantly increase the number of interviews they received and land their dream job.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_cv-compiler_-work-" id="how-does-_cv-compiler_-work-"></a><span class="text">How does <em>CV Compiler</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_cv-compiler_-work-">#</a></h2>
<p>After uploading a resume, CV Compiler runs over 30 "resume-checking" algorithms to find weak spots and suggests ways to upgrade. There's also a built-in tool that analyzes your resume profile based on the keywords it contains—e.g., a Java developer with DevOps skills—and gives a list of skills worth adding.</p>
<p>We're also offering many helpful tools and content for the successful job hunt, from job search tactics and job search websites to cover letter templates and so on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_cv-compiler_-" id="why-did-you-develop-_cv-compiler_-"></a><span class="text">Why did you develop <em>CV Compiler</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_cv-compiler_-">#</a></h2>
<p>Many job applications are being rejected without an interview because of the poor-quality, faceless resumes. Think about companies like Spotify or Amazon, which receive thousands of resumes.</p>
<p>The experience running <a href="https://relocate.me/search">Relocate.me job board</a> has also shown that resume standards vary from country to country. Moreover, there is no single solution that gives one-size-fits-all recommendations on making your tech resume competitive in the US, Europe, and Asia at the same time.</p>
<p>Most of our resume improvement suggestions to the Relocate.me users were repeatable, meaning we had to explain fundamental resume tweaks repeatedly.</p>
<p>Having many bad resumes from around the world, we first wrote a static Wiki on how to improve a tech resume but then decided to automate the solution to the problem of weak resumes, and that's how CV Compiler was born.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_cv-compiler_-differ-from-other-solutions-" id="how-does-_cv-compiler_-differ-from-other-solutions-"></a><span class="text">How does <em>CV Compiler</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_cv-compiler_-differ-from-other-solutions-">#</a></h2>
<p>We often call our CV Compiler the fastest way to improve a tech resume. Instead of Googling lots, a person gets a list of proven suggestions within 60 seconds after uploading their resume.</p>
<p>There are many online resume analysis tools, but these services are too generic, meaning multiple professionals can use them, and the results are mediocre and very general. In contrast, the CV Compiler is designed for tech professionals.</p>
<p>We use the taxonomy of over 3k keywords and once in a quarter analyze thousands of job listings to determine the most in-demand tech skills for different developers—JavaScript devs, Ruby devs, Python devs, and the like.</p>
<p>We're also working with various dev communities to share this content, which are the skills most tech employers are looking for today, with everyone — hat tip for contributing to one of our articles about <a href="https://cvcompiler.com/blog/game-of-javascript-frameworks-the-most-demanded-front-end-developer-skills-of-2019">marketable JavaScript skills</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-describe-the-technical-stack-of-_cv-compiler_-how-does-it-all-go-together-" id="can-you-describe-the-technical-stack-of-_cv-compiler_-how-does-it-all-go-together-"></a><span class="text">Can you describe the technical stack of <em>CV Compiler</em>? How does it all go together?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-describe-the-technical-stack-of-_cv-compiler_-how-does-it-all-go-together-">#</a></h2>
<p>We're using Python-based library NLTK and spaCy for tokenization, lemmatization, and POS-tagging. Those are the building blocks of our core technology.</p>
<p>The tool for keyword analysis in large data sets—resumes, job descriptions—is built upon a seq2seq model in TensorFlow.</p>
<p>Using the REST API, our website and our B2B customers receive resume improvement suggestions in different formats—JSON, HTML, and PDF.</p>
<p>Based on one of our products (GlossaryTech), we've collected the taxonomy of technical keywords—2,000+—and their relationships.</p>
<p>We're also working on a React-based online resume builder that converts existing resume templates into editable ones. But it's still in progress.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We're currently focused on working with coding boot camps—primarily in the US—and offer a tailored version of CV Compiler to boot camp grads. If you don't have experience in tech or even resume-writing experience, CV Compiler will be a mind-blowing solution to prepare your resume for your first IT job.</p>
<p>Besides this, we're offering an API for Resume Review as a Service. Every recruiting platform or a job board can use our white-label solution to implement an automated resume review as part of their user acquisition strategy and give extra value to existing users.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_cv-compiler_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_cv-compiler_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>CV Compiler</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_cv-compiler_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I'm a big fan of a seamless user experience when software forecasts your next question or your next user step. So, all the power of web development should make the user flow simpler, more accessible, and mobile-friendly.</p>
<p>The last thing to mention is more accurately a standard, not a trend—data protection and web security. The focus means every software development and architecture should be grounded on keeping user data secured. They should also be unquestionably transparent concerning how software vendors are using our data.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Constant learning and dedication are vital in starting your path in web development. Be patient because the most significant challenge will be in finding your first job. However, once you are there and keep learning, your career will be streamlined, and you can achieve great results.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/davyengone">Davy Engone</a> for sure; not only because he is a good friend of mine, but he is a passionate front-end developer who runs <a href="https://www.hackages.io">Hackages</a> education platform for software engineers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I'm incredibly grateful for this interview invitation, and I can only wish your community growth and all the best.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Andrew! It feels like you've found a significant intersection between developers and companies. CV is the interface for recruiting, and it makes sense to put specific attention to it to help people find better jobs and companies to find better fits.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://cvcompiler.com">See CV Compiler online</a> to learn more.</blockquote>"SurviveJS - Webpack 5" - Amazon Version is Availableaquotsurvivejswebpack5quotamazonversionisavailable2020-11-27t00:00:00z2020-11-27T00:00:00Z<p>Doing a paper release of a book comes with additional thrill as once you go paper, there's no going back. Any mistakes you might have in the book are going to remain until you make a new edition. It's for this reason that especially technical books maintain errata separately from the book to list known issues.</p>
<p>At the same time, a paper release will force you to improve especially the way book is laid out as an author and to condense where sensible. Editing requires patience.</p>
<p>The main point of this release is that now the book is <a href="https://www.amazon.com/dp/B08P3S2G66">available through Amazon</a> and my hope is that the wider distribution will help to recoup some of the development cost of the book as it's fairly time intensive. I found that editing takes a good chunk of time especially with my current Leanpub based setup.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>As mentioned in <a href="https://survivejs.com/blog/webpack-book-webpack-5-updates/">the previous release notes</a>, a lot of work has gone into making the book take changes made within webpack 5 into account.</p>
<p>In the current version, that's available through Amazon as well, I've taken care to go further. In addition to simplifying edits and removal of obsolete content, I've made chapters work standalone where possible so they work better in "random access" type of reading as it's a lot to assume that people have seen the earlier content especially if they access it through the web.</p>
<p>As a result, I've trimmed the book further and compared to the previous paper edition, this one is more to the point while still packed with useful reference that complements the official documentation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-3-0" id="book-improvements-3-0"></a><span class="text">Book Improvements - <code>3.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-3-0">#</a></h2>
<p>The book has received <a href="https://github.com/survivejs/webpack-book/compare/v2.8.1...v3.0.0">numerous changes</a> and it's not possible to list them all here. Instead, I've compiled a list of the most important ones:</p>
<ul>
<li>I took specific care to make sure that the formatting of the book is consistent with itself. I.e. filenames are shown as <code>index.js</code> and so on. It's a little thing but it counts.</li>
<li>Where possible, I condensed the layout of the book so that it fits better and less space is wasted. When I started the process months ago, the book had around 360 pages or so and now it's closer to 300. Small changes add up.</li>
<li>I've updated book links where possible and dropped resources that are obsolete by now. Given the JavaScript ecosystem moves fairly fast, it's common for packages to become outdated.</li>
<li>I rewrote the <a href="https://survivejs.com/webpack/output/multiple-pages/">Multiple Pages chapter</a> in a simplified form that works standalone. It gets to the point without anything extra.</li>
<li>The <a href="https://survivejs.com/webpack/techniques/web-workers/">Web Workers chapter</a> is using native support of webpack 5 by default now although it still mentions <strong>worker-loader</strong> as an option.</li>
<li>Given the plugin I use for i18n doesn't work with webpack 5 anymore, I rewrote the <a href="https://survivejs.com/webpack/techniques/i18n/">Internationalization chapter</a> based on code splitting while mentioning related solutions.</li>
</ul>
<p>You can find the book below:</p>
<ul>
<li><a href="https://survivejs.com/webpack/preface/">“SurviveJS — Webpack 5” - Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-webpack/">“SurviveJS — Webpack 5” - Leanpub edition (digital)</a></li>
<li><a href="https://www.amazon.com/dp/B08P2C69PR">“SurviveJS — Webpack 5” - Amazon (paperback)</a></li>
<li><a href="https://www.amazon.com/dp/B08P3S2G66">“SurviveJS — Webpack 5” - Kindle (digital)</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. I support his work this way given mine builds on top of his.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>As the book is in a good shape to be ported to a course format, I'll put effort into that direction to see how it works out. It's not going to be easy but at the same time the restructuring made to the book will help.</p>
<p>The book content feels stable to me now so I don't expect to make any major changes to it for a while. Most likely webpack 6 will require a set of changes again but I would expect them to be smaller unless the configuration format is going to be completely different.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the 3.0 version of the book and find it useful in your work.</p>
<p>Note that I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> if you want to bug me about webpack. You can also <a href="https://github.com/survivejs/ama/issues">ask questions at my AmA</a>.</p>
Plasmic - The fast and fun visual builder for React - Interview with Yang Zhangaplasmicthefastandfunvisualbuilderforreactinterviewwithyangzhang2020-11-16t00:00:00z2020-11-16T00:00:00Z<p>Developing user interfaces with React tends to require effort and often it's done at the level of code. What if we could create user interfaces in the browser itself?</p>
<p>It's this question that we'll explore in this interview of <a href="https://twitter.com/yaaang">Yang Zhang</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/2572a1ab1a4fa866ff7141df35a70563.jpg" alt="Yang Zhang" class="author" width="100" height="100" /><figcaption>Yang Zhang</figcaption></figure></p>
<p>I'm a software engineer currently working full-time on <a href="https://www.plasmic.app/">Plasmic</a>, which is a dream job for me - getting to build novel visual tools for users like myself. It's funny that I'm now deep in the front-end space because I came from a very backend-focused past life.</p>
<p>I used to study distributed database systems in my Ph.D. days, and I worked in applied machine learning at my last startup (<a href="https://infer.com/">Infer</a>). I also used to work at big companies like Google and Microsoft, and now I'm all about tiny startups.</p>
<p>In any case, I did a lot of product engineering over the years, and so building surfaces that directly touch and empower end-users became my drug!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_plasmic_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_plasmic_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Plasmic</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_plasmic_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It's a tool for visually building components and full pages for any web app codebase!</p>
<p>You can use it merely as a no-code full-page builder that plugs into your codebase or use it to design low-level, complex, stateful components like autocompletes and date/time pickers.</p>
<p>One use case we're especially interested in is freeing up developers from requests from marketing, design, content teams, etc. These collaborators can instead directly create the things they want to see without being blocked by developers. Developers can, in turn, work on higher leverage things than pixel-pushing.</p>
<p>Plasmic is starting as a pretty technical tool since we've been focused on letting developers build low-level components. Still, we're actively making the service accessible to anyone. That way, it's as approachable as a <a href="https://www.squarespace.com/">Squarespace</a> or <a href="https://www.wix.com/">Wix</a> (but for your codebase). We're focused on making it scale well up and down this spectrum.</p>
<p>What you build in Plasmic can be consumed flexibly. You can generate actual React code into your codebase, or you can consume it like CMS content over an API - and more. The central point of Plasmic is about integrating into your arbitrary real-world codebase.</p>
<p><figure><img src="/3c03f6d55a31a382c188c768a30dbe68.png" alt="Plasmic User Interface" class="" width="" height="" /><figcaption>Plasmic User Interface</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_plasmic_-work-" id="how-does-_plasmic_-work-"></a><span class="text">How does <em>Plasmic</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_plasmic_-work-">#</a></h2>
<p>It's a browser-based tool, so it's easy to jump in and start creating things on any platform. What you're manipulating is the "real thing," the existing web platform (DOM/CSS/etc.), and not (say) vectors in WebGL or another medium, so what you see is what you ship.</p>
<p>You create your visual designs in Plasmic, and then:</p>
<ol>
<li>Use the Plasmic CLI tool to generate a library of presentational components into your codebase (into your local git repo), or</li>
<li>Consume the content you designed via an API so that you can treat Plasmic more like a CMS (and not need to touch the codebase whenever the content is updated).</li>
</ol>
<p>All the logic/behavior (state bindings, event handlers, etc.) are all done from your code, the usual way. So Plasmic isn't trying to reinvent programming, make your code via a GUI, impose any particular routing/state management, etc.</p>
<p>In the case of codegen, what Plasmic spits out for you is a library of presentational components. They take care of rendering what you designed in the visual tool. If relevant, they provide a flexible interface that lets you wire up any props you want to any element within the component.</p>
<p>For instance, if you're making a simple "new post" form in Plasmic with an input and a button, you'll be provided the PlasmicNewPost component that handles all the styling/layout/tags for you, and you can wire up your real state and event handlers like so:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >NewPost</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> onAdd<span class="token punctuation" >,</span> <span class="token operator" >...</span>rest <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >:</span> NewPostProps<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-square" >[</span>content<span class="token punctuation" >,</span> setContent<span class="token punctuation brackets-square" >]</span> <span class="token operator" >=</span> <span class="token function" >useState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >""</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> history <span class="token operator" >=</span> <span class="token function" >useHistory</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>PlasmicNewPost
<span class="token punctuation brackets-braces" >{</span><span class="token operator" >...</span>rest<span class="token punctuation brackets-braces" >}</span>
postContent<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span>
autoFocus<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
value<span class="token punctuation" >:</span> content<span class="token punctuation" >,</span>
onChange<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >setContent</span><span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span>
postButton<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span>
onClick<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >onAdd</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token function" >createPost</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> content<span class="token punctuation" >,</span> createdAt<span class="token punctuation" >:</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Date</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
history<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"/"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span>
<span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>It's a simple example. As things go much deeper, with components supporting different variations across different states, the composition of components, responsive design, and more.</p>
<p>There's also a new feature within Plasmic called <a href="https://www.plasmic.app/learn/plume/">Plume</a>, which generates the <em>behavior</em> of components for certain well-known component types. So you can create an arbitrary design for (say) a Slider component and then have that fully working and accessible without writing any code – undifferentiated work that is time-consuming and tricky to do yourself.</p>
<p>You can trivially create a bespoke design system this way. Everything is powered by the excellent <a href="https://github.com/adobe/react-spectrum">react-aria and react-stately libraries from Adobe</a>. They go very deep on accessibility and take it further than most libraries I've seen.</p>
<p><figure><img src="/c92b93e836e1a267307aecf67f0e3b81.png" alt="Many different ways to design a slider, one of the component types Plume supports" class="" width="" height="" /><figcaption>Many different ways to design a slider, one of the component types Plume supports</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_plasmic_-differ-from-other-solutions-" id="how-does-_plasmic_-differ-from-other-solutions-"></a><span class="text">How does <em>Plasmic</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_plasmic_-differ-from-other-solutions-">#</a></h2>
<p>I'll compare Plasmic with a few categories in terms of <em>trade-offs</em>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#vector-design-tools" id="vector-design-tools"></a><span class="text">Vector design tools</span><a class="header-anchor-select" href="https://survivejs.com/#vector-design-tools">#</a></h3>
<p>These are drawing programs, great for exploratory mockups. Plasmic is for building the real thing. The trade-off is that Plasmic is more complicated since it lets you express all of the nuance and complexity that comes with production - maintainable abstractions, element semantics and accessibility, combinations of states, more complex layouts, and so on.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#drag-and-drop-site-builders" id="drag-and-drop-site-builders"></a><span class="text">Drag-and-drop site builders</span><a class="header-anchor-select" href="https://survivejs.com/#drag-and-drop-site-builders">#</a></h3>
<p>These are focused on static websites and are closed platforms. Plasmic focuses on flexible integration into arbitrary codebases and complex environments. The trade-off is that having full control of a closed platform is a faster way to build a simple end-to-end solution.</p>
<p>Plasmic is a better fit for complex projects with development teams or (for instance) JAMstack projects that unbundle into best-of-breed CMS, framework, hosting, CI, etc. Plasmic certainly isn't getting into the CI business, for example.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#content-management-systems" id="content-management-systems"></a><span class="text">Content management systems</span><a class="header-anchor-select" href="https://survivejs.com/#content-management-systems">#</a></h3>
<p>You can use Plasmic-as-a-CMS - invoke the client in your site's codebase, and from then on; your content teams can start using Plasmic immediately. We don't try to replace any existing CMSes, and we're looking to build integrations with CMSes and other data sources so that you can directly design with the real data in the tool. (And then you can still consume the output via an API, so it's a bit like layering CMSes.)</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#design-to-code-tools" id="design-to-code-tools"></a><span class="text">Design-to-code tools</span><a class="header-anchor-select" href="https://survivejs.com/#design-to-code-tools">#</a></h3>
<p>These are one-shot code generators that let you copy/paste into your codebase - as soon as you add your logic, you diverge from the original generated code. Plasmic lets you iterate on the design and consume that continuously from your codebase.</p>
<p>The trade-off is that one-shot generated code can look more familiar since you can generate what looks like clean, hand-written code. While Plasmic can also run in this mode and produce such code to generates, it's then consumed as a library of components.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_plasmic_-" id="why-did-you-develop-_plasmic_-"></a><span class="text">Why did you develop <em>Plasmic</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_plasmic_-">#</a></h2>
<p>Two reasons:</p>
<ol>
<li>Push the envelope on collaboration between developers and non-developers, such as designers and content teams. For instance, today, developers do the dirty work of recreating mockups manually using code, and designers are accountable for the developer's attention to detail on this grunge work. Once developers integrate Plasmic into their codebase, designers - and anyone else - can step in and directly edit what ships into production, and developers are freed up to do higher-leverage work.</li>
<li>Wanting better developer tools. <a href="https://developers.google.com/web/tools/chrome-devtools">Chrome DevTools</a> are probably the most-used similar tool, but it focuses on debugging and not on authoring/editing. We wanted to see how far we could rethink developer experience with this. On this front, Plasmic, with its focus on just the presentational layer, is just the beginning.</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Plasmic is a very young project, so we have a ton of work to do.</p>
<p>But we are already starting to see production usage and fascinating use cases that we never anticipated, which is super exciting. The usage is across small and large companies. Our immediate focus is on fully supporting our budding community of developers and also designers.</p>
<p>I also mentioned above that we want to make the editor more streamlined and approachable to non-technical creators.</p>
<p>Another big project is code components - the ability to bring in your own existing React components into the editor.</p>
<p>But we want to cater our roadmap to the use cases that we see from our early adopters. So try out Plasmic and tell us what you would like to see! We would love to start a dialogue.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_plasmic_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_plasmic_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Plasmic</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_plasmic_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>For Plasmic itself, building interfaces like this is just the start. We want to take this further and empower folks to create things that are more dynamic and more end-to-end. Our north star is about dramatically simplifying and accelerating many more facets of building digital products.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Focus on the users, experience, and product goals you are ultimately serving. It's is one of the extraordinary things about front-end development generally, and its proximity to the user. (This proximity is what drew me to focus on the front-end in my career!)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I mentioned above that Plasmic's Plume component system leverages <a href="https://react-spectrum.adobe.com/react-aria">react-aria</a> and <a href="https://react-spectrum.adobe.com/react-stately">react-stately</a>. I would encourage you to chat with Devon Govett. He is the madman behind these projects and the Parcel bundler!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>We welcome you to check out Plasmic; we'd love to hear your thoughts!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Yang! I feel there's a lot of potential in tools that bridge design with development and it looks like you are headed to an amazing direction.</p>
<p>To learn more about Plasmic, see the <a href="https://react-finland.fi/">React Finland</a> session below:</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/E0OBAmt8k6k" frameborder="0" allowfullscreen></iframe>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can also <a href="https://plasmic.app">find Plasmic online</a> and <a href="https://twitter.com/plasmicapp">follow Plasmic on Twitter</a>.</blockquote>Multi-platform applications with JavaScript - Interview with Valentyn Poliskyiamultiplatformapplicationswithjavascriptinterviewwithvalentynpoliskyi2020-11-09t00:00:00z2020-11-09T00:00:00Z<p>Developing multi-platform applications is difficult. Thankfully the advent of JavaScript has made it a possibility for an increasing amount of developers.</p>
<p>To learn more about the approach, I am interviewing Valentyn Poliskyi.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/2a7398291c7cc1c12d2965b785e691cf.jpg" alt="Valentyn Poliskyi" class="author" width="100" height="100" /><figcaption>Valentyn Poliskyi</figcaption></figure></p>
<p>My name is Valentyn Poliskyi, and I'm a full-stack JavaScript developer. Throughout my career, I've been developing different types of applications, including front-end web development, REST, and mobile.</p>
<p>About five years ago, I developed my first website for a local print house. Then, I switched to freelance for a while and tried myself in a couple of outsourcing and outstaffing IT companies.</p>
<p>Now I'm growing professionally as a full-stack developer in one of the distributed teams at <a href="https://www.daxx.com/">Daxx</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-use-javascript-to-develop-applications-for-multiple-platforms-which-technologies-do-you-prefer-to-use-" id="how-would-you-use-javascript-to-develop-applications-for-multiple-platforms-which-technologies-do-you-prefer-to-use-"></a><span class="text">How would you use JavaScript to develop applications for multiple platforms? Which technologies do you prefer to use?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-use-javascript-to-develop-applications-for-multiple-platforms-which-technologies-do-you-prefer-to-use-">#</a></h2>
<p>JavaScript is the primary tool for client-side development as there are no other alternatives for this type of applications (including HTML and CSS as related technologies). <a href="https://reactjs.org/">React</a>, <a href="https://angular.io/">Angular</a>, <a href="https://vuejs.org/">Vue</a> are highly popular front-end frameworks.</p>
<p><a href="https://nodejs.org/">Node.js</a> is commonly used for server-side development. It has a software platform under the hood, based on a V8 engine that converts JS code to machine code and uses a <a href="https://libuv.org/">libuv</a> library for input/output operations (reading/writing files).</p>
<p>If you're using JavaScript for developing mobile applications, you can choose one of several solutions — <a href="https://reactnative.dev/">React Native</a>, <a href="https://ionicframework.com/">Ionic</a>, <a href="https://developers.google.com/web/ilt/pwa">PWA</a>, or <a href="https://cordova.apache.org/">Cordova</a>.</p>
<p>All of these tools work differently. The good thing is that a user won't see any difference between a mobile application written with these technologies and the one written with a "native" programming language.</p>
<p>My preferable stack is the following:</p>
<ul>
<li>Server-side development — Node.js (<a href="https://expressjs.com/">Express</a>)</li>
<li>Client-side development — React.js</li>
<li>Mobile applications — React Native</li>
</ul>
<p>The main reason why I chose these technologies is a vast and robust community that applies these technologies. Based on this, there are many ready-made solutions and practices for solving different kinds of tasks. Especially in the most popular ones, the main issues have been solved already or are being resolved.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-multi-platform-development-look-like-in-practice-are-there-particular-challenges-" id="what-does-multi-platform-development-look-like-in-practice-are-there-particular-challenges-"></a><span class="text">What does multi-platform development look like in practice? Are there particular challenges?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-multi-platform-development-look-like-in-practice-are-there-particular-challenges-">#</a></h2>
<p>Software development is primarily teamwork rather than working with technologies. If you're programming several or all parts of the JavaScript system, it hugely simplifies team communication and task distribution.</p>
<p>If you're understaffed at some stage of the development, any team member will be able to take on an urgent task. This way your front-end team doesn't have to wait for the back-end team to deliver the change as both ends use similar technology.</p>
<p>In the case of correctly constructed components, they can be applied in several applications at once. For example, it could be the logic for processing entities passed between applications. If developers are well aware of JavaScript vulnerabilities and peculiarities, they can easily prevent potential errors, improve performance, and strengthen weak areas.</p>
<p>In the process of development, programmers may face the limitations of a particular tool using JavaScript since the language was initially used only for front-end development. In this case, the best solution would be to identify such problems and develop solutions during the system designing stage.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-are-the-main-options-available-for-developing-multi-platform-applications-" id="what-are-the-main-options-available-for-developing-multi-platform-applications-"></a><span class="text">What are the main options available for developing multi-platform applications?</span><a class="header-anchor-select" href="https://survivejs.com/#what-are-the-main-options-available-for-developing-multi-platform-applications-">#</a></h2>
<p>Usually, if you need to develop a working system within a short time that solves a task of low or medium complexity, you should go with cross-platform applications. And if speed is the main requirement for the system, you should choose faster tools for a specific platform.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-choose-javascript-for-developing-your-multi-platform-applications-" id="why-did-you-choose-javascript-for-developing-your-multi-platform-applications-"></a><span class="text">Why did you choose JavaScript for developing your multi-platform applications?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-choose-javascript-for-developing-your-multi-platform-applications-">#</a></h2>
<p>I decided to choose JavaScript as I knew there were many available projects and a low threshold for entering this technology. Later on, I was assigned to develop new modules, which was one of my project requirements.</p>
<p>I considered different technologies for server-side development and chose Node.js. The main reason for this was specific time frames and a team with strong expertise in this technology. The technical requirements on the project matched the capabilities of the Node.js platform as well.</p>
<p>In a while, we had to develop a mobile application for the client. I chose to use React Native this time. The platform's capabilities did not limit the technical requirements, so we managed to build an up-and-running application for <a href="https://www.android.com/">Android</a> and <a href="https://www.apple.com/ios/">iOS</a> in a short time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-javascript-and-programming-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-javascript-and-programming-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for JavaScript and programming in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-javascript-and-programming-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>No doubt, user devices are getting more powerful day by day. We'll see computing and business logic transferring over to the client level as much as possible. On the server-side, we'll transition to distributed microservices and cloud computing.</p>
<p>JavaScript is developing as a language and <a href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript standard</a> updates are released annually. Trends for the tools used on different platforms, based on JavaScript, go hand in hand with the directions for the "native" technologies for these platforms.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-developers-getting-into-programming-" id="what-advice-would-you-give-to-developers-getting-into-programming-"></a><span class="text">What advice would you give to developers getting into programming?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-developers-getting-into-programming-">#</a></h2>
<p>The best advice I can give is to consider all possible options when solving different tasks and not limit your expertise to one specific domain. It will allow you to choose the optimal solution, considering the particular nature of various tools.</p>
<p>JavaScript is the right choice at an early stage as it forgives mistakes and doesn't make you choose between approaches and a stack when solving tasks. As I mentioned before, there's a large number of different frameworks for front-end development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>JavaScript is a universal problem-solving tool that is easy enough to learn. It is a perfect choice for beginners! However, a developer should be skillful enough to avoid pitfalls.</p>
<p>A significant advantage of JavaScript is many libraries for platforms and a large community of programmers who support existing open-source libraries and develop new ones.</p>
<p>If you're looking for a tool to develop a multi-platform application and technical requirements don't restrict the "native" tools usage, JavaScript is an excellent choice.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Valentyn. It has been interesting to observe the impact of JavaScript on the way we develop applications over years and it seems it's becoming a better option year by year.</p>
Rockpack - Skip config, code React - Interview with Sergey Aleksandrovarockpackskipconfigcodereactinterviewwithsergeyaleksandrov2020-11-02t00:00:00z2020-11-02T00:00:00Z<p>As you might know, configuring webpack isn't the most fun thing in the world and that's exactly the reason why I wrote <a href="https://survivejs.com/webpack/">a thick book about it</a>.</p>
<p>For many React users, either <a href="https://create-react-app.dev/">Create React App</a> (CRA) or framework such as <a href="https://nextjs.org/">Next.js</a> hides a lot of the complexity.</p>
<p>In this interview, we'll learn about a new solution called <a href="https://www.rockpack.io">Rockpack</a> from its creator Sergey Aleksandrov.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/f6360fc2a8708b4924a5e6a7de23d5ed.jpg" alt="Sergey Aleksandrov" class="author" width="100" height="100" /><figcaption>Sergey Aleksandrov</figcaption></figure></p>
<p>Hi, my name is <a href="https://www.gooddev.org/">Sergey Aleksandrov</a>, and I live in Kharkiv, Ukraine. Since 2010 I've become interested in web development. I started my journey with PHP and HTML markup, and after a year, switched to JavaScript. I am currently working as a full-stack developer.</p>
<p>In my free time, I develop my project, <a href="https://www.rockpack.io">Rockpack</a>, and other open source tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_rockpack_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_rockpack_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Rockpack</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_rockpack_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>The main goal of Rockpack is to reduce project setup time from weeks to five minutes.</p>
<p>Rockpack allows you to create a React project with a correctly configured webpack, ESLint, Jest, and related tools.</p>
<p>You get a project with server-side rendering support, CSS (SCSS, LESS) Modules, <strong>@loadable</strong>, SVG as React Component, TypeScript or Babel, support for many file formats, performance optimizations, and so on. Rockpack provides powerful tools for <a href="https://www.rockpack.io/log-driven-development">logging</a> and <a href="https://www.rockpack.io/localization-true-way">localization</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_rockpack_-work-" id="how-does-_rockpack_-work-"></a><span class="text">How does <em>Rockpack</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_rockpack_-work-">#</a></h2>
<p><figure><img src="/46d051af57cd05cfa97d1923bc7ca1d0.png" alt="Rockpack" class="" width="" height="" /><figcaption>Rockpack</figcaption></figure></p>
<p>There are several cases where Rockpack is useful:</p>
<ul>
<li><strong>Beginners</strong> - With the help of Rockpack, any newbie to React can deploy a project of any complexity in a few minutes. Applications can be either regular single page or with a project structure, <a href="https://www.rockpack.io/ssr-1-creating-simple-ssr-application">server-side rendering</a>, etc.</li>
<li><strong>Large projects from scratch</strong> - Rockpack supports most of the webpack best practices and scales to big projects.</li>
<li><strong>Startup</strong> - If you need to quickly check an idea without wasting time on unfolding and setting up the project.</li>
<li><strong>Library or React component</strong> - If you want to write a UMD library or React component, there's support for the ESM/CommonJS builds as well as the minifying.</li>
<li><strong>Legacy projects or modular use.</strong> - You can for example <a href="https://www.rockpack.io/ssr-2-migration-legacy-app-to-ssr">migrate a legacy application to SSR using Rockpack</a>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_rockpack_-differ-from-other-solutions-" id="how-does-_rockpack_-differ-from-other-solutions-"></a><span class="text">How does <em>Rockpack</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_rockpack_-differ-from-other-solutions-">#</a></h2>
<p>Rockpack was built on three ideas: extensibility, modularity, and ease of use.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#extensibility" id="extensibility"></a><span class="text">Extensibility</span><a class="header-anchor-select" href="https://survivejs.com/#extensibility">#</a></h3>
<p>Let's assume we have created an application with <a href="https://github.com/AlexSergey/rockpack/blob/master/packages/starter/README.md">rockpack/starter</a> and we want to extend the configuration. Instead of ejecting, like you would do in CRA, you can override any webpack property while still having the possibility to keep your configuration up to date.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#modularity" id="modularity"></a><span class="text">Modularity</span><a class="header-anchor-select" href="https://survivejs.com/#modularity">#</a></h3>
<p>If you have an existing application, but you need to add server-side rendering, you can add <a href="https://github.com/AlexSergey/rockpack/blob/master/packages/ussr/README.md">rockpack/ussr</a> and <a href="https://github.com/AlexSergey/rockpack/blob/master/packages/compiler/README.md">rockpack/compiler</a> to your project. Doing this converts your application for SSR.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#ease-of-use" id="ease-of-use"></a><span class="text">Ease of use</span><a class="header-anchor-select" href="https://survivejs.com/#ease-of-use">#</a></h3>
<p>Rockpack doesn't decide for you how to design an application. You can use any solution for state management, use any libraries, make any project structure, design any architecture approach, and so on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_rockpack_-" id="why-did-you-develop-_rockpack_-"></a><span class="text">Why did you develop <em>Rockpack</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_rockpack_-">#</a></h2>
<p>It took a long time to develop Rockpack. It all started in mid-2017 when my friend and I decided to create our product - <a href="https://www.cleverbrush.com/">Cleverbrush</a>. It is an online vector photo editor and collage builder. It consists of 5 applications:</p>
<ul>
<li>Landing page</li>
<li>Editor</li>
<li>Collage</li>
<li>Admin</li>
<li>API</li>
</ul>
<p>Initially, we had to create our <strong>webpack.config</strong> for each application and monitor dependencies. The duplication meant we had to fix issues in five places and each time we added features, we had multiple places to modify.</p>
<p>We endured it until we found customers. Customized versions for them required all the same actions, and the routine grew exponentially. Then I thought, what if I write the config once "correctly" to correspond to most types of projects, and we won't have to edit it every time, update dependencies, etc.</p>
<p>To save money, we test through logging as described the <a href="https://www.rockpack.io/log-driven-development">Log Driven Development</a> article.</p>
<p>Rockpack proved to be excellent in solving our project's problems, and I thought that it might be useful not only for us but for the community in general.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I want to cover the compiler module with end-to-end tests and add more articles to <a href="https://www.rockpack.io">the official site</a> and Q&A.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Read the <a href="https://survivejs.com/blog/e2e-interview/">interview about end-to-end testing</a> to learn more about the topic.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_rockpack_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_rockpack_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Rockpack</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_rockpack_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The long term goal is migration to webpack 5. The process will not be easy since many plugins haven't been adapted to the new version at the time of writing.</p>
<p>Speaking about the overall state of web development, currently, I can claim it's relatively stable. The development of the language and frameworks is much smoother than before. We have reached a plateau of productivity, where we are ready to solve real problems.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Set achievable goals for yourself. Start with something simple, so that encourages and motivates you.</p>
<p>One more thing that helps me is creating a plan for the day. I use a large whiteboard on the wall to create a todo list with tasks. Seeing real goals in front of you makes it harder not to achieve them.</p>
<p>Do not be afraid of not knowing something and making mistakes. We are not robots. We are humans - and humans make mistakes, and that's okay.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Our Ukrainian community is very diverse and vibrant. But among all, my top three are:</p>
<ol>
<li><p>Illya Klymov is a Rockstar who makes tons of useful content and has invested titanic efforts in developing the Russian-speaking community. He is an easy-going, erudite person, communication with who will be very interesting. He has his own <a href="https://www.youtube.com/channel/UCW9pyonagDWGMCy7V_Kro6g">YouTube channel</a> with unique content</p>
</li>
<li><p>Vladimir Agafonkin is a creator of a trendy library <a href="https://github.com/Leaflet/Leaflet">Leaflet</a></p>
</li>
<li><p>Yuri Artyukh - he also has <a href="https://www.youtube.com/channel/UCDo7RTzizoOdPjY8A-xDR7g">YouTube channel</a>. The creativity of this person impresses everyone!</p>
</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>SurviveJS is a considerable contributor to the React community; thanks a lot for promoting projects like Rockpack!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Sergey! It's going to be interesting to see how the community adopts the project. I know CRA and Next.js are the standard starting points for many but at the same time there's still room for innovation and improvement.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://www.rockpack.io/fast-setup">Learn how to get started fast with Rockpack</a>. See also <a href="https://github.com/AlexSergey/rockpack">the projet on GitHub</a>.</blockquote>"SurviveJS - Webpack 5" - Further webpack 5 updatesaquotsurvivejswebpack5quotfurtherwebpack5updates2020-10-30t00:00:00z2020-10-30T00:00:00Z<p>Webpack 5 has been available for a couple of weeks by now. <a href="https://survivejs.com/blog/webpack-book-updated-to-webpack-5/">The previous release of the book covered majority of the required changes</a> but I realized there's still more work and updates to be done as I perused through <a href="https://webpack.js.org/blog/2020-10-10-webpack-5-release/">the official release post</a>. You see the results of the additional work in this release of the book.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>The current version of the book has been designed with webpack 5 in mind from the start and I've taken care to use plugins that support webpack 5. The ecosystem is still adapting to the new major release and I've done my share of related work in the packages I help to maintain to ensure effortless transition.</p>
<p>During this work, I've managed to trim the book a bit more to prepare for a paper release. I may work further on the book to make the chapters work better as standalone to support "random access" type of reading and majority of the content works like this already although I'm sure it can be improved still.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-8" id="book-improvements-2-8"></a><span class="text">Book Improvements - <code>2.8</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-8">#</a></h2>
<p>The book has received <a href="https://github.com/survivejs/webpack-book/compare/v2.6.4...v2.8.1">numerous changes</a> and it's not possible to list them all here. Instead, I've compiled a list of the most important ones:</p>
<ul>
<li>I've taken care to replace <strong>webpack-cli</strong> specifing command line flags with configuration as the book is using <a href="https://www.npmjs.com/package/webpack-nano">webpack-nano</a>, a light option, now.</li>
<li>I've condensed and restructured the content at places to fit the pages better.</li>
<li>The cover of the book has been updated to include "webpack 5" in it given that's the focus of the book.</li>
<li>The <a href="https://survivejs.com/webpack/loading/images/">Loading Images</a> chapter has been updated to use <a href="https://webpack.js.org/guides/asset-modules/">asset modules</a>, a new feature from webpack 5. For most use cases, <strong>file-loader</strong> and <strong>url-loader</strong> aren't required anymore. The same change applied to the <a href="https://survivejs.com/webpack/loading/fonts/">Loading Fonts</a> chapter as well.</li>
<li>The <a href="https://survivejs.com/webpack/styling/separating-css/">Separating CSS</a> chapter has become simpler thanks to the changes made to <a href="https://www.npmjs.com/package/mini-css-extract-plugin">mini-css-extract-plugin</a>. It's able to detect automatically now if hot module replacement is enabled or not.</li>
<li>The <a href="https://survivejs.com/webpack/optimizing/minifying/">Minifying</a> chapter is using <a href="https://www.npmjs.com/package/css-minimizer-webpack-plugin">css-minimizer-webpack-plugin</a> instead of <a href="https://www.npmjs.com/package/optimize-css-assets-webpack-plugin">optimize-css-assets-webpack-plugin</a> as it's doing the same and supports webpack 5.</li>
<li>The <a href="https://survivejs.com/webpack/optimizing/performance/">Performance</a> chapter has been reworked with webpack 5 in mind.</li>
<li>The <a href="https://survivejs.com/webpack/extending/plugins/">Extending with Plugins</a> chapter has been rewritten. I realized the testing approach I presented at the <a href="https://survivejs.com/webpack/developing/composing-configuration/">Composing Configuration</a> chapter is a good way to develop plugins so I moved the boilerplate to the plugin chapter and then rewrote the examples against that while using webpack 5 specific APIs.</li>
<li>The <a href="https://survivejs.com/webpack/appendices/searching-with-react/">Searching with React</a> example has been written in a more condensed form to fit the pages better.</li>
</ul>
<p>You can find the book below:</p>
<ul>
<li><a href="https://survivejs.com/webpack/preface/">“SurviveJS — Webpack 5” - Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-webpack/">“SurviveJS — Webpack 5” - Leanpub edition (digital)</a></li>
<li><a href="https://www.amazon.com/dp/B08P2C69PR">“SurviveJS — Webpack 5” - Amazon (paperback)</a></li>
<li><a href="https://www.amazon.com/dp/B08P3S2G66">“SurviveJS — Webpack 5” - Kindle (digital)</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. I support his work this way given mine builds on top of his.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I want to publish the book in a course format through a platform. For this to work, I'll need to take care each chapter works as a standalone so it's likely some of the changes from the work find their to the book as well. Depending on how this work goes, I'll decide whether to use the current version for the paper release or whether I'll integrate those changes to it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the webpack 5 feature update.</p>
<p>Note that I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> if you want to bug me about webpack. You can also <a href="https://github.com/survivejs/ama/issues">ask questions at my AmA</a>.</p>
End-to-end testing - Interview with Erik Foggaendtoendtestinginterviewwitherikfogg2020-10-29t00:00:00z2020-10-29T00:00:00Z<p>Testing is topic that comes up often in software development as it's an important part of verifying what we did works. That said, it's a complex topic given there are <a href="https://survivejs.com/maintenance/code-quality/testing/">so many ways to test</a>.</p>
<p>To understand end-to-end testing better, I am interviewing Erik Fogg from <a href="https://prodperfect.com/">ProdPerfect</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/f690014cadbb73704f92dc91b8336ea5.jpg" alt="Erik Fogg" class="author" width="100" height="100" /><figcaption>Erik Fogg</figcaption></figure></p>
<p>I'm Erik Fogg, the Chief Operating Officer at ProdPerfect. My background is actually in process improvement and operations efficiency, which seems odd for a tech company. But I'm surrounded by lots of great engineers who are much smarter than myself, and a big part of my job is making sure that our customers can embed us into their processes in a way that makes developing software far more efficient.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-end-to-end-testing-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-end-to-end-testing-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe end-to-end testing to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-end-to-end-testing-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>I have a favorite analogy: when you're going to send Curiosity to rove around Mars, you need to test the heck out of it. You test individual components such as the camera or the drive train in isolation; this is like a unit test, and you can do it cheaply and frequently, allowing you to iterate.</p>
<p>You want to make sure the camera and drivetrain can talk to the onboard computer; this is integration testing, and it's a little more expensive. But you do not know if the rover will work on Mars until you put it all together and drive it around in a Mars-like environment.</p>
<p>Above is the essence of end-to-end testing: you put together and launch the entire web application and send a simulated person to use it. During testing, the server and network and integrations and all the chaotic complexities with it are live.</p>
<p>You use end-to-end testing to make sure your application works in the wild. It's expensive and time-consuming, so you can't do it nearly as frequently as your lower-level tests.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-end-to-end-testing-work-" id="how-does-end-to-end-testing-work-"></a><span class="text">How does end-to-end testing work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-end-to-end-testing-work-">#</a></h2>
<p>The old school way of doing end-to-end testing is to launch the application on a test server and use it. We call this "manual testing." It's still done today, and sometimes that's the right way of doing it.</p>
<p>In manual testing, you, as a human, follow several steps on the application, and you check to make sure you're getting the response you want. So you might buy a product and check out, and you want to make sure that the credit card was charged, that the shipping address is correct, etc.</p>
<p>You've probably already figured out that you need to set up your test environment in some way to pretend it charged a credit card or shipped a product. All of that setup is necessary to make sure that you can test your application without (for example) buying a product every time.</p>
<p>The other way of doing end-to-end testing is to automate it. It's here where you get Quality Assurance (QA) Automation Engineers getting involved. Instead of just using the application, QA Automation Engineers write scripts that send simulated users (think: bots) to use the application, and those scripts look for the kinds of responses (such as "credit card is charged" or "product is shipped"). So by writing these scripts, you can test an application more quickly, reliably, and cheaply than doing it manually.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-end-to-end-testing-differ-from-other-solutions-" id="how-does-end-to-end-testing-differ-from-other-solutions-"></a><span class="text">How does end-to-end testing differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-end-to-end-testing-differ-from-other-solutions-">#</a></h2>
<p>It's part of the whole picture. <a href="https://martinfowler.com/articles/practical-test-pyramid.html">Martin Fowler has a great article</a> on how end-to-end testing fits into a more extensive collection of testing methodologies that are necessary for a great software team to ship high-quality code quickly. The Mars Rover analogy works well for us here: you need to test the components of your code in different ways:</p>
<ul>
<li><strong>Unit testing</strong> - Test each module of code to ensure it does what it's intended to do. For example: does your Sales Tax Calculator correctly apply a 6.25% sales tax when you enter Massachusetts as the state?</li>
<li><strong>API/Integration testing</strong> - Modern applications are architected as multiple semi-independent services that work together. API and integration testing makes sure these services can effectively interface with each other (this is a vast oversimplification, but if you're new to API testing, it gets the idea across).</li>
<li><strong>End-to-end testing</strong> - As explained above.</li>
</ul>
<p>All three of these are critical parts of functional testing. There are other important things to test in your application, including performance, load, UX, and accessibility. The pyramid largely encapsulates types of functional testing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-prodperfect-" id="why-did-you-develop-prodperfect-"></a><span class="text">Why did you develop ProdPerfect?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-prodperfect-">#</a></h2>
<p>End-to-end testing is a mess in a lot of ways. It's expensive to build, it's challenging to maintain (you have to change tests when you change code), and it's unstable (some tests will flip between passing and failing even when the code has not changed). Many solutions attempt to make it a little easier to maintain end-to-end testing, but the biggest problem is otherwise going unaddressed: what tests should you write?</p>
<p>You can't write tests for every possible workflow through your application: you'd have a test codebase bigger than the application codebase. So you're forced to prioritize: what do you write?</p>
<p>Teams have different heuristics to decide what they will and won't test, but these are all forms of guessing. That guessing means critical tests are missed, and unnecessary tests are written. Bugs make it into production, and test suites are more extensive (and thus more expensive and longer-running) than they need to be.</p>
<p>ProdPerfect analyzes product analytics data to build and maintain test code automatically. In practice, this means we let the users of our customers tell us what's important to test, just by using the application. We use this data to prioritize tests to make sure what users care about always works. As we can automatically build and maintain the tests, we can support test automation far more efficiently than humans.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-s-next-" id="what-s-next-"></a><span class="text">What's next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-s-next-">#</a></h2>
<p>For us, it's improving our machine learning systems to begin anticipating what new tests need to be developed even earlier in the software development lifecycle. It will be hugely valuable for our customers.</p>
<p>After that, we want to port what we're doing over to mobile applications – which is a lot harder than it seems at first glance. What does the future look like for end to end testing and web development in general?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-see-any-particular-trends-" id="can-you-see-any-particular-trends-"></a><span class="text">Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-see-any-particular-trends-">#</a></h2>
<p>I think the software industry is in a bit of denial about Machine Learning and AI coming after everyone's jobs. Part of that is because we're building the AI – how could it get us?.</p>
<p>Web development is becoming increasingly modular and repeatable. Testing is already there. I see ML and AI getting smart enough, pretty quickly, to build most web applications with a Product Manager at the steering wheel, without engineers writing code. Give it five years.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Well, based on the above: "develop other skills!". Slinging code is excellent, but we've forgotten why engineers exist: to solve problems. Become a great problem solver. Learn to analyze complex situations with limited data and competing priorities. You'll have incredible job security if you can do this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://www.linkedin.com/in/jasonarbon/">Jason Arbon of Test.ai</a>. Guy's a genius; he and I have highly complementary perspectives on testing and software development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>"Don't fear the machine". By the time ML or AI can do something, it's already stopped being a creative human task that stimulates the mind and helps you learn and flourish. We should always be moving forward to the new frontiers of where human creativity is at its best. <a href="https://prodperfect.com/blog/culture/enthusiasm/">I have a post of my own that expands on this.</a></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Erik! I feel end-to-end testing is often underappreciated technique and I hope developers see more value in it in the future.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://prodperfect.com/">learn more about ProdPerfect online</a>.</blockquote>Algolia with Netlify - Easy search for static sites - Interview with Samuel Bodinaalgoliawithnetlifyeasysearchforstaticsitesinterviewwithsamuelbodin2020-10-19t00:00:00z2020-10-19T00:00:00Z<p>Setting up and maintaining a search on a static site is often a chore. You could handle indexing yourself using a solution like <a href="https://lunrjs.com/">Lunr</a> but even with that you'll encounter limitations as the size of the index grows.</p>
<p>That's where services like <a href="https://www.algolia.com/">Algolia</a> come in. To make it easier to integrate with static sites hosted on top of <a href="https://www.netlify.com/">Netlify</a>, <a href="https://github.com/bodinsamuel">Samuel Bodin</a> and his team developed a specific solution that's easy to integrate.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/7a7fbf076d2e3ac5c402cecfdae62b4b?s=200" alt="Samuel Bodin" class="author" width="100" height="100" /><figcaption>Samuel Bodin</figcaption></figure></p>
<p>Hi, my name is Samuel Bodin, and I'm a Senior Software Engineer at Algolia. More specifically, I work on our <a href="https://www.algolia.com/products/crawler/">crawler</a> team, which operates an in-house robot that indexes our customers' websites.</p>
<p>I have studied art, cinema, and photography before changing my path and starting a web career. I have gained experience as a PHP developer and currently use mostly Node.</p>
<p>My current work includes developing our JavaScript crawler, the backend, the frontend, and maintaining our infrastructure.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-algolia-and-netlify-for-someone-who-has-never-heard-of-them-" id="how-would-you-describe-algolia-and-netlify-for-someone-who-has-never-heard-of-them-"></a><span class="text">How would you describe Algolia and Netlify for someone who has never heard of them?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-algolia-and-netlify-for-someone-who-has-never-heard-of-them-">#</a></h2>
<p><a href="https://www.algolia.com/">Algolia</a> is a distributed search engine with a high-speed and simple API that will ingest any JSON record, index it, and allows you to search inside records without any strong technical requirement.</p>
<p><a href="https://www.netlify.com/">Netlify</a> is an automatic website builder and host that easily plugs into your Git repositories and handles all the work required to host a website in a fast and secure way.</p>
<p>Algolia and Netlify share the common goal: to alleviate technical requirements and solve what were once complicated tasks into a few clicks or API calls.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-algolia-work-with-netlify-" id="how-does-algolia-work-with-netlify-"></a><span class="text">How does Algolia work with Netlify?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-algolia-work-with-netlify-">#</a></h2>
<p>Algolia can be used directly with our <a href="https://www.algolia.com/integrations/">API clients</a> available for a dozen languages. However, it requires every developer to structure their data and push it when it changes.</p>
<p>We developed a small plugin that integrates into Netlify and uses our internal crawler to navigate and extract information directly from any website to help with this task.</p>
<p><a href="https://www.algolia.com/netlify">The plugin</a> will automatically ping the crawler when the user deploys its website in Netlify and populate an Algolia index with all the data we found in a matter of minutes. All of this makes the task of indexing very easy and maintenance-free.</p>
<p>You can learn more at the launch video below:</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/zbdfqfn1yiM" frameborder="0" allowfullscreen></iframe>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-is-using-algolia-with-netlify-differ-from-other-solutions-" id="how-is-using-algolia-with-netlify-differ-from-other-solutions-"></a><span class="text">How is using Algolia with Netlify differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-is-using-algolia-with-netlify-differ-from-other-solutions-">#</a></h2>
<p>With a traditional setup, you will need to code and maintain your indexing pipeline. It requires a lot of knowledge in various fields, like Algolia API, concurrency indexing, filesystem read or efficient database usage, etc.</p>
<p>In the case of Netlify, which has no backend, that usually means you will need to do the following:</p>
<ol>
<li>Fully generate your website statically</li>
<li>Read the filesystem Look for HTML files</li>
<li>Find the relevant information inside each file</li>
<li>Structure your JSON records</li>
<li>Push them to Algolia</li>
</ol>
<p>In comparison, the Algolia plugin for Netlify only requires you to connect your Netlify account to Algolia, install the plugin via our UI, and you are set with nothing to code or maintain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-the-algolia-plugin-for-netlify-" id="why-did-you-develop-the-algolia-plugin-for-netlify-"></a><span class="text">Why did you develop the Algolia plugin for Netlify?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-the-algolia-plugin-for-netlify-">#</a></h2>
<p>We wanted to provide an effortless way for developers to use Algolia. Even if our API is relatively straightforward, we understand that it is not a trivial thing to implement correctly.</p>
<p>Netlify has a great environment, and it was a tremendous challenge to integrate and make everything feel as seamless as their User Experience.</p>
<p>Besides, our goals are very similar, and it feels like the ecosystem will work great together.</p>
<p><figure><img src="/f213d16f5c77db28998b4785be7d7271.jpg" alt="Algolia installed on Netlify" class="" width="" height="" /><figcaption>Algolia installed on Netlify</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Launching the plugin was a success, but we don't plan to stop the development.</p>
<p>To start, we have provided the most simple plugin as possible to focus on the simplicity of usage, but we know that not every use case will fit into our default strategy.</p>
<p>We want to have the maximum feedback possible from Netlify's customers so that our users' needs shape the roadmap. That's why we have opened our <a href="https://github.com/algolia/algoliasearch-netlify/issues">Github Issues</a> and a dedicated <a href="https://discourse.algolia.com/c/netlify/28">Discourse forum</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-your-crawler-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-your-crawler-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for your crawler and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-your-crawler-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Our crawler is an enterprise tool that lives on top of Algolia's core search engine. That means that it will, as a project, benefit from the full power of Algolia and the feedback from big customers. With this in mind, we can provide for a powerful subset of features to every Netlify user.</p>
<p>We are trying to improve and automate more of our data extraction strategies. We want to handle more content types and websites, such as JavaScript-powered websites, password-protected websites, complex documents like PDFs, etc.</p>
<p>In general, we see a good trend around serverless. That's why we believe in Netlify, and it this plugin. People rely more and more on SaaS/PaaS to handle their workload and focus development hours on their core product.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Start small, ship fast, break things, but not too much. Be kind to people, and be humble.</p>
<p>We never stop making mistakes, so never be afraid of making them but always understand why.</p>
<p>Web development is a field that is changing fast; you don't have to know everything; no one can. What matters is how you handle new challenges every day and how you stay open to new ideas.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I am very grateful to work with amazing people, and there is almost no day since I started that I have not been impressed with <a href="https://sarahdayan.dev/">Sarah Dayan</a>'s work. She has a lot to share.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Samuel! It seems you've developed a nice solution for anyone hosting their site on Netlify in particular and I've found Algolia useful on this site as well.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://github.com/algolia/algoliasearch-netlify/">check Algolia's Netlify plugin on GitHub</a>.</blockquote>Ukrainian developer market - Interview with Eliza Kravchenkoaukrainiandevelopermarketinterviewwithelizakravchenko2020-10-12t00:00:00z2020-10-12T00:00:00Z<p>I've encountered many Ukrainian developers during my career and even visited the country a couple of times speaking at conferences. During each trip, it was surprising to me how vibrant the developer community is there.</p>
<p>To learn about Ukrainian developer market, I am interviewing Eliza Kravchenko from <a href="https://mobilunity.com/">Mobilunity</a>, a local sourcing company.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/18cfad701d0fb1d0b5685ffb21c27dbf.jpg" alt="Eliza Kravchenko" class="author" width="100" height="100" /><figcaption>Eliza Kravchenko</figcaption></figure></p>
<p>My name is Eliza Kravchenko, and I am the lead of the resource management team in Mobilunity. The position links the company, clients, and developers.</p>
<p>My career path started seven years ago within the customer support department. I gained experience working as a shift supervisor, a VIP customer retention manager, and an internal trainer for newcomers during these years.</p>
<p>Having diverse experience working with clients, I arrived in a role that utilizes all the skills and knowledge I have gained during my career.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-the-developer-market-at-the-moment-" id="how-would-you-describe-the-developer-market-at-the-moment-"></a><span class="text">How would you describe the developer market at the moment?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-the-developer-market-at-the-moment-">#</a></h2>
<p>In recent years the Ukrainian IT market has significantly improved its position in the world market of IT services, so the number of professionals employed in the industry is continuously growing.</p>
<p>I even see it with my friends and acquaintances who are more and more interested in software development and are considering a career change and transition to IT from various other areas (e.g., advertising, sales, SEO, etc.).</p>
<p>Many professionals are now in the early stages of gaining their experience. As the industry grows, within 2-3 years, juniors will get enough knowledge and rise to the middle level and sometimes even above, which is undoubtedly a great opportunity.</p>
<p>At the moment, Ukraine is the second-largest talent pool in Eastern Europe by the number of software developers. As the number of specialists grows, we have high chances to become number one very soon!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-a-developer-s-salary-get-determined-what-factors-affect-it-" id="how-does-a-developer-s-salary-get-determined-what-factors-affect-it-"></a><span class="text">How does a developer's salary get determined? What factors affect it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-a-developer-s-salary-get-determined-what-factors-affect-it-">#</a></h2>
<p>The developer's salary is determined based on the market. The following factors affect this:</p>
<ul>
<li>Years of experience</li>
<li>Knowledge of technology and the depth of this knowledge.</li>
<li>Domain knowledge that may be a defining factor for the interest in some candidate</li>
<li>The quality of the resume/CV and thus, the ability for the candidate to present/sell their experience.</li>
<li>Foreign languages and experience in working with foreign customers</li>
<li>Managerial/leadership experience.</li>
<li>Much depends on the technologies that a person works with, and soft skills are also essential - the ability of an engineer to look at the business side of a technical problem may seriously increase demand in the market.</li>
</ul>
<p>All these criteria can be used to calculate the market value of the profile. We recommend not only to estimate developers based on buzzwords and seniority but also to pay attention to the problems they have solved. The so-called “portfolio of solved challenges” sometimes could be very much impressive, while at the same time, the person might have only a few years of experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-types-of-developer-compensations-and-benefits-are-common-in-the-industry-" id="what-types-of-developer-compensations-and-benefits-are-common-in-the-industry-"></a><span class="text">What types of developer compensations and benefits are common in the industry?</span><a class="header-anchor-select" href="https://survivejs.com/#what-types-of-developer-compensations-and-benefits-are-common-in-the-industry-">#</a></h2>
<p>The salary is usually tied to USD or EUR currency mainly because our IT industry is export-oriented. There is a base salary, and also bonuses depending on the project stages.</p>
<p>Intangible motivation most often includes insurance, English classes (courses) for export-oriented companies, additional compensations for training, conferences, etc.</p>
<p>Product companies now consider giving some stock options incentives, but this is quite rare and a very undeveloped initiative yet, nevertheless one is growing in its popularity quite fast.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-have-developer-salaries-progressed-over-the-years-" id="how-have-developer-salaries-progressed-over-the-years-"></a><span class="text">How have developer salaries progressed over the years?</span><a class="header-anchor-select" href="https://survivejs.com/#how-have-developer-salaries-progressed-over-the-years-">#</a></h2>
<p>In general, salaries for different seniority (Junior, Middle, Senior) have remained almost at the same level, meaning that within a specific seniority level and technology stack, we do not see significant differences in expectations for the pay over the past years.</p>
<p>Simultaneously, a dotted increase in salaries is possible in cases where specific developers, in addition to technical skills, acquire deep domain expertise and become more in demand for niche industries and technologies.</p>
<p>For an average person, while transitioning from junior to middle and senior levels, the experience can increase the salary significantly during each step.</p>
<p>With this being said, the developer’s salary grows in the first four years of one’s career and remains more stable at the senior level. After that, everything begins to depend on how well the person can sell themselves and how they have mastered and enhanced technical and managerial skills.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-you-expect-developer-salaries-to-progress-in-the-future-can-you-see-any-particular-trends-" id="how-do-you-expect-developer-salaries-to-progress-in-the-future-can-you-see-any-particular-trends-"></a><span class="text">How do you expect developer salaries to progress in the future? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-you-expect-developer-salaries-to-progress-in-the-future-can-you-see-any-particular-trends-">#</a></h2>
<p>As the demand for software development services grows globally, the number of technology-related vacancies is also increasing in Ukraine. The salaries form accordingly based on supply and demand.</p>
<p>Fields, such as artificial intelligence, big data, machine learning, and robotization, may encounter enhanced salaries as more of these companies are discovering Ukraine.</p>
<p>As the companies working in these industries understand the Ukrainian market better and leverage it for talent, the demand may exceed even the high rates of our IT industry growth.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>English skills are fundamental. While starting to get into software development, please do not forget to learn foreign languages.</p>
<p>It is also essential to always keep yourself in technical shape and continuously learn new things. A person who has stopped in their development quickly becomes not in huge demand in the market.</p>
<p>Mobilunity’s clients value above all others its dedication of Ukrainian professionals to business success. So, the Ukrainian tech talent scale, accessibility, high level of education, ease of communication, and commitment to work and success make the world attracted to what Ukraine has to offer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I would suggest talking to a good friend of mine, Swiss-based Philippe Lautier. He has led local and remote engineering teams for small companies and large corporations in four different countries for the last 22 years. He is an outstanding manager strong both in driving for business goals and setting high vision & ambitions for his people.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>The Ukrainian IT market is growing at a 20-30% rate annually and continues to be one of the most quickly developing and dynamic segments of our country's economy. We expect that Ukraine will further strengthen its status as a hub in the international arena. We at Mobilunity are always looking for partners in staffing smart and dedicated IT talents here in Kyiv as we love what we do. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Eliza! It was interesting to hear your views on the Ukrainian developer market. I've seen the same as IT has become a lucrative career path for many and it's likely a good time to be in the field as it keeps expanding.</p>
Eleventy - A simpler static site generator - Interview with Jeremias Menichelliaeleventyasimplerstaticsitegeneratorinterviewwithjeremiasmenichelli2020-10-05t00:00:00z2020-10-05T00:00:00Z<p>Static site generation is a topic that is becoming increasingly popular due to the rise of <a href="https://jamstack.org">JAMStack</a>. Instead of maintaining a server, the idea is to generate static markup for the entire site. Depending on the use case, this can be a great fit that avoids the trouble of hosting.</p>
<p>To learn more about a modern, upcoming solution, I am interviewing <a href="https://twitter.com/jeremenichelli">Jeremias Menichelli</a> about <a href="https://www.11ty.dev/">Eleventy</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/802b096bc7cef6843db036595503b559?s=200" alt="Jeremias Menichelli" class="author" width="100" height="100" /><figcaption>Jeremias Menichelli</figcaption></figure></p>
<p>I still remember the morning I biked to my uncle's place because it was probably one of the first to have internet access at home. I remember writing down a URL, hitting the ENTER key, and waiting 20 minutes to see nothing.</p>
<p>I had such a bad first experience in the web when I was something like ten years old, that I told myself one day I will have a little tiny small place in the web industry, and I'll make sure what I work in doesn't create that sort of frustration to users.</p>
<p>That's probably the main reason why I'm so into progressive enhancement, static site generators, and accessibility now as a web developer. You can <a href="//jeremenichelli.io/about">read more about my complete journey at my website</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_eleventy_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_eleventy_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Eleventy</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_eleventy_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Eleventy is a static site generator that took all the lessons learned from the ones we had since a decade ago and applied them now. I loved <a href="https://jekyllrb.com/">Jekyll</a>, but it was too slow even for not-so-big sites; other people love <a href="https://gohugo.io/">Hugo</a> because it's fast, but as soon as you need to customize something, you have to touch the <a href="https://golang.org/">Go programming language</a>. Often front-end developers aren't used to it, so that's a definite obstacle.</p>
<p>Eleventy is a high-speed alternative and super close in features with Jekyll, and as soon as you have to extend it, you have JavaScript on your side. I found myself migrating my old Jekyll site, and not only was it fast but as soon as I found something was missing, it took me minutes to write a filter or a plugin to unblock me.</p>
<p>Starting with Eleventy is as easy as relying on its default and creating an <code>index.md</code> file and starting Eleventy's server.</p>
<pre><code class="lang-bash"><span class="token keyword keyword-echo" >echo</span> <span class="token string" >"# Hello World"</span> <span class="token operator" >></span> index.md
npx @11ty/eleventy --serve
</code></pre>
<p>With that, you have a static generator pipeline and server in place. The next natural move is to begin with layouts and collections if you want blog posts or notes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_eleventy_-work-" id="how-does-_eleventy_-work-"></a><span class="text">How does <em>Eleventy</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_eleventy_-work-">#</a></h2>
<p>If you are familiar with Jekyll, I would say it's pretty much the same. You have a base folder, and Eleventy turns anything with the extension you marked on your config as a page. The main difference is that Jekyll uses an underscore to mark directories like <code>_posts</code> to crawl.</p>
<p>For example, Eleventy grabs anything with the <code>.md</code> extension. That means you have to configure some collections you want to iterate manually, but it's better because it gives you more freedom.</p>
<p>Also, it's template engine agnostic, you can use Nunjacks or Liquid, or both, even template literals and do asynchronous data injection at build time. It's like a powerhouse!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_eleventy_-differ-from-other-solutions-" id="how-does-_eleventy_-differ-from-other-solutions-"></a><span class="text">How does <em>Eleventy</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_eleventy_-differ-from-other-solutions-">#</a></h2>
<p>I think that Eleventy is less opinionated than other generators. Still, it has nice defaults that you can change later if you want, the chance to go <em>as complex as you need</em> is ideal for developer experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-do-you-develop-with-_eleventy_-" id="why-do-you-develop-with-_eleventy_-"></a><span class="text">Why do you develop with <em>Eleventy</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-do-you-develop-with-_eleventy_-">#</a></h2>
<p>The main thing for me is that it's built in the same ecosystem I work. For Jekyll, I had to deal with all the setup of a <a href="https://www.ruby-lang.org/">Ruby</a> environment, which I'm not familiar with and probably don't want to deal with (not bashing the Ruby ecosystem, I'm just not used to it and I don't need to). But Eleventy runs in Node, which I already use for my work and feel comfortable debugging.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_eleventy_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_eleventy_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Eleventy</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_eleventy_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I don't know if I see a trend or <em> I wish</em> it becomes a trend, but it seems part of the web developers are becoming more aware we have a lot of different and more optimal options around tech stack for specific projects.</p>
<p>I understand why companies go for widely used frameworks; onboarding new people to a custom stack takes a lot of time (and money, I guess). Building on top of a broadly used and well-tested ecosystem gives a feeling of having a more stable foundation. Still, we need to see that not all cases fit the default technology.</p>
<p>There's a super good talk about game development called "Marvel's Spider-Man: A Technical Postmortem" by Elan Ruskin that's super exciting. As it became popular, you might have seen it already. In the talk, he says many times, fit technology to context. I feel we are trying to do the opposite with frameworks and try to match our technology context.</p>
<p>Because we as developers need to pay bills and feed a family too as everybody, we need to learn these tools to get a job, so I don't see things changing in the short or midterm. Still, I see more people trying new things and going with other options, like Eleventy, to start a new project. We do have a lot of options to begin now, which is a good thing.</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/KDhKyIZd3O8" frameborder="0" allowfullscreen></iframe>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Often more junior people reach out to me with career questions. They usually ask me if they need to write articles or give talks to be a web developer. What I tell to each of them is just, <strong>no</strong>. Writing <em>good</em> articles takes a lot of time and energy, the same as preparing and delivering a <em>really good talk</em>, so you have to enjoy the process of making them.</p>
<p>Unless you are into writing or public speaking, explore, experiment, and enjoy your work. Focus first on learning what you need to be useful to the company paying you your salary, and helping the team work every day with you; the rest of us come after that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/cassiecodes">Cassie Evans</a> or <a href="https://twitter.com/rachelnabors">Rachel Nabors</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Let's remember that though our job is vital in our lives, the most important thing and what defines us more is the impact we have on the people around us and the place we live in, so whatever we choose to do, let's be kind with people and with our planet.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Jeremias! Eleventy definitely seems like a nice step ahead particularly for Node developers. I remember using Jekyll in the past and experiencing similar issues with it.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://www.11ty.dev/">head to Eleventy site</a>.</blockquote>How to learn effectively as a developerahowtolearneffectivelyasadeveloper2020-09-24t00:00:00z2020-09-24T00:00:00Z<p>I recently received an interesting question from a reader that changed his career path and headed to technology. He mentioned he was getting overwhelmed by the amount of information related to web development and computer science.</p>
<p>He was asking my advice on how to cope with the situation. Given it's a topic that has value beyond the reader, I go through the main points of my response in this post while expanded on several ideas.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#learning-is-about-making-sense-of-things" id="learning-is-about-making-sense-of-things"></a><span class="text">Learning is about making sense of things</span><a class="header-anchor-select" href="https://survivejs.com/#learning-is-about-making-sense-of-things">#</a></h2>
<p>My background is fortunate as I was exposed to many technologies and ideas during my time at the university while I was completing my Master of Science (MSc) degree. A lot I learned during that time is still relevant today, and I would say the most significant benefit of education is that it's giving you some idea of what you don't know. When you need to learn more, you then know terms to use for searching.</p>
<p>Essentially learning is about making sense of things. As you encounter information, you'll frame it with other things you've known before. For this reason, people say learning your first programming language is the hardest, and the next one is more comfortable. The same goes for languages. If you know English, it's likely straightforward for you to learn German as it's a language related to it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#get-immersed-in-the-topic" id="get-immersed-in-the-topic"></a><span class="text">Get immersed in the topic</span><a class="header-anchor-select" href="https://survivejs.com/#get-immersed-in-the-topic">#</a></h2>
<p>During the past few years, I've been learning German casually by spending some time with mobile applications each day. Given I live in a German-speaking country, I am immersed in the language as well. Although I'm far from fluent in the language, I've developed my muscles in German, almost without noticing.</p>
<p>Becoming immersed in a topic you want to learn is an excellent way to pick up things as you'll become aware of patterns and become more aware of the terms that people are using.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#learn-fundamentals-and-patterns-over-specifics" id="learn-fundamentals-and-patterns-over-specifics"></a><span class="text">Learn fundamentals and patterns over specifics</span><a class="header-anchor-select" href="https://survivejs.com/#learn-fundamentals-and-patterns-over-specifics">#</a></h2>
<p>Fundamentals are less likely to change than language specifics. Often more significant ideas translate from a language to another even if the language doesn't embrace them in design.</p>
<p>Patterns that we learn give solutions to problems that have already been solved. Developing your collection and instinct for dealing with them is an integral part of becoming better at development.</p>
<p>As a web developer, you'll benefit immensely by understanding how the web browser renders data and what technologies it's using. Having a good understanding of the vital standards - CSS, HTML, and JavaScript - is valuable no matter which libraries or frameworks you use for development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#track-development-news-to-spot-trends" id="track-development-news-to-spot-trends"></a><span class="text">Track development news to spot trends</span><a class="header-anchor-select" href="https://survivejs.com/#track-development-news-to-spot-trends">#</a></h2>
<p>Keep an eye on the development news to spot prominent patterns and directions. It's good to see if there are commonalities, and often you can observe that there's a lot of excitement around a specific topic.</p>
<p>You can try to figure out where in the <a href="https://en.wikipedia.org/wiki/Hype_cycle">hype cycle</a> given technology fits to see if it's in the early phase or becoming something more stable.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#keep-one-foot-on-the-ground" id="keep-one-foot-on-the-ground"></a><span class="text">Keep one foot on the ground</span><a class="header-anchor-select" href="https://survivejs.com/#keep-one-foot-on-the-ground">#</a></h2>
<p>When developing new projects, start at least some technology you know well and add new technologies on top. Keeping one foot on the ground like this is an excellent way to avoid becoming frustrated when trying to learn too much at once.</p>
<p>In the beginning, starting simple and expanding from there is an excellent way to go. The more moving parts you have, the more there is to understand, and the harder it gets.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#learn-around-specific-themes" id="learn-around-specific-themes"></a><span class="text">Learn around specific themes</span><a class="header-anchor-select" href="https://survivejs.com/#learn-around-specific-themes">#</a></h2>
<p>Focus on learning around specific themes. For example, two years ago, I focused on <a href="https://graphql.org/">GraphQL</a>; last year was more about design systems. This year seems to go into the direction of <a href="https://deno.land/">Deno</a>.</p>
<p>When you focus your attention on a topic, you'll become more aware of any news or articles related to it, and you'll automatically learn more about it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#work-on-projects-you-find-motivating" id="work-on-projects-you-find-motivating"></a><span class="text">Work on projects you find motivating</span><a class="header-anchor-select" href="https://survivejs.com/#work-on-projects-you-find-motivating">#</a></h2>
<p>Work on projects that you find motivating even if it's about learning. It's good to develop projects to learn, but it's even better when you are solving concrete problems.</p>
<p>I've found working on prototypes aside from client work gives me more freedom to explore the boundaries of what's possible. Free exploration is a great way to develop skills, especially if you have a good problem or set of issues in mind.</p>
<p>It's the perfect excuse to try out the technology you might otherwise not be able to test. For example, in a recent project, I replaced a traditional webpack setup with one I built around Deno, and doing this, I learned a lot.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#track-what-you-learn-in-a-system" id="track-what-you-learn-in-a-system"></a><span class="text">Track what you learn in a system</span><a class="header-anchor-select" href="https://survivejs.com/#track-what-you-learn-in-a-system">#</a></h2>
<p>Track what you learn in a system so you can refer to it later. I capture information to flat Markdown files that are pushed automatically to the cloud. There are more sophisticated systems, such as <a href="https://foambubble.github.io/foam/">Foam</a> or <a href="https://getmemex.com/">Memex</a> that exist within the space.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#adopt-a-personal-management-system" id="adopt-a-personal-management-system"></a><span class="text">Adopt a personal management system</span><a class="header-anchor-select" href="https://survivejs.com/#adopt-a-personal-management-system">#</a></h2>
<p>Adopt a personal management system to organize what to do and when. I use <a href="https://www.omnigroup.com/omnifocus/">OmniFocus</a>, but <a href="https://www.slant.co/options/4436/alternatives/~omnifocus-alternatives">any free alternative</a> or your system can work. The point is to have a place where you can push ideas from your mind, not to forget. The broader approach is called <a href="https://en.wikipedia.org/wiki/Getting_Things_Done">Getting Things Done</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#learn-from-the-masters" id="learn-from-the-masters"></a><span class="text">Learn from the masters</span><a class="header-anchor-select" href="https://survivejs.com/#learn-from-the-masters">#</a></h2>
<p>As you gain skills, you'll learn to appreciate other people who know more about the topic. There's a reason why sometimes specific music artists are called as the musician's musicians. Those are the people that might not be known by the wider public, but that are true masters of whatever they are doing.</p>
<p>When I was learning drawing and painting, I used to copy the masters' works to figure out what they did and how. I didn't replicate the technique, but I focused on reproducing the result. Doing these exercises taught me to understand better what made the pictures I was copying to work while sharpening my drawing and painting skills. Over time that became something natural that stuck.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#read-code-from-other-developers" id="read-code-from-other-developers"></a><span class="text">Read code from other developers</span><a class="header-anchor-select" href="https://survivejs.com/#read-code-from-other-developers">#</a></h2>
<p>There's value in reading code by others and understanding why it works and why it's written that way for someone wanting to become a developer. You'll notice that there are different styles and approaches, even within the same language.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#contribute-to-open-source-projects" id="contribute-to-open-source-projects"></a><span class="text">Contribute to open source projects</span><a class="header-anchor-select" href="https://survivejs.com/#contribute-to-open-source-projects">#</a></h2>
<p>One of my first touches with serious programming had to do with <a href="https://www.blender.org/">Blender</a>, a 3D suite, as I learned how to modify the application's user interface to my liking. Although it started with simple changes, I gained a lot of knowledge about open source, 3D, and programming during the time I spent with the project. Contributing can be a great way to develop your skills and connections.</p>
<p>Sometimes you may notice that a project you need doesn't exist yet. That's why I developed projects such as <a href="https://www.npmjs.com/package/webpack-merge">webpack-merge</a> or <a href="https://sidewindjs.com/">Sidewind</a> and <a href="https://github.com/bebraw">many others</a>. Although you may be addressing your own need, sometimes it happens other people have the same problem, and they'll contribute and may even be happy to continue the projects as you move on to other work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#reflect-on-what-you-have-learned" id="reflect-on-what-you-have-learned"></a><span class="text">Reflect on what you have learned</span><a class="header-anchor-select" href="https://survivejs.com/#reflect-on-what-you-have-learned">#</a></h2>
<p>It takes a consistent effort to become better, but at the same time, it's rewarding to see how you gain skills and how much you've improved over the years. That way, reflection has incredible value as it can show much you've achieved despite the obstacles you may have had to face.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope the post gave you some food for thought. Learning is a skill by itself, and likely you'll have to find the ways that fit you the best.</p>
<p>As I'm curious about your learning hacks, feel free to leave comments below the post.</p>
Pipcook - Bridging JavaScript with Python for machine learning - Interview with Wenhe Liapipcookbridgingjavascriptwithpythonformachinelearninginterviewwithwenheli2020-09-14t00:00:00z2020-09-14T00:00:00Z<p>There's a lot of excitement about machine learning and its applications. The question is, what can you do with and where to apply the technique and how.</p>
<p>To learn more, I am interviewing Wenhe (Eric) Li, the creator of <a href="https://github.com/alibaba/pipcook">Pipcook</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>Hi folks, this is Wenhe (Eric) Li, and I am currently an SDE at Alibaba Inc. My works involve combining front-end development, front-end developer, and artificial intelligence (AI). One of my tasks here is developing Pipcook, an open-sourced machine learning (ML), and deep learning (DL) framework designed for front-end developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_pipcook_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_pipcook_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Pipcook</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_pipcook_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>Pipcook</em> is a tool that helps you develop, train, and deploy an ML/DL model without much prior knowledge. The whole workflow is highly abstract without losing scalability.</p>
<p>It lets you use popular Python-based machine learning solutions, such as <a href="https://numpy.org/">NumPy</a>, <a href="https://scikit-learn.org/">scipy-learn</a>, <a href="https://github.com/fxsjy/jieba">jieba</a>, and <a href="https://www.tensorflow.org/">TensorFlow</a>, easily through its interface.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_pipcook_-work-" id="how-does-_pipcook_-work-"></a><span class="text">How does <em>Pipcook</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_pipcook_-work-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pipcook-wraps-python-using-boa" id="pipcook-wraps-python-using-boa"></a><span class="text">Pipcook wraps Python using BOA</span><a class="header-anchor-select" href="https://survivejs.com/#pipcook-wraps-python-using-boa">#</a></h3>
<p>Since this framework is front-end and Node.js developer-oriented, and most DL/ML libraries have been written using Python, we created BOA to bridge the languages.</p>
<p>BOA allows us to directly <strong>import</strong> and <strong>call</strong> Python modules and methods in JavaScript. In this way, we can utilize the DL/ML ecosystem in Python without worrying about learning a new language.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pipcook-leverages-the-concept-of-pipelines" id="pipcook-leverages-the-concept-of-pipelines"></a><span class="text">Pipcook leverages the concept of pipelines</span><a class="header-anchor-select" href="https://survivejs.com/#pipcook-leverages-the-concept-of-pipelines">#</a></h3>
<p>We introduce a concept of <strong>pipeline</strong> which contains <code>dataCollect</code>, <code>dataProcess</code>, <code>dataAccess</code>, <code>datasetProcess</code>, <code>modelDefine</code>, <code>modelTrain</code>, and <code>modelEva</code>. Pipelines offer an abstraction over a typical DL/ML model lifecycle.</p>
<p><em>Pipcook</em> developers, including the community, offer the most common implementation of these parts (we call them <strong>plugins</strong>). People who want to train their model can use an existing pipeline or <em>combine</em> <strong>plugins</strong> to make their pipeline just like playing with legos.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_pipcook_-differ-from-other-solutions-" id="how-does-_pipcook_-differ-from-other-solutions-"></a><span class="text">How does <em>Pipcook</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_pipcook_-differ-from-other-solutions-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#_pipcook_-lets-you-use-both-javascript-and-python" id="_pipcook_-lets-you-use-both-javascript-and-python"></a><span class="text"><em>Pipcook</em> lets you use both JavaScript and Python</span><a class="header-anchor-select" href="https://survivejs.com/#_pipcook_-lets-you-use-both-javascript-and-python">#</a></h3>
<p>Since <em>Pipcook</em> allows you to write Dl/ML models in JavaScript with Python modules, we can benefit from the great libraries and packages in the two ecosystems.</p>
<p>It's incredible as you can decide to put some IO-oriented jobs to Node.js and put more DL/ML training-related work under Python. Doing this allows you to get the most out of both.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#_pipcook_-uses-pipelines-and-plugins" id="_pipcook_-uses-pipelines-and-plugins"></a><span class="text"><em>Pipcook</em> uses pipelines and plugins</span><a class="header-anchor-select" href="https://survivejs.com/#_pipcook_-uses-pipelines-and-plugins">#</a></h3>
<p><em>Pipcook</em> introduces <strong>pipeline</strong> and <strong>plugins</strong> to the DL/ML workflow. Doing this decouples the complexity of developing ML/DL models and makes the plugins highly shareable.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#_pipcook_-uses-state-of-art-techiques" id="_pipcook_-uses-state-of-art-techiques"></a><span class="text"><em>Pipcook</em> uses state-of-art techiques</span><a class="header-anchor-select" href="https://survivejs.com/#_pipcook_-uses-state-of-art-techiques">#</a></h3>
<p>Since <em>Pipcook</em> is an experimental project, we can use state-of-the-art techniques and languages to develop our project. That means using Rust, WASM, WASI, WebGPU, and more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_pipcook_-" id="why-did-you-develop-_pipcook_-"></a><span class="text">Why did you develop <em>Pipcook</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_pipcook_-">#</a></h2>
<p>I love JavaScript and its magical syntax. However, I have to use Python to develop DL/ML models due to the abundant Python modules and ecosystem. <em>Pipcook</em> gives me a new way to establish DL/ML models in JavaScript without losing the Python ecosystem.</p>
<p>So far, we've seen a clear tendency that AI comes into every corner of the world. And in the field of front-end, we still do not have an industrial level framework. Most DL/ML frameworks are still serving people who have related knowledge.</p>
<p>We want to deliver such a framework that could be widely used by the JavaScript (Node.js and browser) world without worrying about the complex theory behind models. We believe this is the right way of passing the value of AI to the world.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We just formally released our <em>Pipcook</em> a couple of months ago. This very first public release offers users an out-of-the-box feature of training a model for <em>image classification</em>, <em>style transfer</em>, and <em>text analysis</em> without much prior knowledge.</p>
<p>Therefore, for the current stage, we are working for the user experience and developer experience. We are trying to optimize the training efficiency and mitigate the learning curve of developing a plugin.</p>
<p>Apart from that, we are building an <strong>all-in-one</strong> toolkit, which includes <em>viewing training log</em>, <em>inspecting, and visualizing model structure</em>, and <em>model pruning and compression</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_pipcook_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_pipcook_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Pipcook</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_pipcook_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In the future, ML/DL must have a stronger binding with the web in general. Distributed training, federal learning, and on-device inference will fourish in the web since all of them match the essence of the internet.</p>
<p>Quoted from Tim Berners-Lee, "Let's redistribute power to individuals!" We are trying to build a paradigm that ML/DL could serve and be open to everyone with web development ability and JavaScript and Python ecosystems.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>The web is essentially a community based on the idea of sharing, connecting, and open-source. Thus, try to connect, join, and work with the open-source community you are using or find interesting!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You could interview developers who have made their very first open-source contributions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for the interview and this chance to share my journey along with <em>Pipcook</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks, Wenhe! I find it admirable what you are doing with <em>Pipcook</em>. I believe it can work as a bridge for JavaScript developers to the world of machine learning without having to delve deep into Python-based solutions.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, see <a href="https://alibaba.github.io/pipcook/">Pipcook site</a> and <a href="https://github.com/alibaba/pipcook">Pipcook on Github</a>.</blockquote>NoCode programming - Doing more with less code - Interview with Alex Moldovananocodeprogrammingdoingmorewithlesscodeinterviewwithalexmoldovan2020-09-07t00:00:00z2020-09-07T00:00:00Z<p>What if you could create programs without coding? If you've ever used something like Microsoft Excel or Google Sheets, you've already done this at one level.</p>
<p>NoCode programming is an emerging topic. To learn more about it, I am interviewing <a href="https://twitter.com/alexnmoldovan">Alex Moldovan</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/ec61bf0bae680f6140ed409cfe355350.jpg" alt="Alex Moldovan" class="author" width="100" height="100" /><figcaption>Alex Moldovan</figcaption></figure></p>
<p>My name is Alex, and I'm a software engineer based in Cluj, Romania. I work at a startup called <a href="https://teleporthq.io/">teleportHQ</a>, and I'm one of the founders of <a href="https://jsheroes.io/">JSHeroes</a>, one of the biggest JS communities in Europe.</p>
<p>I've been in tech for more than ten years now, and in the past four years, I dedicated a lot of time to organizing events and public speaking alongside my full-time job.</p>
<p>Lately, I started advocating for performance, accessibility, and ethical design. At teleportHQ, I'm fortunate enough to practice what I preach, as we're working at a product that can bring the NoCode revolution one step closer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_nocode-development_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_nocode-development_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>NoCode development</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_nocode-development_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>There's no clear definition for NoCode development. It is a generic term for any platform/tool that abstracts away <em>parts</em> of the code you would typically write when building an app.</p>
<p>Tools like <a href="https://www.wix.com/">Wix</a> and <a href="https://webflow.com/">Webflow</a> are NoCode tools for frontend development, but modern serverless solutions or backend-as-a-service platforms are also NoCode, just for backend development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_nocode_-programming-work-" id="how-does-_nocode_-programming-work-"></a><span class="text">How does <em>NoCode</em> programming work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_nocode_-programming-work-">#</a></h2>
<p>One thing which is crucial and often misunderstood is that NoCode is still development. It replaces the need to write code instructions with visual interfaces and configuration dashboards.</p>
<p>Your final application still runs on the same platform and pretty much using the same programming languages at the end of the day. But the process of building that application can be simplified a lot.</p>
<p>Additionally, a NoCode platform might have different ejection mechanisms, i.e., points after which you are on your own, and you continue developing on top of the skeleton they offer. The approach is often called LowCode development. In this case, you will have code generators that are creating the initial project and the UI/business/backend code that you can later modify or extend.</p>
<p>I see NoCode as the next layer of abstraction on top of existing frameworks and programming languages. You can think of it as the step we took from Assembly to C or from pure HTML/CSS/JS to modern frameworks.</p>
<p>With each step, it arguably became more comfortable to develop a more complex project, reusing the solutions others came up with for solving recurring problems (e.g., for the web platform: dom manipulation, reactivity, data flows, etc.).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-join-_teleporthq_-" id="why-did-you-join-_teleporthq_-"></a><span class="text">Why did you join <em>teleportHQ</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-join-_teleporthq_-">#</a></h2>
<p>I've been with the team for the past two years. During this time, I have worked both on the code generators and the playground. I feel privileged to have been in the open source world all this time and fine-tuning the user experience on the playground. Both areas align with my personal goals and interests.</p>
<p>One thing which made me interested in the company was the desire to open-source the code generators and the <a href="https://dl.acm.org/doi/10.1145/3397874">OpenUIDL</a> (our format for representing UIs in a JSON structure).</p>
<p><figure><img src="/86c4e974c11e836ed8a6bc1bc7a37df6.jpg" alt="Creating in teleportHQ" class="" width="" height="" /><figcaption>Creating in teleportHQ</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-is-_teleporthq_-" id="what-is-_teleporthq_-"></a><span class="text">What is <em>teleportHQ</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-is-_teleporthq_-">#</a></h2>
<p>We are building a NoCode/LowCode platform (we call it the <strong>playground</strong>) for professional use cases. We target developers, designers, and content creators that want to streamline their UI creation workflows.</p>
<p>Our "secret" sauce is a set of <a href="https://github.com/teleporthq/teleport-code-generators">open source <strong>code generators</strong></a> with which you can export your work from our platform at any time and continue on your own in any of the most popular frontend frameworks today (e.g., React, Vue, Angular, etc.).</p>
<p><figure><img src="/c38712ddc0f909746974c200e73e3c59.jpg" alt="Theming in teleportHQ" class="" width="" height="" /><figcaption>Theming in teleportHQ</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_teleporthq_-differ-from-other-solutions-" id="how-does-_teleporthq_-differ-from-other-solutions-"></a><span class="text">How does <em>teleportHQ</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_teleporthq_-differ-from-other-solutions-">#</a></h2>
<p>There are plenty of tools and solutions for building static-<em>ish</em> websites, so we are working more towards application development and integration with existing workflows.</p>
<p>Our long term vision is to bend technology towards humans, and we all strive to create a platform that makes it hard or impossible for content creators to offer bad experiences to their end-users. We want to bake in all the knowledge that the dev community has so that future users can rely on a solid bedrock when building applications, without even knowing it.</p>
<p><figure><img src="/5cfbcbc4d03d79013e68c46947acdff1.jpg" alt="Editing in teleportHQ" class="" width="" height="" /><figcaption>Editing in teleportHQ</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We're still in beta at this point at <a href="https://play.teleporthq.io/">play.teleporthq.io</a>, but we have a massive roadmap ahead of us. Our main priority now is to bring all the features needed for our users to start working professionally and integrate the many experiments from our R&D team.</p>
<p>We would also love to engage with the community on our open source code generators and to get as much feedback on the tool as possible in the coming months.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_nocode_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_nocode_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>NoCode</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_nocode_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>There's a growing need for NoCode solutions, and it will only increase in the future because the demand for <em>software</em> in general is growing exponentially. I'm hoping that with the rise of NoCode tools for UIs, the entry barrier will become lower, and the web platform more accessible to people.</p>
<p>There are many things to consider when building a website from scratch, so I would love to see concerns like performance and accessibility offloaded to these tools. That way, developers can focus on the functionality and business side of things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I think they should embrace NoCode tools when the time comes, without fearing that the tools and automation will replace the need for their skills. Knowing the basics very well will allow you to switch from platform to platform or from framework to framework, without paying the cost of transition and re-learning everything from scratch.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/jeremenichelli">Jeremias Menichelli</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Alex! I find the idea of LowCode/NoCode highly interesting and I like your approach of using an intermediate UI definition to tackle the differences between platforms. It reminds me of programming languages which use an intermediate format during their compilation.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://teleporthq.io/">find teleportHQ online</a>. <a href="https://github.com/teleporthq">See also their GitHub</a> and <a href="https://play.teleporthq.io">try their playground</a>.</blockquote>ExtendsClass - Online Tools for Developers - Interview with Cyril Boisaextendsclassonlinetoolsfordevelopersinterviewwithcyrilbois2020-09-03t00:00:00z2020-09-03T00:00:00Z<p>One of the great things about being a developer is that you can literally create your own tools to make it easier to do your work.</p>
<p><a href="https://twitter.com/CyrilBois">Cyril Bois</a> has been developing a set of tools at <a href="https://extendsclass.com/">ExtendsClass</a> for a while and now we have a good chance to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://avatars1.githubusercontent.com/u/38669260?s=460&u=5f7f869badf35343cf8b330a5f8ad2de1e76e23b&v=4" alt="Cyril Bois" class="author" width="100" height="100" /><figcaption>Cyril Bois</figcaption></figure></p>
<p>My name is Cyril Bois, a French developer passionate about coding. I have been working for an independent software vendor specialized in Retail for 14 years (I am faithful!).</p>
<p>During my free time (I have a wife and three boys), I work on my platform <em>ExtendsClass</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_extendsclass_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_extendsclass_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>ExtendsClass</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_extendsclass_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>ExtendsClass</em> is an online toolbox for frontend and backend developers. You can find quite a wide variety of tools:</p>
<ul>
<li>Playgrounds</li>
<li>Code checkers</li>
<li>Random data generators</li>
<li>Comparators</li>
<li>Converters</li>
<li>Formatters</li>
</ul>
<p>It's a bit of a Swiss Army knife for developers!</p>
<p>The service can save time for doing quick tests without having to install any software on your computer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_extendsclass_-work-" id="how-does-_extendsclass_-work-"></a><span class="text">How does <em>ExtendsClass</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_extendsclass_-work-">#</a></h2>
<p>Using <em>ExtendsClass</em> is simple. Just use a browser!</p>
<p>For some tools, HTTP APIs are available, and you should make HTTP calls against them. In specific cases, you have to create an account to obtain an API key to avoid abuse.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_extendsclass_-differ-from-other-solutions-" id="how-does-_extendsclass_-differ-from-other-solutions-"></a><span class="text">How does <em>ExtendsClass</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_extendsclass_-differ-from-other-solutions-">#</a></h2>
<p>The main difference is the variety of tools available.</p>
<p>As soon as people ask me, I make the source code of specific tools available at <a href="https://github.com/cyrilbois">my GitHub account</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_extendsclass_-" id="why-did-you-develop-_extendsclass_-"></a><span class="text">Why did you develop <em>ExtendsClass</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_extendsclass_-">#</a></h2>
<p>I developed <em>ExtendsClass</em> to pass the time and mainly because, in my work, I started coding less since I became a solution architect, and I missed coding!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>First, I still have plenty of features to add to existing tools. Secondly, given some tools are only available via a browser, I am looking to make them accessible via HTTP API. Finally, the platform begins to have some amount of technical debt I'll have to address. I won't have time to be bored!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_extendsclass_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_extendsclass_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>ExtendsClass</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_extendsclass_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>It's a good question. :)</p>
<p>A few years ago, I thought <a href="https://nodejs.org/">Node</a> would be a tidal wave; I was wrong! Maybe <a href="https://deno.land/">Deno</a> will succeed where Node failed.</p>
<p>I am keeping an eye on Python as it's healthy as a platform, but I would not venture to make predictions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>My advice is to be curious!</p>
<p>Nowadays, we find excellent tutorials and video conferences in free access on the Internet, and we can learn a lot of technologies quite quickly. We have no excuse!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Perhaps Ryan Dahl so he can tell you about Deno!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>No! Thanks for the interview. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for developing the platform, Cyril! I can see there are any tools on the service I'll find useful in my work and I hope others find it as well.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://extendsclass.com/">See ExtendsClass site to learn more.</a></blockquote>"SurviveJS - Webpack" book updated to webpack 5aquotsurvivejswebpackquotbookupdatedtowebpack52020-08-28t00:00:00z2020-08-28T00:00:00Z<p>Webpack 5 is getting near and it felt like a good time to update the book. Although it's still in beta, it seems quite stable already and it's worth experimenting with it. During this work, I went through my long list of TODOs that had accrued since <a href="https://survivejs.com/blog/webpack-book-updated-to-webpack-4">the previous release of the book</a>.</p>
<p>The current version of the book supports both webpack 4 and 5 and I've noted about the new features where possible. The best source for all the changes is <a href="https://github.com/webpack/changelog-v5">the official changelog</a>. Although the release has a couple of major features, including better caching and module federation, in a big part it's a clean-up release that should make subsequent releases easier.</p>
<p>I've rewritten and reworked a big part of the book and modernized it where necessary. The length of the book is roughly the same and I've tightened the content where I felt this was necessary while dropping references that are now obsolete.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-merge-updated-to-support-typescript-out-of-the-box" id="webpack-merge-updated-to-support-typescript-out-of-the-box"></a><span class="text">webpack-merge - Updated to support TypeScript out of the box</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-merge-updated-to-support-typescript-out-of-the-box">#</a></h2>
<p>Thanks to Google sponsorship, I was able to go through <a href="https://www.npmjs.com/package/webpack-merge">webpack-merge</a> issues and add first-class support for TypeScript to it. I ended up dropping smart merging from the package as it became impossible to handle all the special cases related to it. Instead, there are now utilities that give you control over details.</p>
<blockquote>
<p><a href="https://github.com/survivejs/webpack-merge/issues/141">One last typing related issue</a> remains and it has something to do with the way webpack and webpack-dev-server typings play with together.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>Since the past release, I've been working on occasional client projects and putting a lot of energy behind the <a href="https://react-finland.fi/">React Finland</a> conference as its director. Sadly, the on-going pandemic shattered our plans for the conference and forced us to postpone the physical portion to the next year. In the meantime, we're running online mini-conferences to provide service for our audience. So far we've organized two and there are many on the way.</p>
<p>The delay in webpack 5 release has been problematic as the lack of a stable release means I cannot make a paper release of the book either. I feel it was a good time to update the book, though, as when it goes stable, the paper version can receive a long pending update as well. While waiting for the stable version, I hope to integrate changes based on your feedback to improve the book further.</p>
<p>Especially client work has generated valuable insights which I've integrated to the book. These days people often use a solution such as <a href="https://reactjs.org/docs/create-a-new-react-app.html">Create React App</a> and simply skip configuring webpack but at times custom configuration is needed.</p>
<p>Even with CRA, you may find yourself extending the setup using unofficial ways as the defaults won't fit each use case. My client work tends to center around getting webpack configuration under control while improving performance of both the build and the end result.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-6" id="book-improvements-2-6"></a><span class="text">Book Improvements - <code>2.6</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-6">#</a></h2>
<p>I've released multiple silent releases since the previous public version to improve the book. The past month during which I've been renovating the book has been intense and I feel it's in a much better shape than before.</p>
<p>I still use it as my personal main reference for webpack related things and I've tried to develop the book so that you have strong secondary material with more information available should you want to dig deeper. For me, that's the sweet spot for the book.</p>
<p>The book has received <a href="https://github.com/survivejs/webpack-book/compare/v2.3.0...v2.6.1">numerous changes</a> and it's not possible to list them all here. Instead, I've compiled a list of the most important ones:</p>
<ul>
<li>Most code examples have been formatted by Prettier simplifying my workflow.</li>
<li>I've given the book a heavy grammar and formatting pass so it should look and feel better than before.</li>
<li>Instead of <strong>webpack-dev-server</strong> (WDS), the book uses <a href="https://www.npmjs.com/package/webpack-plugin-serve">webpack-plugin-serve</a>. It's an option that has been built on top of webpack's watch mode although it can run as a server of its own (needed for multi-compiler mode). In practice, I've found it to work better than WDS with complex proxy setups while being compatible with webpack 5 out of the box. As a result, the corresponding chapter has been renamed as <a href="https://survivejs.com/webpack/developing/development-server/">Development Server</a>.</li>
<li>Instead of <strong>webpack-cli</strong>, the book uses <a href="https://www.npmjs.com/package/webpack-nano">webpack-nano</a>. Again, I went with a light alternative that's enough for the book and provides compatibility with webpack 5.</li>
<li>Instead of <a href="https://www.npmjs.com/package/html-webpack-plugin">html-webpack-plugin</a>, the book uses <a href="https://www.npmjs.com/package/mini-html-webpack-plugin">mini-html-webpack-plugin</a> which I developed with Tobias Koppers and Artem Sapegin. Feature-wise it's much simpler but that's exactly why I've settled on it in my personal usage. That said, for anything that has complex requirements, <strong>html-webpack-plugin</strong> may be the better option and it's easy to refactor the book's examples to use it instead.</li>
<li>As order-wise it makes more sense to explain code splitting before bundle splitting, I swapped the order of the chapters.</li>
<li>Given <strong>mini-css-extract-plugin</strong> has become stable, the <a href="https://survivejs.com/webpack/styling/separating-css/">Separating CSS</a> chapter is using it instead of <strong>extract-text-webpack-plugin</strong>. The change was done earlier during a silent release but it's still worth mentioning. Webpack 5 won't introduce first-class support for CSS out of the box so the plugin will still be needed.</li>
<li>I've rewritten the <a href="https://survivejs.com/webpack/styling/eliminating-unused-css/">Eliminating Unused CSS</a> chapter to use <a href="https://tailwindcss.com/">Tailwind CSS</a> and <a href="https://www.npmjs.com/package/purgecss">PurgeCSS</a>. Ideally purging shouldn't be needed at all and solutions like <a href="https://www.npmjs.com/package/@stitches/css">Stitches</a> achieve this. It's still a good technique to discuss as it has relevance for legacy projects.</li>
<li>The <a href="https://survivejs.com/webpack/building/source-maps/">Source Maps</a> chapter has simpler comparisons now to save some space. I found condensing the examples didn't lose anything valuable while making space for new content.</li>
<li>The <a href="https://survivejs.com/webpack/optimizing/tree-shaking/">Tree Shaking</a> chapter has more information on how to get it to work with webpack especially with webpack 4 as there are certain prerequisites.</li>
<li>The <em>Separating Manifest</em> chapter has been renamed as <a href="https://survivejs.com/webpack/optimizing/separating-runtime/">Separating a Runtime</a> to use more accurate naming.</li>
<li>I've rewritten the <a href="https://survivejs.com/webpack/optimizing/build-analysis/">Build Analysis</a> chapter to contain the tools and services that have emerged.</li>
<li>The <a href="https://survivejs.com/webpack/optimizing/performance/">Performance</a> chapter has more specific advice on how to measure and improve webpack's performance. I also included webpack 4 specific tips.</li>
<li>There's a new chapter about <a href="https://survivejs.com/webpack/output/module-federation/">Module Federation</a> and micro frontends. I designed the chapter so that you can complete the setup without having to go through the entire book. The target of the chapter is to get you started and to a point where you can learn more about it through the examples available online.</li>
<li>I've rewritten the <a href="https://survivejs.com/webpack/techniques/i18n/">Internationalization</a> chapter to use <a href="https://www.npmjs.com/package/embed-i18n-webpack-plugin">embed-i18n-webpack-plugin</a> over now deprecated <strong>i18n-webpack-plugin</strong>.</li>
<li>The <a href="https://survivejs.com/maintenance/code-quality/testing/">Testing</a> chapter has been greatly simplified. It still has basic content but I feel often testing is better handled outside of webpack using specific tools designed for the purpose.</li>
<li>The <a href="https://survivejs.com/webpack/appendices/searching-with-react/">Searching with React</a> appendix has been rewritten to use modern React.</li>
<li>The <a href="https://survivejs.com/webpack/appendices/comparison/">Comparison of Build Tools</a> appendix includes the current alternatives to webpack that have emerged.</li>
<li>The <a href="https://survivejs.com/webpack/appendices/glossary/">Glossary</a> has been expanded and made more accurate.</li>
</ul>
<p>You can find the book below:</p>
<ul>
<li><a href="https://survivejs.com/webpack/preface/">“SurviveJS — Webpack” - Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-webpack/">“SurviveJS — Webpack” - Leanpub edition (digital)</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. I support his work this way given mine builds on top of his.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>My hope is that webpack 5 reaches a stable state soon. While waiting for it, I hope to receive feedback on the content so I can improve it before the next paper release.</p>
<p>Given this book is now in a good shape, I can focus on updating the remaining two books and working on my site infrastructure project. I am currently reworking the technical stack of this site while learning a lot about emerging technologies.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the first webpack 5 version of the book!</p>
<p>Note that I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> if you want to bug me about webpack. You can also <a href="https://github.com/survivejs/ama/issues">ask questions at my AmA</a>.</p>
Midway - A Node.js framework for Serverless - Interview with Harry Chenamidwayanodejsframeworkforserverlessinterviewwithharrychen2020-08-24t00:00:00z2020-08-24T00:00:00Z<p><a href="https://en.wikipedia.org/wiki/Serverless_computing">Serverless computing</a> is one of those approaches that has taken the world by storm. The idea is to make computing a flexible resource you consume on-demand. Compared to earlier models, it scales in terms of demand instead of requiring an upfront investment on in server infrastructure.</p>
<p><a href="https://twitter.com/czy88840616">Harry Chen</a> has developed a solution, <a href="https://github.com/midwayjs/midway">Midway</a>, that makes it easier to develop serverless applications using Node.js. In this interview, we'll learn more about the approach and how it's affecting the technology landscape.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://avatars2.githubusercontent.com/u/418820?s=460&v=4" alt="Harry Chen" class="author" width="100" height="100" /><figcaption>Harry Chen</figcaption></figure></p>
<p>Hi, I'm <a href="https://github.com/czy88840616">Harry Chen</a>, a Staff Front-end Engineer of <a href="https://www.alibabagroup.com/en/global/home">Alibaba</a>. I've worked on Node.js technology stack for a long time. During this time, I have provided framework and middleware solutions for <a href="https://www.crunchbase.com/organization/taobao">Taobao</a> and other Alibaba business units.</p>
<p>I have been responsible for Serverless Arch standardization specification of Alibaba Group and overall Node.js system infrastructure for Taobao. During this time, I've solved various maintenance and stability issues for full-stack development. I am also responsible for Midway on-premise and open-source development.</p>
<p>The work includes the development and maintenance of community open source products, such as <a href="https://github.com/midwayjs/midway">Midway</a>, <a href="https://github.com/midwayjs/sandbox-docker">Sandbox</a>, <a href="https://github.com/midwayjs/pandora">Pandora.js</a>, <a href="https://github.com/midwayjs/injection">Injection</a>, and many others.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-midway-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-midway-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Midway to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-midway-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Midway is a framework that allows applications written in a pure function pattern to be deployed to various cloud platforms without any code modifications. The idea is to avoid lock-in on a single Function as a Service (FaaS) vendor.</p>
<p>Midway Serverless alleviates the pain of migrating traditional deployment pattern applications to elastic serverless platforms. At Alibaba Group, many legacy Node.js applications are still working online and require heavy operational maintenance. All of this can be costly.</p>
<p>Midway Serverless is the solution we adopted to accelerate the migration and reducing the costs. There is no action to be taken to deploy the app to a FaaS platform other than composing a single YAML configuration file with Midway Serverless.</p>
<p>As React Hooks gain popularity rapidly, coding with functions is becoming more popular. Midway previously is built based on the decorators and dependency injections to provide inversion of control, augmenting JavaScript classes to be basic grouping units of code snippets.</p>
<p>Writing in a function pattern doesn't mean it is not possible to achieve inversion of control. Midway Serverless apps can share the same coding pattern between the web and server-side.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-midway-work-" id="how-does-midway-work-"></a><span class="text">How does Midway work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-midway-work-">#</a></h2>
<p>Midway provides a set of runtime adaptation tools that can smooth out the different cloud vendors in the community. These tools encapsulate and standardize the different cloud vendor access parameters, help migrate different types of Node.js products (applications and functions) to the cloud vendor, and also provide their own lifecycle for extensions.</p>
<p>All of this makes on-premise deployments easy. On the other hand, Midway itself is a framework that makes code decoupling efficient through TypeScript + IoC capabilities.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-midway-differ-from-other-solutions-" id="how-does-midway-differ-from-other-solutions-"></a><span class="text">How does Midway differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-midway-differ-from-other-solutions-">#</a></h2>
<p>Usually the common FaaS handlers look like this:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// for events</span>
exports<span class="token punctuation" >.</span><span class="token function-variable function" >handler</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>event<span class="token punctuation" >,</span> context<span class="token punctuation" >,</span> callback<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >callback</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-null" >null</span><span class="token punctuation" >,</span> <span class="token string" >"hello world"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// for HTTP</span>
exports<span class="token punctuation" >.</span><span class="token function-variable function" >handler</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>request<span class="token punctuation" >,</span> response<span class="token punctuation" >,</span> context<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
response<span class="token punctuation" >.</span><span class="token function" >send</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"hello world"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>Let's check out the Midway Serverless solution:</p>
<pre><code class="lang-typescript"><span class="token comment" spellcheck="true" >// Midway IoC decorator to declare this class to be provided</span>
@<span class="token function" >Provide</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >MyFirstFunctionClass</span> <span class="token punctuation brackets-braces" >{</span>
@<span class="token function" >Inject</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
ctx<span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// first function, for events</span>
@<span class="token function" >Func</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"api.user"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-async" >async</span> <span class="token function" >myFn1</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token string" >"hello world"</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// second function, for HTTP</span>
@<span class="token function" >Func</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"api.book"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-async" >async</span> <span class="token function" >myFn1</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>ctx<span class="token punctuation" >.</span><span class="token keyword keyword-type" >type</span> <span class="token operator" >=</span> <span class="token string" >"html"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>ctx<span class="token punctuation" >.</span>body <span class="token operator" >=</span> <span class="token string" >"<html><body>hello world</body></html>"</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// third function</span>
@<span class="token function" >Func</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"api.store"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-async" >async</span> <span class="token function" >myFn1</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> data <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> <span class="token function" >request</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"http://xxxx/api/data.json"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>ctx<span class="token punctuation" >.</span><span class="token keyword keyword-set" >set</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"X-HEADER-TIMEOUT"</span><span class="token punctuation" >,</span> <span class="token number" >2000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>ctx<span class="token punctuation" >.</span>body <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
data<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
success<span class="token punctuation" >:</span> <span class="token keyword keyword-true" >true</span><span class="token punctuation" >,</span>
result<span class="token punctuation" >:</span> data<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>It's obvious that the first option seems easier to start quickly while being clearer. On the other hand, we can almost reuse the Midway Web Framework's decorator, even arbitrarily port the IoC-formed code between Midway Web and Midway Serverless.</p>
<p>Furthermore, Midway provides a runtime isolation architecture that is unique in the community. It not only allows functions to run on top of the architecture, keeping the code isolated, but also allows the original application to be migrated quickly, which maintaining a relatively elegant state.</p>
<p>There might be some frameworks like Midway's solution. However, we provide the ability to convert functions and applications, in addition to the traditional decorator for different scenarios, so that the application can decide whether to deploy to functions or applications at build time. Doing this allows developers to focus on the business itself without worrying about the platform they are deploying to in the first place.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-midway-" id="why-did-you-develop-midway-"></a><span class="text">Why did you develop Midway?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-midway-">#</a></h2>
<p>In the past, we used a traditional function architecture to support our logic. After we had been using it for a while, we realized that the cloud vendor itself didn't provide a good package. The required functions had to be combined or even rewritten, and the community didn't have a web framework specifically for Serverless scenarios, which made the development of our business slow.</p>
<p>The experience made us think about the need to solve the problem of migration between different platforms, which led to Midway's first goal on the Serverless system: to prevent vendor lock-in. After designing a set of Serverless lifecycles and implementing some function runtimes, we realized that the community had the same issue.</p>
<p>While the <a href="https://www.serverless.com/">Serverless Framework</a> did some things, it didn't smooth out the differences between platforms at the code level. As a result, we decided to open source Midway Serverless and make this capability available to the community.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We're working on the second major version of Midway, which will provide a combination of full-stack applications, functions, and front-end code to make the whole development experience better.</p>
<p>At the API level, we'll be opening up more scenario decorators, such as @Socket, as well as some logic processing decorators, such as <code>@Pipeline</code>. From a functional perspective, Midway will evolve into an ecosystem that developers can use out of the box, similar to <a href="https://spring.io/projects/spring-boot">Spring Boot</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-midway-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-midway-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for Midway and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-midway-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Whether it's the current full-stack, Serverless Arch, edge computing, AI, 3D, etc., the web developers will use Node.js in many areas, and Midway will also provide capabilities in different scenarios, which will facilitate the Node.js ecosystem evolution and web development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Web development is a creative position, and we should explore more than web technology itself, like Serverless Arch WebAssembly etc., to look at the big picture and become full application engineers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/WenheLI">Eric Li</a>, contributor of <a href="https://github.com/alibaba/pipcook">pipcook</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Harry! I can see why developed Midway and I hope other developers find the solution as well. Serverless computing is an emerging space and it looks like Midway could become a vital part of it.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://github.com/midwayjs/midway">find Midway on GitHub</a> and <a href="https://twitter.com/js_midway">follow Midway news on Twitter</a>.</blockquote>Enroute - Envoy Route Controller - Interview with Chintan Thakkeraenrouteenvoyroutecontrollerinterviewwithchintanthakker2020-08-12t00:00:00z2020-08-12T00:00:00Z<p>When developing APIs, you often get questions like how to combine and control data coming from different sources. That's where proxy-based approaches come in.</p>
<p>To understand one such in better detail, I am interviewing <a href="https://www.linkedin.com/in/chintant/">Chintan Takker</a> as he developed a solution called Enroute.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/6080a7d3db077fa53e575c8c9c17217b.jpg" alt="Chintan Thakker" class="author" width="100" height="100" /><figcaption>Chintan Thakker</figcaption></figure></p>
<p>Hi There, My name is Chintan Thakker, and I am the founder at Saaras Inc. Our primary product is the <a href="https://getenroute.io">Enroute Universal Gateway</a>, an automation-first API Gateway built on <a href="https://www.envoyproxy.io/">Envoy Proxy</a>. Both are open source solutions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_enroute_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_enroute_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Enroute</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_enroute_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Enroute makes it easy to run Envoy as an API Gateway. You can use it for microservices running inside <a href="https://kubernetes.io/">Kubernetes</a> or any service running standalone when there is no Kubernetes.</p>
<p>What makes it easy is simple REST APIs to configure the Standalone gateway or CRDs to configure the Kubernetes Ingress Gateway. Plugins provide the ability to add fine-grained route-level or global policies and traffic control.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Kubernetes is an open source solution for scaling containerized applications.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_enroute_-work-" id="how-does-_enroute_-work-"></a><span class="text">How does <em>Enroute</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_enroute_-work-">#</a></h2>
<p>Enroute works by abstracting away complexities of underlying proxy and providing a simple API, both for Kubernetes and Standalone use-cases. Enroute makes it flexible to add traffic policies at global or route level using a plugin (or filter) architecture. Add a plugin and control all the traffic on the fly, without any restarts or reboots. Simple API calls are all that is needed to get fine-grained control over the traffic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_enroute_-differ-from-other-solutions-" id="how-does-_enroute_-differ-from-other-solutions-"></a><span class="text">How does <em>Enroute</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_enroute_-differ-from-other-solutions-">#</a></h2>
<p>Enroute is an API gateway with batteries included. Since it runs on Envoy, there is a lot of functionality that is included in the solution. Other solutions typically charge for it or have to do extensive development for it.</p>
<p>Enroute is also 100% automatable and there are APIs for everything. Enroute state management is also flexible as you can store state in a database, or run stateless without any database. When running stateless, even a file from GitHub can be used to completely restore the gateway state. For Kubernetes, the state is stored in CRDs and state management is completely Kubernetes-native without any external databases.</p>
<p>Enroute is the only gateway on Envoy proxy that works for both Kubernetes Ingress and Standalone use-cases. Typically solutions either target one or the other. A majority of users have a mix of workloads, and this capability comes in handy, especially with the same consistent policy model across all deployments. And running Envoy makes it a super performant solution.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_enroute_-" id="why-did-you-develop-_enroute_-"></a><span class="text">Why did you develop <em>Enroute</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_enroute_-">#</a></h2>
<p>We saw a clear gap in the automation capabilities of the existing gateways. We took an api-first 100% automation approach when building Enroute. We also see a lot of organizations want to adopt Envoy for their use-cases. Now, you'd think why Envoy? Envoy is highly performant since it is written in C++.</p>
<p>Some were running service meshes that have Envoy. Running Envoy outside provided the same consistent experience with deep visibility, superlative performance and end-to-end tracing. We realized that an API Gateway like Enroute can accelerate time to value for these organizations while solving API Gateway use-cases for all their workloads.</p>
<p>Adoption of Kubernetes is on the rise. With a solution like Enroute, Kubernetes adoption is really simplified, since the same policy for standalone gateway can be easily transferred.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We just released complete OpenAPI automation capabilities and this has a strong security benefit as it eliminates shadow API blind spots. Enroute can now ingest OpenAPI spec and <a href="https://thenewstack.io/shadow-apis-breaking-your-security-the-enroute-api-gateway-could-help/">help flag shadow APIs</a>.</p>
<p>We see an opportunity in Security and Compliance. That is another big focus for us and we are actively building features for that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_enroute_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_enroute_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Enroute</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_enroute_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Cloud adoption is accelerating and there is a need for cloud-agnostic multi-cloud solutions that just work. The ability to integrate with different clouds is a necessity. Enroute with it's API first approach is well-positioned for that.</p>
<p>We also see a clear trend in developer-driven self-serve use cases where a small team is responsible for driving operations for a multitude of services. These teams rely on automation. Developer tools that enable these trends will be key to attaining this agility. Again, we are excited Enroute was built with these goals in mind.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Web developers are the folks that try out the latest tech and set the trend for what comes next. Stay current, and have fun doing it!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>A developer who just went from zero-to-production on their first project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for this opportunity.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Chintan! Enroute sounds like an excellent solution for anyone dealing with APIs and orchestrating their usage.</p>
<p>Backend development has changed a lot during the past decades, and I agree with your assessment that we'll get even more done with less in the future as this type of work becomes automated.</p>
<p>You can <a href="https://github.com/saarasio/enroute">find Enroute on GitHub</a> and <a href="https://twitter.com/SaarasInc">get news about it on Twitter</a>.</p>
Detox - Testing React Native - Interview with Mykola Solopiiadetoxtestingreactnativeinterviewwithmykolasolopii2020-08-06t00:00:00z2020-08-06T00:00:00Z<p>Testing mobile applications is a tough topic as you have to worry about different devices, and the interaction model is challenging.</p>
<p><a href="https://github.com/wix/Detox">Detox</a> is a solution built specifically for React Native, and in this interview we'll learn more about the approach from a QA automation engineer, Mykola Solopii.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/9d24d7a0be838a51f9190d4cd30959eb.jpg" alt="Mykola Solopii" class="author" width="100" height="100" /><figcaption>Mykola Solopii</figcaption></figure></p>
<p>I am a senior test automation engineer at <a href="https://careerkarma.com/">Career Karma</a> with plenty of experience testing different types of applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_detox_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_detox_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Detox</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_detox_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Detox is an open-source end-to-end (e2e) automation library for mobile apps, for both iOS and Android.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_detox_-work-" id="how-does-_detox_-work-"></a><span class="text">How does <em>Detox</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_detox_-work-">#</a></h2>
<p>In our case, Detox runs the Career Karma mobile app and manipulates it like a real user (tap, type text, scroll, etc.).</p>
<p>When Detox runs your tests, two processes start in parallel:</p>
<ol>
<li>It runs your app (simulator or real device)</li>
<li>It runs your test suite on the Node environment and allows sending native commands to your application over WebSocket protocol</li>
</ol>
<p>With such an approach, you can run your tests smoothly, and Detox will build your application and interact like a real user.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Emanuel Surino's article <a href="https://blog.logrocket.com/end-to-end-testing-in-react-native-with-detox/">End-to-end testing in React Native with Detox</a> shows what a Detox session looks like in practice.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-do-_detox_-tests-look-like-" id="what-do-_detox_-tests-look-like-"></a><span class="text">What do <em>Detox</em> tests look like?</span><a class="header-anchor-select" href="https://survivejs.com/#what-do-_detox_-tests-look-like-">#</a></h2>
<p>To give you a better idea of what testing with Detox looks like, consider a test from our codebase:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> OnboardingFlowScreens <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"../screens/OnboardingFlowScreens"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> CommunityScreen <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"../screens/CommunityScreen"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> SignInScreen <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"../screens/SignInScreen"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> onboardingScreen <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >OnboardingFlowScreens</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> signInScreen <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >SignInScreen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> communityScreen <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >CommunityScreen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >describe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Sign in flow"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >beforeAll</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-await" >await</span> device<span class="token punctuation" >.</span><span class="token function" >launchApp</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Grant permissions in advance, because it's impossible</span>
<span class="token comment" spellcheck="true" >// to dismiss permission modals in runtime</span>
permissions<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
notifications<span class="token punctuation" >:</span> <span class="token string" >"YES"</span><span class="token punctuation" >,</span>
photos<span class="token punctuation" >:</span> <span class="token string" >"YES"</span><span class="token punctuation" >,</span>
camera<span class="token punctuation" >:</span> <span class="token string" >"YES"</span><span class="token punctuation" >,</span>
medialibrary<span class="token punctuation" >:</span> <span class="token string" >"YES"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"User should be able to Sign in"</span><span class="token punctuation" >,</span> <span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-await" >await</span> detoxHelper<span class="token punctuation" >.</span><span class="token function" >waitForElementToBeVisible</span><span class="token punctuation brackets-parentheses" >(</span>
onboardingScreen<span class="token punctuation" >.</span>signInButton
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> onboardingScreen<span class="token punctuation" >.</span>signInButton<span class="token punctuation" >.</span><span class="token function" >tap</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >waitFor</span><span class="token punctuation brackets-parentheses" >(</span>signInScreen<span class="token punctuation" >.</span>emailField<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >toBeVisible</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >withTimeout</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >5000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> signInScreen<span class="token punctuation" >.</span>emailField<span class="token punctuation" >.</span><span class="token function" >replaceText</span><span class="token punctuation brackets-parentheses" >(</span>email<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >waitFor</span><span class="token punctuation brackets-parentheses" >(</span>signInScreen<span class="token punctuation" >.</span>passwordField<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >toBeVisible</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >withTimeout</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >5000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> signInScreen<span class="token punctuation" >.</span>passwordField<span class="token punctuation" >.</span><span class="token function" >typeText</span><span class="token punctuation brackets-parentheses" >(</span>password<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> signInScreen<span class="token punctuation" >.</span>submitButton<span class="token punctuation" >.</span><span class="token function" >tap</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >waitFor</span><span class="token punctuation brackets-parentheses" >(</span>communityScreen<span class="token punctuation" >.</span>communityHeaderText<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >toBeVisible</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >withTimeout</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >5000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>
communityScreen<span class="token punctuation" >.</span>communityHeaderText
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >toBeVisible</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_detox_-differ-from-other-solutions-" id="how-does-_detox_-differ-from-other-solutions-"></a><span class="text">How does <em>Detox</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_detox_-differ-from-other-solutions-">#</a></h2>
<p>The crucial difference is that Detox is the grey box automation tool. It means that Detox can automatically synchronize the test execution with your app. Detox understands when the asynchronous operation is completed within your app. After that, Detox continues executing your test. You get the ability to run your tests faster, and they are more stable.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-do-you-use-_detox_-" id="why-do-you-use-_detox_-"></a><span class="text">Why do you use <em>Detox</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-do-you-use-_detox_-">#</a></h2>
<p>It's a piece of cake to use Detox. Usually, mobile automation is intricate, and it's a brand new technology compared to the web. There are not so many mobile automation tools that can manipulate mobile apps efficiently.</p>
<p>Our application is built on React Native and Detox knows how to deal with such technology better than its closest competitors (e.g. Appium) because it was designed specifically for this technology. Detox is like <a href="https://github.com/angular/protractor">Protractor</a> in the mobile automation world, aiming specifically for React Native applications and much more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_detox_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_detox_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Detox</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_detox_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In my subjective opinion, Detox's future depends on the popularity of React Native. If more and more people start using React Native for developing a mobile app - more <a href="https://careerkarma.com/careers/quality-assurance-engineer">QA automation engineers</a> will be using Detox for e2e testing.</p>
<p>It is an open source library supported by Wix, which can ensure Detox growth in the future. If we are speaking about some trends in web development - you never know as web development is changing rapidly.</p>
<p>Literally, 10-15 years ago, people could not imagine the opportunities we have now. So, it is tough to predict the future of web development. I hope it will make developers and users happier!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Find compelling motivation! Begin tinkering with websites and apps. If you have an eye for detail, you can even explore <a href="https://careerkarma.com/blog/manual-to-automation-tester/">starting out as a manual QA tester</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Mykola! I've met Rotem Mizrachi Meidan, the creator of the tool personally, and he was <a href="https://www.youtube.com/watch?v=iCmqaMrrZMA">presenting at the first React Finland about Detox</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://github.com/wix/Detox">find Detox on GitHub</a>.</blockquote>Synthetics - Monitor availability and performance of your website and APIs - Interview with Siva Kaliappanasyntheticsmonitoravailabilityandperformanceofyourwebsiteandapisinterviewwithsivakaliappan2020-06-18t00:00:00z2020-06-18T00:00:00Z<p>Anything you don't measure or test, you cannot improve. The wisdom applies particularly to web as we develop our websites and applications. Without any kind of monitoring solution in place, you are flying blind.</p>
<p>To learn more about the topic, I am interviewing <a href="https://twitter.com/sivasamyk">Siva Kaliappan</a> from Sematext.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>My name is Siva Kaliappan and I am the Product Lead for Sematext Synthetics. I primarily work on the Sematext Monitoring product line across all parts of the stack from the front-end, backend, and agents.</p>
<p>Lately, I have mainly worked on the design and development of Sematext Synthetics. I am also an open-source developer and author of the popular <a href="https://github.com/sivasamyk/logtrail">LogTrail</a> Kibana plugin included in Sematext.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_synthetics_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_synthetics_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Synthetics</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_synthetics_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://sematext.com/synthetic-monitoring/">Sematext Synthetics</a> is like your trusted user who monitors your APIs/websites 24x7 from multiple locations around the globe and alerts you when things go wrong. Sematext Synthetics also provides detailed reports on the availability and performance of your web applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_synthetics_-work-" id="how-does-_synthetics_-work-"></a><span class="text">How does <em>Synthetics</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_synthetics_-work-">#</a></h2>
<p>At a high level, Synthetics works by periodically sending requests to your HTTP endpoints or launching your website in an embedded browser from multiple locations around the globe and recording various performance metrics and errors, if any. Then we check if the actual results meet the expectations and also persist the results for reporting.</p>
<p>As a user, you start by creating an HTTP or Browser monitor, specify the interval to run, list of locations to run the monitor from, monitor specific details, and a list of expected conditions for the monitor to pass.</p>
<p>An <a href="https://sematext.com/docs/synthetics/http-monitor/">HTTP monitor</a> is used to monitor HTTP endpoints like APIs or Web URLs. HTTP monitor sends a single HTTP request to the configured HTTP endpoints with specified request details and records the response and performance timings.</p>
<p>A <a href="https://sematext.com/docs/synthetics/browser-monitor/">browser monitor</a> is used to monitor a web page or user journey. Browser monitor uses a <a href="https://github.com/puppeteer/puppeteer">Puppeteer</a> API based script to drive an embedded Google Chrome browser. Sematext Synthetics runs the script and records the various performance timings and errors, if any. It also captures one or more screenshots of the loaded page for visual inspection.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_synthetics_-differ-from-other-solutions-" id="how-does-_synthetics_-differ-from-other-solutions-"></a><span class="text">How does <em>Synthetics</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_synthetics_-differ-from-other-solutions-">#</a></h2>
<p>One of the major differentiators for Sematext Synthetics is it being part of Sematext Cloud, the integration it provides with <a href="https://sematext.com/spm/">infrastructure monitoring</a>, <a href="https://sematext.com/logsene/">log management</a>, and <a href="https://sematext.com/experience/">real user monitoring</a>.</p>
<p>While you can independently use each of these solutions, you can reap the benefits of their tight integration. Each of them is just a click away makes debugging a <em>lot</em> faster & easier. And with the flexibility to create custom reports and have data from all the above in a single dashboard, you could create a completely customized view of your application performance that suits your needs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_synthetics_-" id="why-did-you-develop-_synthetics_-"></a><span class="text">Why did you develop <em>Synthetics</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_synthetics_-">#</a></h2>
<p>After releasing <a href="https://sematext.com/experience/">Experience</a>, our Real User Monitoring solution last year, we felt Synthetic Monitoring would be the right addition to Sematext Cloud.</p>
<p>Now with Synthetics, our customers can get end-to-end visibility of their applications from a single place. Also, we needed availability monitoring for our applications. We have been using Synthetics to monitor our applications and also found it uncovering issues with our APIs on a few occasions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We have lots of exciting features lined up for Sematext Synthetics. Consider a part of our roadmap below:</p>
<ul>
<li>Support for a browser-based recorder to quickly record Synthetics scripts for non-developers.</li>
<li>The ability to monitor resources behind firewalls using private agents for enterprise users.</li>
<li>Public status pages to share your API status with your customers.</li>
</ul>
<p>And of course, we listen to our users and customers always and will be adding features based on their input, too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_synthetics_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_synthetics_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Synthetics</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_synthetics_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>We see more interest in below areas in the future concerning Synthetic monitoring:</p>
<ul>
<li>The performance metrics measured in the Synthetic environment are moving from browser-centric metrics like page load time, DOM interactive, etc. to user-centric metrics like First Contentful Paint (FCP), Time To Interactive (TTI), Speed Index, etc.</li>
<li>Adding more intelligence around failures - When things fail, instead of just alerting the user that they failed, providing more information for the user to debug and identify the root cause quickly. In some cases, point them to possible root causes. We think Sematext is in a perfect position to do this since we can leverage the end to end visibility of application performance using the Sematext platform.</li>
<li>Integration of Synthetic monitoring into the development workflow to catch web performance issues much earlier in the application lifecycle. It would be made more accessible by providing the ability to run Synthetic tests as part of the CI/CD pipeline.</li>
</ul>
<p>As far as web development trends are concerned, we see below area getting more interest:</p>
<ul>
<li>A move away from classic multi-page websites in favor of single-page apps, even informational/presentational websites thanks to the emergence of static page generators for popular JS frameworks like Gatsby.js.</li>
<li>Single page applications are a defacto standard for any web development. Again thanks to JavaScript frameworks.</li>
<li>We also see that web accessibility is becoming a standard, due to recent regulations and inclusion in most JavaScript frameworks.</li>
<li>To summarize, web standards are driven by major JavaScript frameworks and we don't see this changing soon. There will always be attempts to pass something new. But until big players adopt this, it will not be a standard.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>As computers and mobile devices are becoming faster, the websites are becoming slower. It should be the other way around. The average page size keeps increasing.</p>
<p>As someone new to front-end development, I would advise you to think about the web performance from the beginning. A website that loads quickly and consumes fewer resources results in happier users and a lower carbon footprint. Let us all help build a more sustainable web!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Otis Gospodnetic, Sematext Founder.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>We are excited about the release of Sematext Synthetics and its future road map. Thanks for having me and excellent work with SurviveJS!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Siva! If you haven't already, adding a monitoring solution to your toolkit is a valuable asset for a web developer as that will allow you to put the effort where it matters and understand when things go wrong in a way you might not expect.</p>
<blockquote>
<p>Sematext offers a <a href="https://apps.sematext.com/ui/registration">free 30-day trial</a>. Give it a go and send Siva your feedback!</p>
</blockquote>
JavaScript Security - Interview with David Balabanajavascriptsecurityinterviewwithdavidbalaban2020-04-28t00:00:00z2020-04-28T00:00:00Z<p>Given JavaScript dominates the world of web development, it has become a good target for malicious actors. Furthermore, the flexibility has led to a plethora of attack vectors for cybercriminals making JavaScript security an important topic for web developers.</p>
<p>In this interview, I am discussing with David Balaban, a cybersecurity specialist.</p>
<blockquote>
<p>To learn more about the topic, <a href="https://survivejs.com/blog/secure-coding-interview/">read the interview with Liran Tal</a>.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/a9abfe289a5aada968d3e489b7fd83f2?s=200" alt="David Balaban" class="author" width="100" height="100" /><figcaption>David Balaban</figcaption></figure></p>
<p>My name is David Balaban. I work with <a href="https://macsecurity.net/">MacSecurity.net</a> and <a href="https://privacy-pc.com/">Privacy-PC.com</a> outlets specializing in a vast range of cybersecurity issues, from Mac and Windows malware analysis and ransomware mitigation to software evaluation and the fundamentals of secure web development. The latter has been my particular focus for quite some time, with insights into JavaScript security helping me expand my professional horizons.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-javascript-security-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-javascript-security-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe JavaScript security to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-javascript-security-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>JavaScript is a lightweight scripting language best known for its use in dynamic web page environments. Its purpose is to specify how a web page responds to specific events initiated by the user. A few examples include form submission, animations, and events triggered when you press a button.</p>
<p>To deliver this interactivity, JavaScript is integrated into an HTML page, where it operates in tandem with what is called the Document Object Model (DOM), the underlying tree structure interface of that page. Whereas this tight interplay is the basis for ensuring a seamless user experience, it is also the weakest link in JavaScript implementation because it can allow attackers to deploy harmful scripts over the web and execute them on users' computers.</p>
<p>In other words, the most significant security challenge about JavaScript is that threat actors can mishandle it to inject rogue scripts triggering unwanted website behavior. Combined with classic site hacking, this activity can become a launchpad for the massive distribution of malicious code in a highly covert way. The security side of the matter is all about patching loopholes in JavaScript deployment to prevent perpetrators from tweaking the code for nefarious purposes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-is-javascript-security-" id="what-is-javascript-security-"></a><span class="text">What is JavaScript security?</span><a class="header-anchor-select" href="https://survivejs.com/#what-is-javascript-security-">#</a></h2>
<p>There are three significant reasons why writing secure JS code is easier said than done. All of them stem from the very design and capabilities of JavaScript.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-dynamism-of-the-language" id="the-dynamism-of-the-language"></a><span class="text">The dynamism of the language</span><a class="header-anchor-select" href="https://survivejs.com/#the-dynamism-of-the-language">#</a></h3>
<p>JavaScript is dynamic, asynchronous, and scarcely typed. While being on the plus side of JS, these hallmarks also make it reasonably easy to exploit. For instance, the use of a sketchy ‘eval’ function and the injection of third-party code via ‘script src’ may enable an attacker to execute stings in runtime. As a result, you cannot “statically guarantee” that your code will work in a specific way.</p>
<p>Asynchronous callback functions can be invoked through the likes of the setTimeout method, and XMLHttpRequest object statistically conceals the bulk of treacherous JS errors.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#extensive-capabilities" id="extensive-capabilities"></a><span class="text">Extensive capabilities</span><a class="header-anchor-select" href="https://survivejs.com/#extensive-capabilities">#</a></h3>
<p>JavaScript has assumed quite a few unique characteristics in the course of its evolution. These include prototypes, first-class functions, and closures. They further bolster the dynamic nature of JS, but – you guessed it – they may hamper the process of writing secure code.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#close-ties-between-javascript-and-dom" id="close-ties-between-javascript-and-dom"></a><span class="text">Close ties between JavaScript and DOM</span><a class="header-anchor-select" href="https://survivejs.com/#close-ties-between-javascript-and-dom">#</a></h3>
<p>As I previously mentioned, this binding is the foundation of a smooth user experience. JavaScript modifies DOM dynamically so that the browser instantly reflects these changes. However, the fragments of code used for this interoperability are highly susceptible to errors and third-party interference.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#mainstream-attack-vectors" id="mainstream-attack-vectors"></a><span class="text">Mainstream attack vectors</span><a class="header-anchor-select" href="https://survivejs.com/#mainstream-attack-vectors">#</a></h3>
<p>The mainstream attack vectors piggybacking on the weaknesses of JavaScript include:</p>
<ul>
<li>Cross-site scripting - <a href="https://www.veracode.com/security/xss">XSS</a></li>
<li>Cross-site request forgery - <a href="https://www.veracode.com/security/csrf-attacks">CSRF</a></li>
<li>Server-side JavaScript injection - <a href="https://www.cyberpunk.rs/server-side-javascript-injection-with-nodexp-usage-example-ssji-metasploit">SSJI</a></li>
</ul>
<p>The trio can fuel malware propagation, identity theft, and account takeover.</p>
<p>Security is a matter of minimizing or eliminating the above risks. All it takes is writing flawless code that cannot be exploited by attackers. JS code analysis using specially crafted tools is what bridges the gap between web development and immaculate JavaScript implementation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-are-the-distinctive-features-of-javascript-security-solutions-" id="what-are-the-distinctive-features-of-javascript-security-solutions-"></a><span class="text">What are the distinctive features of JavaScript security solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#what-are-the-distinctive-features-of-javascript-security-solutions-">#</a></h2>
<p>All instruments that assess the JS code for errors and vulnerabilities fall under one of the following categories:</p>
<p><strong>JavaScript code testing frameworks.</strong> These tools automatically check the JS code for common syntax errors. From where I stand, the most important ones are <a href="https://www.npmjs.com/package/qunit">QUnit</a>, <a href="https://www.npmjs.com/package/jasmine">Jasmine</a>, <a href="https://www.npmjs.com/package/mocha">Mocha</a>, and jsTestDriver. There are also APIs such as <a href="https://github.com/SeleniumHQ/selenium">Selenium</a> and <a href="https://phantomjs.org/">PhantomJS</a> that emulate browser behavior when specific code is executed.</p>
<p><strong>Static analysis tools.</strong> Their purpose is to inspect the code for compliance with web development best practices. They help tidy up your code by pinpointing redundant strings and scrutinizing dependencies between JS functions, Cascading Style Sheets (CSS), HTML tags, and images. My personal favorites include WARI, <a href="https://www.npmjs.com/package/jslint">JSLint</a>, <a href="https://developers.google.com/closure/compiler">Google Closure Compiler</a>, and WebScent.</p>
<p><strong>Solutions for dynamic JS code analysis.</strong> These traverse your code for anti-patterns and help you better understand the ties between components and events they trigger. I prefer utilities called <a href="https://github.com/saltlab/dompletion">DOMPletion</a>, <a href="https://github.com/saltlab/JSNose">JSNose</a>, and <a href="https://github.com/saltlab/clematis">Clematis</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-start-working-on-javascript-security-" id="why-did-you-start-working-on-javascript-security-"></a><span class="text">Why did you start working on JavaScript security?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-start-working-on-javascript-security-">#</a></h2>
<p>In my experience, cybercrime is a complex fusion of different attack mechanisms, and JavaScript abuse is one of them. Malicious actors are increasingly embedding dubious JS code into compromised web pages to deposit malware onto visitors’ machines silently and orchestrate large-scale online scams. It is what encouraged me to dive into this particular security domain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I am going to ramp up efforts to explore the ways cybercriminals repurpose JavaScript code to spread predatory software in general and the increasingly prolific Mac adware, in particular.</p>
<p>What does the future look like for JavaScript security? Can you see any particular trends? JavaScript use cases are continuously expanding beyond the original realm. It is increasingly used for developing applications, both mobile and desktop ones.</p>
<p>Environments such as Node.js facilitate JavaScript deployment on web servers. More implementations mean there are potentially more exploitation scenarios that need proper response security-wise.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview David! Although JavaScript lets developers create complex web applications with a relative ease, it also comes with a cost in terms of security. Being able to create secure JavaScript code is a critical prerequisite for making the internet a safer place.</p>
<blockquote>
<p>To learn more about the topic, I recommend checking out <a href="https://owasp.org/www-project-top-ten/">OWASP Top Ten</a> as it lists the main threats and explains them in a great detail.</p>
</blockquote>
MonoLisa - Font follows function - Interview with Marcus Sterzamonolisafontfollowsfunctioninterviewwithmarcussterz2020-03-10t00:00:00z2020-03-10T00:00:00Z<p>As a developer, font is something you end up using every day at your work. One year ago I teamed up with <a href="https://okonet.ru">Andrey Okonetchikov</a> and <a href="http://www.facetype.org/">Marcus Sterz</a>, to create a new typeface for programming.</p>
<p>In this interview, you'll learn more about <a href="https://monolisa.dev/">MonoLisa</a> from Marcus' perspective.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/30e226f5b0b49edba5c67266af32e12d.jpg" alt="Marcus Sterz" class="author" width="100" height="100" /><figcaption>Marcus Sterz</figcaption></figure></p>
<p>I am a type designer from Vienna, Austria. Coming from a background as a graphic designer, I started developing typefaces in 2008. My Foundry name is FaceType; we create retail and custom typefaces.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_monolisa_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_monolisa_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>MonoLisa</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_monolisa_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Developers need well crafted monospaced fonts to read and write code. MonoLisa lets you do that as easy and fast as possible. It did not derive from the premise what it should look like design-wise but rather what the purpose is: font follows function.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-makes-_monolisa_-special-" id="what-makes-_monolisa_-special-"></a><span class="text">What makes <em>MonoLisa</em> special?</span><a class="header-anchor-select" href="https://survivejs.com/#what-makes-_monolisa_-special-">#</a></h2>
<p>The main goal was to create a typeface that’s easy and fast to read, which prevents you from mixing up letters (which leads to errors). A second focus was on keeping the limited space as well balanced as possible – in monospaced typefaces, each letter or symbol is given the same amount of space, which makes it hard to keep the proportions eye-pleasing.</p>
<p>Ideally, a font does not get noticed when you read the text; it just there to transfer information because it’s about content, not letter shapes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_monolisa_-differ-from-other-fonts-" id="how-does-_monolisa_-differ-from-other-fonts-"></a><span class="text">How does <em>MonoLisa</em> differ from other fonts?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_monolisa_-differ-from-other-fonts-">#</a></h2>
<p>I’m afraid the question is not specific enough. MonoLisa differs from most typefaces because most of them are proportional. MonoLisa differs from most monospaced typefaces because most of them are not well designed.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_monolisa_-" id="why-did-you-develop-_monolisa_-"></a><span class="text">Why did you develop <em>MonoLisa</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_monolisa_-">#</a></h2>
<p>The idea to create MonoLisa came after an exciting conversation with Juho Vepsäläinen und Andrey Okonetchnikov about fonts for developers. Although developers look at type all day, most of them seem to use suboptimal fonts for their work. I wanted to give them an excellent option for everyday use.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Illustrations!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_monolisa_-can-you-see-any-particular-trends-in-font-design-" id="what-does-the-future-look-like-for-_monolisa_-can-you-see-any-particular-trends-in-font-design-"></a><span class="text">What does the future look like for <em>MonoLisa</em>? Can you see any particular trends in font design?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_monolisa_-can-you-see-any-particular-trends-in-font-design-">#</a></h2>
<p>The main work is done, but I intend to expand the languages covered to Cyrillic and Greek. Also, many more code related symbols will get implemented. Last month I did not observe any new specific trends.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-people-getting-into-font-design-what-should-they-learn-" id="what-advice-would-you-give-to-people-getting-into-font-design-what-should-they-learn-"></a><span class="text">What advice would you give to people getting into font design? What should they learn?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-people-getting-into-font-design-what-should-they-learn-">#</a></h2>
<p>Just start, don’t expect yourself to come up with a masterpiece. Make mistakes, learn from them, make better mistakes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Try Matthew Carter, a type designer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you'll enjoy using <a href="https://monolisa.dev/">MonoLisa</a>. I've been using it roughly for a year and there's no going back. :)</p>
Debugging JavaScript - Interview with Mehdi Osmanadebuggingjavascriptinterviewwithmehdiosman2020-03-04t00:00:00z2020-03-04T00:00:00Z<p>Debugging JavaScript is one of those topics where people tend to be divided into two camps - those that <code>console.log</code> and those that use a debugger.</p>
<p>In this interview, I am learning more about the topic from <a href="https://twitter.com/MehdiOsman">Mehdi Osman</a>, the CEO of a company called Asayer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/e8b48741f81f84f896773674c2895166.jpg" alt="Mehdi Osman" class="author" width="50" height="50" /><figcaption>Mehdi Osman</figcaption></figure></p>
<p>My name is Mehdi Osman, and I'm the founder of <a href="https://asayer.io">Asayer</a>, a frontend monitoring tool. Before that, I spent a few years as a frontend programmer working with C# and something called Silverlight - a deprecated framework for building rich internet applications - before it was taken by storm by HTML5 and JS frameworks.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-approach-_debugging-javascript_-" id="how-would-you-approach-_debugging-javascript_-"></a><span class="text">How would you approach <em>debugging JavaScript</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-approach-_debugging-javascript_-">#</a></h2>
<p>First and foremost, I try to reproduce the issue. Then I apply three simple techniques for hunting the bug:</p>
<ul>
<li>Avoid using <code>console.log()</code> unless it's necessary</li>
<li>Pause the JS debugger on caught exceptions then walk through my code one line at a time</li>
<li>Test all my assumptions in <code>Console</code> for a potential fix before applying it to my codebase</li>
</ul>
<p>You can learn more on this subject by reading <a href="https://medium.com/asayer/how-to-debug-reactjs-applications-94ffb1aa068c">How to debug a ReactJS application</a> on Medium.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-you-prefer-to-_debug-javascript_-" id="how-do-you-prefer-to-_debug-javascript_-"></a><span class="text">How do you prefer to <em>debug JavaScript</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-you-prefer-to-_debug-javascript_-">#</a></h2>
<p>I use Chrome DevTools. It has everything I need for debugging and auditing my application, and it comes shipped with your browser.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#is-_debugging-javascript_-any-different-than-debugging-other-languages-" id="is-_debugging-javascript_-any-different-than-debugging-other-languages-"></a><span class="text">Is <em>debugging JavaScript</em> any different than debugging other languages?</span><a class="header-anchor-select" href="https://survivejs.com/#is-_debugging-javascript_-any-different-than-debugging-other-languages-">#</a></h2>
<p>Contrary to a backend, debugging frontend applications is a multidimensional problem. Your code may run differently from one browser to another. The rendering of your pages can be broken on mobile devices.</p>
<p>Your application's overall performance depends on many factors - such as CDN, client device, third-party APIs, slow backend, and CPU/memory load - which can significantly affect your user experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-a-service-to-help-with-debugging-js-applications-" id="why-did-you-develop-a-service-to-help-with-debugging-js-applications-"></a><span class="text">Why did you develop a service to help with debugging JS applications?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-a-service-to-help-with-debugging-js-applications-">#</a></h2>
<p>DevTools are useful, but it's applicable only locally in your development environment. Reproducing and fixing issues in production is another story and requires a different approach. That's why we built <a href="https://asayer.io">Asayer</a>, a monitoring tool <em>by, and for</em> frontend developers.</p>
<p>Asayer shows you a video replay of your user session synchronized with all technical details you need to reproduce the issue: network activity, JS errors, console logs, store actions/state, backend logs, and more. In other words, it's like having your browser's inspector open while looking over your user's shoulder.</p>
<p><figure><img src="/9084232454978c77d457a6b29bb4c99a.png" alt="Asayer Application" class="" width="" height="" /><figcaption>Asayer Application</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We want to capture performance-related metrics such as memory usage, framerate, CPU load, speed metrics, crashes, and more. These issues are hard to understand, and most of the time go unnoticed since only very few users would bother to report them.</p>
<p>We'll also release:</p>
<ul>
<li>New plugins for capturing the state from NgRx, MobX, and VueX stores.</li>
<li>GraphQL support for troubleshooting queries.</li>
<li>Integrations with Log Management tools such as Datadog or Sumo. This way, we make bug reproduction even easier by synchronizing backend logs with user session replay.</li>
<li>Support of Github Issues, Jira and Trello, for easy reporting of tickets without leaving Asayer.</li>
</ul>
<p>Our goal is to capture the full context of every user session so developers can easily measure the impact of technical issues on their user experience, and proactively fix them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_debugging-javascript_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_debugging-javascript_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>debugging JavaScript</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_debugging-javascript_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The demand for rich and high-performing interfaces will continue to increase. Complexity is shifting--from once monolithic backends--to frontend applications and there's a lack of tools when it comes to shipping quality code and monitoring applications in production.</p>
<p>The frontend is the last frontier when it comes to productivity and observability tools. I bet we'll see exciting initiatives over the next few years.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Start with the basics (JS, HTML, CSS) as you can reuse them with any framework. Think about performance from day one as it'll force you to follow best practices. Pick any JS framework, but make sure to master it enough before getting hyped up about the newest one. Keep learning and contribute to the open-source community whenever possible.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I can think of:</p>
<ul>
<li><a href="https://twitter.com/pierre_burgy">Pierre Burgy</a> - Founder of Strapi (Headless open-source CMS).</li>
<li><a href="https://twitter.com/Atinux">Stéphane Chopin</a> - Creator of NuxtJS (a meta framework on top of VueJS).</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for having me and excellent job with SurviveJS. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Mehdi! I agree there's a lot we can still do when it comes to debugging frontend. There's a surprising amount of complexity, and especially the amount of devices and platforms we have to support as developers is immense.</p>
<p>You can <a href="https://asayer.io/">learn more about Asayer</a> online, and it's free to try in personal development to get an idea of how the service works.</p>
React Cosmos - A development environment for ambitious developers - Interview with Ovidiu Cherecheşareactcosmosadevelopmentenvironmentforambitiousdevelopersinterviewwithovidiuchereches2020-02-13t00:00:00z2020-02-13T00:00:00Z<p>Developing user interfaces can be complex as you have to think about different ways it's going to be used and you have to design patterns and components to use for defining it. That's where tools like style guides come in.</p>
<p>Earlier, <a href="https://survivejs.com/blog/styleguidist-interview">I interviewed Artem Sapegin about react-styleguidist</a>. To continue the series, this time I'm interviewing <a href="https://twitter.com/skidding">Ovidiu Cherecheş</a>, the author of <a href="https://reactcosmos.org/">React Cosmos</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/b35f2b46ddb2eac3a8e4df3b1a0d63d6?s=200"" alt="Ovidiu Cherecheş" class="author" width="100" height="100" /><figcaption>Ovidiu Cherecheş</figcaption></figure></p>
<p>I'm Ovidiu, a web developer from Romania passionate about building user interfaces and making my tools. With React Cosmos, I married both together and created an open-source tool that makes React devs like me more productive.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_react-cosmos_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_react-cosmos_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>React Cosmos</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_react-cosmos_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>React Cosmos is a dev environment for building scalable, high-quality user interfaces. It enables you to develop React components in isolation and create UI component libraries.</p>
<p><figure><img src="/4e8e933f0bcdec58ffc1d1da3b8078c9.png" alt="React Cosmos" class="" width="" height="" /><figcaption>React Cosmos</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-cosmos_-work-" id="how-does-_react-cosmos_-work-"></a><span class="text">How does <em>React Cosmos</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-cosmos_-work-">#</a></h2>
<p>React Cosmos works around component <em>fixtures</em>, which allows you to bookmark component states by defining sample component inputs. The sum of component fixtures creates your component library, which React Cosmos exposes under a beautiful UI designed to make you more productive.</p>
<pre><code class="lang-jsx"><span class="token comment" spellcheck="true" >// buttons.fixture.js</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token punctuation brackets-braces" >{</span>
primary<span class="token punctuation" >:</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>PrimaryButton</span><span class="token punctuation" >></span></span>Click me<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>PrimaryButton</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
primaryDisabled<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>PrimaryButton</span> <span class="token attr-name" >disabled</span><span class="token punctuation" >></span></span>Click me<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>PrimaryButton</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
secondary<span class="token punctuation" >:</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SecondaryButton</span><span class="token punctuation" >></span></span>Click me<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SecondaryButton</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span>
secondaryDisabled<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SecondaryButton</span> <span class="token attr-name" >disabled</span><span class="token punctuation" >></span></span>Click me<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SecondaryButton</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>React Cosmos needs to understand your source code to work, and it hooks into your build pipeline to do so. Technically this means that you can use React Cosmos regardless of how you write your code, be it ES20XX, TypeScript, Flow, etc. But it also means that sometimes you need to push a few options into a config or two to make the integration work.</p>
<p><figure><img src="/26186ffbef5e0c09128345ddf475ce2b.png" alt="Example views" class="" width="" height="" /><figcaption>Example views</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-cosmos_-differ-from-other-solutions-" id="how-does-_react-cosmos_-differ-from-other-solutions-"></a><span class="text">How does <em>React Cosmos</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-cosmos_-differ-from-other-solutions-">#</a></h2>
<p>React Cosmos is detail-oriented and straightforward. It does only a few things, and it does them well. React Cosmos works exclusively with React. Unlikely other solutions, however, it can be integrated with other bundlers aside from webpack.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_react-cosmos_-" id="why-did-you-develop-_react-cosmos_-"></a><span class="text">Why did you develop <em>React Cosmos</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_react-cosmos_-">#</a></h2>
<p>I started working on my first single-page app back in 2014. The overwhelming complexity quickly drove me to want a dev tool that allows me to build, as well as test, one component at a time.</p>
<p>The team I was a part of created a prototype, a unique <code>/playground</code> route, where we hardcoded inputs for specific components. This workflow made us more productive, especially when debugging complex components. Today's React Cosmos is the evolution of that early prototype.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>So many things - automatic fixture generation, rich inputs for the props panel, showing multiple fixtures side by side, first-class support for other bundlers like Parcel, an official API for plugins, and the list goes on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-cosmos_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_react-cosmos_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>React Cosmos</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-cosmos_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>If we were to let our imagination go nuts, I'd say a full-blown <em>nocode</em> UI builder. That's the dream, right? At least that's what everybody's talking about nowadays. But I lean more on the programmatic side. I look at the dev tools that sank in during the past years, and they're not groundbreaking tools that redesign how we work. They're slightly better versions of existing tools.</p>
<p>Without shifting paradigms, projects like TypeScript and VS Code are beyond popular in 2020. I see great potential in improving on known issues and delivering the best user experience to existing solutions.</p>
<p>For this reason, React Cosmos will focus on improving existing workflows first and creating new ones second. At the same time, if we can automate repetitive work, we should. And UI work is crazy repetitive. So I also believe we'll slowly abstract the boring parts of web development. Which part will be automated next? Well, that's a million-dollar question.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Choose your tools wisely, but don't focus too much on tools. They make all the difference, and you should carefully research the best tool for your project. But once you're productive with a set of tools, stick with them for a while. Keep sharpening that saw, but don't change it too often, as otherwise, you'll never discover its full potential.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/alexnmoldovan">Alex Moldovan</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Ovidiu! I like particularly the way it's possible to define variants to describe components in different states. In design it's about thinking through different options and figuring out good interfaces to capture the purpose of the given component or pattern.</p>
<p>You can <a href="https://reactcosmos.org/">learn more about React Cosmos on the web</a>. Consider also <a href="https://github.com/react-cosmos/react-cosmos">starring the project on GitHub</a> and <a href="https://twitter.com/ReactCosmos">following React Cosmos development on Twitter</a>.</p>
Webix - Declarative UI Framework for Rapid Development - Interview with Maksim Kozhukhawebixdeclarativeuiframeworkforrapiddevelopmentinterviewwithmaksimkozhukh2020-02-07t00:00:00z2020-02-07T00:00:00Z<p>If there's something that has changed during the past few years, it's the way we develop user interfaces using JavaScript. Earlier we've learned about solutions, such as <a href="https://survivejs.com/blog/reakit-interview">Reakit</a>. Now it's time to look into a library designed especially for rapid prototyping.</p>
<p>I'm interviewing Maksim Kozhukh from <a href="https://webix.com/">Webix</a> to learn more about their approach.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/a290725850ec6ea91e73077fe0255b6d.jpg" alt="Maksim Kozhukh" class="author" width="100" height="100" /><figcaption>Maksim Kozhukh</figcaption></figure></p>
<p>I am Maksim Kozhukh, the head of Webix and a software architect with 20+ years of experience and extensive expertise in web technologies. I started my career in Netscape age and came through all web industry trends, disasters, and inventions. Webix is one of the many projects I am managing right now.</p>
<p>My substantial experience in the development of full software products as well as single web components led to <a href="https://webix.com/">Webix UI Library</a>. I embodied my ideas and web development approaches in this project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-webix-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-webix-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Webix to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-webix-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Webix is the JavaScript UI library for business web apps development. The goal of Webix is to simplify and speed up the creation of the UI layer of web applications while keeping the related expense low.</p>
<p>As we worked on the product and gained feedback, we realized that Webix is popular, especially amongst business analysts. They use it to prototype high-level user requirements or to deliver some form of a visual proposal on the pre-sales stage. The approach is becoming more popular, especially in software outsourcing.</p>
<p>We also noted a significant number of junior web developers amongst our users. That implies the library is easy to pick up and use, even with a modest amount of experience.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#working-with-webix" id="working-with-webix"></a><span class="text">Working with Webix</span><a class="header-anchor-select" href="https://survivejs.com/#working-with-webix">#</a></h3>
<p>Starting with Webix, you will work inside the Webix environment and work with a large but limited number of UI controls and widgets. On the other hand, you will save some significant amount of development hours that you can use for any other goals.</p>
<p>Making the UI with the JS library or from scratch, you will probably get rise quite similar result but with different efforts.</p>
<p>And honestly, dealing with dashboards, admin panels, users-lists, you don't need to slide your imagination on waves of inspiration. Mostly, you need the regular data grid, and you need it now. So why not use a ready-made one?</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#tree-ui-example" id="tree-ui-example"></a><span class="text">Tree UI example</span><a class="header-anchor-select" href="https://survivejs.com/#tree-ui-example">#</a></h3>
<p>To give you an example, consider that you need a tree view with the following features: Tree indexer Data sets connected to the tree's branches UX items like a header and draggable border (resizer).</p>
<p>It should look something like this:</p>
<p><figure><img src="/7a2d426f49a33ab571d6b1347582d9b8.png" alt="Tree UI mockup" class="" width="" height="" /><figcaption>Tree UI mockup</figcaption></figure></p>
<p>It would likely take at least a couple of hours of work if developed from scratch, not to mention design required.</p>
<p>In Webix, above would look like this:</p>
<pre><code class="lang-js">webix<span class="token punctuation" >.</span><span class="token function" >ui</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
rows<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"header"</span><span class="token punctuation" >,</span> template<span class="token punctuation" >:</span> <span class="token string" >"My app!"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
cols<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
view<span class="token punctuation" >:</span> <span class="token string" >"tree"</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >:</span> tree_data<span class="token punctuation" >,</span>
select<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
gravity<span class="token punctuation" >:</span> <span class="token number" >0.3</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> view<span class="token punctuation" >:</span> <span class="token string" >"resizer"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
view<span class="token punctuation" >:</span> <span class="token string" >"datatable"</span><span class="token punctuation" >,</span>
autoConfig<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >:</span> grid_data<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>That's all the code you need to declare this particular piece of functionality.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-are-the-key-advantages-of-webix-" id="what-are-the-key-advantages-of-webix-"></a><span class="text">What are the key advantages of Webix?</span><a class="header-anchor-select" href="https://survivejs.com/#what-are-the-key-advantages-of-webix-">#</a></h2>
<p>Webix provides more than a hundred UI widgets out of the box, meaning you'll end up writing less code yourself. For example, Webix provides a data table widget with 21 features like drag-n-drop, sorting, filtering, data validation, clipboard support, fixed areas, advanced editors, <code>rowspan</code>, <code>colspan</code>, grid grouping, vertical headers, sparklines, subviews, and more. The functionality is themeable, and several themes are provided out of the box.</p>
<p>The rendering speed of Webix is good, and this becomes vital as you'll application begins to consume more data. Besides, we've put special attention to documentation and support.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-about-the-disadvantages-" id="how-about-the-disadvantages-"></a><span class="text">How about the disadvantages?</span><a class="header-anchor-select" href="https://survivejs.com/#how-about-the-disadvantages-">#</a></h2>
<p>It's possible you'll encounter challenges in specific use cases as a framework cannot cover each corner. I also wouldn't recommend Webix for any hybrid apps where you use the web on mobile.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-webix-" id="why-did-you-develop-webix-"></a><span class="text">Why did you develop Webix?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-webix-">#</a></h2>
<p>It started as an internal framework for our software outsourcing division. The key goals were to: unify the UX strategies, reuse the source codes, optimize the performance and rendering speed, change the pure JS to classic object-oriented programming approach.</p>
<p>Initially, we developed several commercial products and internal tools with the help of this library and received encouraging feedback in return. As a result, we decided to share the framework with the JavaScript community.</p>
<p>Doing this led to tons of features requests, customization questions, compatibility issues, and so on. Generally, Webix is not the product, but the team and we build our library based on users' feedback. We can say that the JavaScript community inspired us to release this product on the market.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We are actively gathering feedback, and we try to anticipate the wishes of our users. Soon we plan to release new complex widgets for electronic document management, user management, and data reporting. There will be complete SPA applications with elaborate design and business logic.</p>
<p>In addition to that, we have started to develop templates catalog and design presets. These are small but nice perks, which will allow our users to save additional time for the development and prototyping of their applications.</p>
<p>Alongside we are developing WYSIWYG editor, which will allow UX designers to use Webix without programming. Besides, we have finished working on the tight integration with <a href="https://www.salesforce.com/products/commerce-cloud/resources/what-is-ecommerce/">Salesforce</a>, so we are going to offer our clients highly productive components for custom Salesforce solutions creation.</p>
<p>And of course, the library itself will be further developed and improved. It will become more productive, compact, and convenient with every new version.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-webix-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-webix-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for Webix and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-webix-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>It's a difficult question. On the one hand, we notice the development heading to the web and clouds. The share of mobile solutions is growing. But on the other hand, the maintenance of the new web services and platforms is still on the client-server business applications. That's why so far, I don't see any preconditions for the revolutionary changes in the sphere of web development or Webix in particular.</p>
<p>The other tendency we are observing is the avalanche-like growth of the population of the massive web frameworks and it's affecting Webix as well. We have noticed some Webix competitors going in this direction, leaving the market of UI libraries. As a result, the position of Webix is becoming even stronger.</p>
<p>It has been a severe trend lately that we can't ignore. Today we are following this "battle" when users and developers are choosing one framework or the other. We are considering which direction to follow to contribute our expertise there. But the choice has not been made yet.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>We can recommend a similar product, <a href="https://dhtmlx.com/">DHTMLX</a> and <a href="https://xbsoftware.com/">xbsoftware</a> as they work with startups.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Maksim. I feel there's a lot of power in a declarative approach and it seems like many UI approaches are headed to that direction.</p>
<p>Note that if your project is open source and non-commercial, then you can <a href="https://blog.webix.com/using-webix-in-open-source/">apply for a free license</a> and you can <a href="https://webix.com/">learn more about Webix on their site</a>.</p>
VPNpro - How do VPNs work - Interview with Olivia Scottavpnprohowdovpnsworkinterviewwitholiviascott2020-01-28t00:00:00z2020-01-28T00:00:00Z<p>If there's one web technology I never looked that much into, it's VPNs (Virtual Private Networks). In these times when privacy is more valued than ever, the technology has become more relevant to many users and developers.</p>
<p>To understand the topic better, I am interviewing Olivia Scott from <a href="https://vpnpro.com/">VPNpro</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/b56ba101bd33d1e94d8ba1144a8e6fb3?s=200"" alt="Olivia Scott" class="author" width="100" height="100" /><figcaption>Olivia Scott</figcaption></figure></p>
<p>My name is Olivia Scott, and I work for VPNpro. The world of cybersecurity is my passion - I am well-versed on the general topic of data safety and WordPress vulnerabilities in particular. I used to test privacy tools, including VPNs, so I am intimately familiar with the industry.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-vpns-to-someone-who-has-never-heard-of-them-" id="how-would-you-describe-vpns-to-someone-who-has-never-heard-of-them-"></a><span class="text">How would you describe VPNs to someone who has never heard of them?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-vpns-to-someone-who-has-never-heard-of-them-">#</a></h2>
<p>Explaining tech concepts to newbies can be difficult, but I find that the post office metaphor is helpful for understanding VPNs. Imagine you're forced to provide a return address whenever you're sending a letter to someone - the receiver would know your address, whereas the postal service would know both your address and the receiver.</p>
<p>Internet works this way, and you can't access anything on the web without "providing" your IP address (which can just be used to identify you). That means the website you're visiting knows your IP address, whereas your ISP knows what site you've visited.</p>
<p>Using a VPN is kind of like sending your letter to a nameless address, where someone would receive it, repackage it, and send it on to the real receiver (and repeat this action on the way back) - the receiver doesn't know who or where you are. The post office doesn't know who you're corresponding to either. Additionally, using a VPN means encrypting your messages, so no one can understand what you're up to even if they intercept your message.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-vpns-work-internally-" id="how-do-vpns-work-internally-"></a><span class="text">How do VPNs work internally?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-vpns-work-internally-">#</a></h2>
<p>At their core, VPNs are all about infrastructure - networks of servers that user data is siphoned through. These can be very small or massive, sometimes spanning hundreds of countries. How they work differs wildly from one service to another. Some offer lots of different apps and features (undertaking the additional work that implies), whereas others stick to the bare-bones servers only approach.</p>
<p>The contrast is between two options: <strong>custom apps</strong> and <strong>bare-bones solutions</strong>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#custom-apps" id="custom-apps"></a><span class="text">Custom apps</span><a class="header-anchor-select" href="https://survivejs.com/#custom-apps">#</a></h3>
<p>Most of the commercially-successful VPN services offer custom apps. That is to say, the user connects to the VPN server network via apps made by the VPN provider, rather than third-party apps (such as, for example, the open-source OpenVPN app).</p>
<p>Doing this has certain benefits: branding opportunities, freedom in terms of the type of features you include in the app, a custom interface, the ability to track individual user behaviors via the app for optimization, etc.</p>
<p>However, it's a lot more heavy on the service provider's resources: the apps (and features) need to be developed, patched continuously, and so on. The burden increases even further with every new device type you decide to target with an app.</p>
<p>Some VPNs have applications not merely for the big 4 (Windows, macOS, iOS, Android), but also Linux, browser extensions for Chrome/Firefox/Safari/Opera, Amazon Fire TV, Kodi - the list goes on.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#bare-bones-solutions" id="bare-bones-solutions"></a><span class="text">Bare-bones solutions</span><a class="header-anchor-select" href="https://survivejs.com/#bare-bones-solutions">#</a></h3>
<p>Some providers have a network of VPN servers, and that makes up most of their offerings to customers. In this situation, you will use a third-party (e.g., OpenVPN) app to connect to the provider's VPN servers.</p>
<p>The second approach is a lot less resource-intensive, but by choosing it, the provider forfeits all the benefits as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-vpns-differ-from-other-solutions-" id="how-do-vpns-differ-from-other-solutions-"></a><span class="text">How do VPNs differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-vpns-differ-from-other-solutions-">#</a></h2>
<p>Contrary to proxies (some of which can be used for privacy or to beat online censorship), VPNs cover your entire internet connection, not merely your browser or torrent client.</p>
<p>Unlike Tor, (good) VPNs are paid services, but they are also a lot more universal in terms of what you can use them for, and they offer much better performance. Smart DNS tools don't make your performance suffer when streaming Netflix, but they neither obscure your IP address nor encrypt your data either.</p>
<p>In short, a VPN may not be the best for each particular application, but it is the most comprehensive and universal tool.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-start-running-vpnpro-" id="why-did-you-decide-to-start-running-vpnpro-"></a><span class="text">Why did you decide to start running VPNpro?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-start-running-vpnpro-">#</a></h2>
<p>Accurate and useful information about VPN services is scarce, whereas the importance of VPNs and the market as a whole keeps growing. It was already the case when VPNpro opened shop, and it's even more real today.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>There's still plenty to do with VPNs. The industry is dynamic and booming. With that said, we have already started covering some of the other pieces of the cybersecurity puzzle - password managers, for example.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-vpns-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-vpns-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for VPNs? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-vpns-can-you-see-any-particular-trends-">#</a></h2>
<p>Their importance can only grow. Privacy on the internet is becoming ever rarer, and VPNs can counteract this trend to some extent. There are also dangers to be wary of - <a href="https://vpnpro.com/blog/hidden-vpn-owners-unveiled-97-vpns-23-companies/">popular VPN services being owned by fewer and fewer companies</a>, <a href="https://vpnpro.com/blog/how-to-manipulate-google-play-rankings-and-get-280-million-installs/">governments using VPNs to gather user data</a>, and so forth.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>For a web developer, it's interesting to understand where all the traffic is going and how. Understanding VPNs is one of the keys to this and I believe the usage of the services will go up as people become more privacy and security minded.</p>
Squareboat - Growing an IT Business - Interview with Gaurav Guptaasquareboatgrowinganitbusinessinterviewwithgauravgupta2019-12-16t00:00:00z2019-12-16T00:00:00Z<p>What is it like to grow an IT business? At least in my experience, it's not the easiest thing to do, and there are many things you have to get right to stay floating.</p>
<p>To learn more about the topic, I am interviewing <a href="https://twitter.com/gauravgupta">Gaurav Gupta</a> about his company, <a href="https://squareboat.com">Squareboat</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/128a88950d42eb8860d404e25518c26d.jpg" alt="Gaurav Gupta" class="author" width="100" height="100" /><figcaption>Gaurav Gupta</figcaption></figure></p>
<p>I am a tech entrepreneur who wants to use technology to make the world a better place. After spending a big part of my life in the industry, I feel that an understanding and control of technology is the ultimate super-power that anyone can have.</p>
<p>I have worked with some of the world’s biggest companies for over 12+ years, immersed in developing and maintaining vast and scalable web and mobile applications end-to-end including product conceptualization, design, backend and frontend development, deployment, server management, uptime, reliability, performance, and scalability.</p>
<p>With Squareboat, I am working towards my goal of adding value to the lives of people who use the products developed by us.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_squareboat_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_squareboat_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Squareboat</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_squareboat_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Squareboat is an Internet startup with incredibly talented people working together under a single roof. We build beautiful, scalable, and feature-rich web and mobile applications. Some of the world's best companies trust us for making their web and mobile applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-is-the-business-model-of-_squareboat_-has-it-changed-over-time-" id="what-is-the-business-model-of-_squareboat_-has-it-changed-over-time-"></a><span class="text">What is the business model of <em>Squareboat</em>? Has it changed over time?</span><a class="header-anchor-select" href="https://survivejs.com/#what-is-the-business-model-of-_squareboat_-has-it-changed-over-time-">#</a></h2>
<p>Our business model has been the same from day one. We build mobile and web applications for our clients and hopefully eliminate the need for our clients ever to hire or feel the need to hire their tech teams.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_squareboat_-differ-from-other-vendors-" id="how-does-_squareboat_-differ-from-other-vendors-"></a><span class="text">How does <em>Squareboat</em> differ from other vendors?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_squareboat_-differ-from-other-vendors-">#</a></h2>
<p>I think our most significant difference is our ability to understand complex system requirements and present them to our end users in a clean, simple, and understandable way. We’re a big believer in making clear products, have a great UX, and can be understood at a glance.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-start-_squareboat_-" id="why-did-you-start-_squareboat_-"></a><span class="text">Why did you start <em>Squareboat</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-start-_squareboat_-">#</a></h2>
<p>It was clear to me at an early stage that the Internet is about to revolutionize every business. It was also evident that the average software company in India is simply not capable of delivering to the needs of these new-age startup founders.</p>
<p>Doing this requires not only excellent technical capability but also someone who can speak to them in their language, understand their business goals, and then architect products accordingly. Squareboat was formed precisely to solve this need.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Hopefully, an even bigger team, more products, and many more success stories!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_squareboat_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_squareboat_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Squareboat</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_squareboat_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The future holds immense opportunities for Squareboat. Technology is changing rapidly, and so are we. Looking at the trends, we can anticipate that the diversity of new platforms is going to take software development to another level. Well, whatever the future may be, Squareboat will always keep ruling the roost and deliver the best experience to everyone.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Keep your basics and concepts clear because technology keeps changing now and then. Choose projects/practice over theory.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>To conclude, I would like to say that technology has become the backbone of humanity, and it is essential for people to understand both its pros and cons.</p>
<p>As a founder of a tech company, I am excited about the possibilities that the future holds for us, and we as a company are up for the challenge to continually remain the leaders in the space and impact millions of lives with our beautiful and impactful products.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Gaurav! The most exciting part of the technology market for me is figuring out ways to deal with the pace of change. The way we develop keeps changing rapidly as new technologies appear, and as an entrepreneur, it's a challenge to keep up.</p>
Tomo - Like CRA but more flexible - Interview with Jason Wohlgemuthatomolikecrabutmoreflexibleinterviewwithjasonwohlgemuth2019-09-04t00:00:00z2019-09-04T00:00:00Z<p>Although tools like create-react-app (CRA) are great, they can at times be inflexible. They might provide great defaults but at the same time you lose some power and room for experimentation.</p>
<p>To learn more about an alternative tool, I'm interviewing <a href="https://twitter.com/jhwohlgemuth">Jason Wohlgemuth</a>, the author of Tomo.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>My name is Jason Wohlgemuth. I am a principal software engineer working for BAE Systems in Omaha, Nebraska. I am a Jesus follower, husband, and father of 3 boys (two of which are identical twins). I am a progressive polyglot that prefers the front-end and likes to think that I can improve just about anything using science and software. In my free time, among other things, I want to make stuff...like tomo.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_tomo_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_tomo_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Tomo</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_tomo_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Tomo is a friendly command-line tool that you can use to quickly craft and customize sustainable software using the latest and greatest web technology. Not sure what build tools to use? Great. Tomo allows you to compare apples to apples and go deeper after you have made an informed decision.</p>
<p>As an example, you can use tomo to scaffold a React web app that builds with webpack. Then you can swap out webpack for Parcel and quickly compare the benefits of both (hint: Parcel HMR is much faster for small projects). By the way, HMR (or live-reload for Marionette.js based apps) is included by default. Tomo can scaffold new web apps, native apps, libraries, and servers and can add testing, linting, CSS-support, and more to existing projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_tomo_-work-" id="how-does-_tomo_-work-"></a><span class="text">How does <em>Tomo</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_tomo_-work-">#</a></h2>
<p>Tomo starts with an intuitive command-line interface. Don't know what to make? <a href="https://github.com/jhwohlgemuth/tomo-cli#select-what-you-want-to-add-via-the-tomo-cli-add-menu">Use Tomo's menus</a>. Make a mistake while typing? Take comfort in Tomo's <a href="https://github.com/jhwohlgemuth/tomo-cli#made-a-mistake-while-typing-tomo-has-your-back-">friendly automatic error correction suggestions</a>.</p>
<p>Tomo is built with Node.js and leverages the React API using <a href="https://github.com/vadimdemedes/ink">vadimdemedes/ink</a>. Behind Tomo's declarative UI is a collection of modular commands (like "create source directory" or "add ESLint support").</p>
<p>The UI pieces together the desired commands to be executed and keeps the user updated as the process progresses. The <a href="https://github.com/jhwohlgemuth/tomo-cli/blob/master/src/commands/index.js">index file for Tomo's commands</a> reads like a checklist for building things. In short, the UI is rendered declaratively using ink, and the commands are executed using Sindre Sorhus's library, <a href="https://github.com/sindresorhus/execa">execa</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_tomo_-differ-from-other-solutions-" id="how-does-_tomo_-differ-from-other-solutions-"></a><span class="text">How does <em>Tomo</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_tomo_-differ-from-other-solutions-">#</a></h2>
<p>Tomo does not seek to hide the complexity of modern web technology build chains - Tomo does not need an <code>eject</code> command. Tomo does not try to replace your build chain either. It allows you to build with what you know, compare what you do not know, and augment what you already have.</p>
<p>From my personal experience exploring the web, I have not found such a tool. With Tomo, you can easily compare apps with nearly identical architecture and run them side by side - one with webpack and one with Parcel.</p>
<p>Tomo allows you to create web (and native) apps using <a href="https://marionettejs.com">Marionette.js</a>. You can create apps with Marionette.js or directly compare "template interpolation rendering" (using Marionette.js) and "component rendering" (using React).</p>
<p>Finally, Tomo can <em>augment</em> existing projects. That is, tomo can do things like add ESLint support, switch out Webpack with Parcel (and vice versa) and add integration testing with Cypress. Being able to create, add, and remove makes tomo very versatile. Tomo can be used for exploring new technology and exploiting known technology.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_tomo_-" id="why-did-you-develop-_tomo_-"></a><span class="text">Why did you develop <em>Tomo</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_tomo_-">#</a></h2>
<p>Tomo is the spiritual successor to a Yeoman generator I made a couple of years back called <code>generator-omaha</code>. My "omaha" generator allowed one to make various choices of technology and create projects, web and native apps, and servers. The generator had a hard dependency on yeoman, limited UI options, and did not cleanly allow one to <em>augment</em> existing projects.</p>
<p>I decided to re-write the generator and eventually I decided to re-write it <em>from scratch</em>, not as a generator, but as a stand-alone CLI app. I had taken an interest in "React for the CLI" and had seen the success of projects like <a href="https://github.com/maticzav/emma-cli">emma-cli</a>. Furthermore, I wanted to have finer-grain control of the UI and desired a pleasant DX while building it...this is why I decided to give <a href="https://github.com/vadimdemedes/ink">ink</a> a try.</p>
<p>Around that time, I found myself in Africa for a year at the behest of the United States Navy. With nothing but my wits and my trusty Surface Pro 6, I spent most of my year creating what I now call tomo. More generally, tomo (and its predecessor, omaha) is how I codify my learning. That is, every pattern and best practice I know is encoded into Tomo.</p>
<p>You could say tomo is my <strong>dynamic digital living codex of web tech knowledge that I use to build, share, and remember</strong>. Lastly, as I found myself dipping my toe in other languages such as Rust, ReasonML, ClojureScript, and Elm, I had the need for adding CSS support (<code>tomo add postcss</code>)...or the desire to integrate ReasonML into an existing JS project (<code>tomo add reason</code>).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>That is a tough one. As for Tomo improvements and new features, I catalog my plans on a public <a href="https://trello.com/b/keq2Bc4R/tomo-cli">Trello board</a>. Other than new features, I intend to make things with tomo to prove its worth (both to me and others). I will continue to update Tomo as I learn and will use it in my projects.</p>
<p>A couple of stand-out features high on my list are enhanced native app creation, stdin support for using config files to run tomo, and codemod integration for doing things like transitioning from AMD to ES6. My long term vision is to include Tomo as part of a more significant effort to create a voice-enabled emotive digital assistant.</p>
<p>I have a multi-tiered plan for getting there, but the next step might be adding voice support to tomo. The general idea is to have tomo running and listening to your voice as you develop. During your development, tomo would respond to commands like "lint this file", "run my tests", or "create a server".</p>
<p>Unrelated to voice support, I just added <code>tomo new app --with-cesium [--use-react]</code>, so I will probably be making an app using <a href="https://cesiumjs.org/">CesiumJS</a>, <a href="https://resium.darwineducation.com/">resium</a>, and <a href="https://github.com/uber/h3-js">Uber's H3</a> soon...ish (tomo makes it really <a href="https://github.com/jhwohlgemuth/tomo-cli#install-and-deploy">easy to deploy</a> a Cesium app to surge or now :wink:)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_tomo_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_tomo_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Tomo</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_tomo_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Tomo's future is bright: as long as I am making things with web technology, I will be codifying my knowledge into tomo.</p>
<p>Web development, in general, is a horse of a different color. AMD seems dead, WebAssembly will continue to gain popularity and React will stay relevant and remain more than a UI library. It is a pattern that crosses the language barrier (ex: <a href="https://reasonml.github.io/reason-react/">reason-react</a> and <a href="https://reagent-project.github.io/">reagent</a>) (note: I love React hooks).</p>
<p>As far as what I would like to see - I am a big fan of <a href="https://twitter.com/hashtag/usetheplatform?src=hashtag_click">#usetheplatform</a> (<strong>#usetheplatform</strong> is a driving force behind tomo). That is, tools like Babel and frameworks, in general, are like scaffolding around the building that is your web application. As the "platform" (browser) evolves and gains functionality (like web components), the scaffolding will be removed. Maybe one day, Babel and PostCSS will no longer be needed (frameworks in one form or another will probably persist).</p>
<p>With the availability of universal support for <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">"module type" scripts</a>, even bundlers may one day be a thing of the past (especially if projects like <a href="https://github.com/pikapkg/web">pika</a> have anything to say about it).</p>
<p>I really want to believe web components have finally arrived, but I have had that thought several times in the past few years...despite my pessimism, I love <a href="https://lit-element.polymer-project.org/">lit-element</a> and even integrate <a href="https://github.com/polymer/lit-html">lit-html</a> into tomo Marionette.js apps (<code>tomo new app [--native]</code>). Finally, I LOVE functional programming. I hope it continues to gain traction (neither of us has the time in the day for me to convey <em>all</em> my thoughts/emotions on functional programming 🤓).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Other than "use tomo"? 😁</p>
<p>I might say something like:</p>
<blockquote>
<p>Become comfortable with math and try to stay "implementation agnostic".</p>
</blockquote>
<p>It hurts my heart when I read articles that espouse beliefs like "math is not important for web development". Perhaps you can avoid math if you stick to making simple landing pages with GatsbyJS or so. If you are going to make things of notable complexity or going to move the field forward, you will need math.</p>
<p>Now, I do not mean to say a Masters in Mathematics is the cost of entering the field of web technology. Whether it is purposeful or otherwise, good developers use math regularly.</p>
<p>Example: Have you ever seen something like <code>!(!A || !B)</code> and re-wrote it as <code>A && B</code>? It is called <a href="https://en.wikipedia.org/wiki/De_Morgan%27s_laws">De Morgans laws</a>, and I use it at least weekly. I am aware that this may not be a pleasant topic for some, but as a lifetime lover of math, to me, it is just spreading the joy of the <a href="https://www.goodreads.com/author/quotes/88990.Norbert_Wiener">"...most colossal metaphor imaginable"</a> 😁. Also, the functional programming paradigm is based on concepts such as lambda calculus so...math.</p>
<p>By "implementation agnostic", I mean to say avoid being an "angular developer" or even a "react developer". Instead, strive to be a "web developer that understands the underlying concepts of [angular|React|whatever] and is familiar with its usage]". If you discover the underlying patterns of widespread technology, you will find that the web technology deluge is not as deep as some might lead you to believe.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have three suggestions:</p>
<ul>
<li><a href="https://github.com/chrismaltby">Chris Maltby</a> - He created <a href="https://www.gbstudio.dev/">GB Studio</a>, an unbelievably cool project that allows one to create Gameboy games! GB Studio consists of an Electron game builder application and a C based game engine using GBDK. Super fun. I would love to hear more about its creation and development (and want to see it gain popularity).</li>
<li><a href="https://github.com/RangerMauve">RangerMauve</a> - RangeMauve created a <a href="https://github.com/RangerMauve/local-first-cyberspace">local-first-cyberspace manifesto</a>. I would be interested to hear more on the topic from the source.</li>
<li><a href="https://jacobjackson.com/">Jacob Jackson</a> - He created an intelligent code completion engine using a deep learning model trained on GitHub data. It is available as extensions for Atom, and VSCode called <a href="https://tabnine.com/">TabNine</a>. It is written in Rust. I would be interested to know more details on how he made it and what he sees in store for the future of TabNine and deep learning-powered code tools.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Standards matter. Pick one and stick to it. <a href="https://github.com/omahajs/eslint-config-omaha-prime-grade">This is the ESLint part of mine</a>.</p>
<p>My favorite functional programming quote is by Michael Feathers:</p>
<blockquote>
<p>Objected oriented programming makes code understandable by encapsulating moving parts. Functional programming makes code understandable by minimizing moving parts.</p>
</blockquote>
<p><a href="http://benalman.com/news/2012/08/why-grunt/#comment-704079936">My favorite comment</a> about web tech is from Jon Schlinkert:</p>
<blockquote>
<p>I guess we're just stuck in this downward spiral of continuous improvement. By the way, how's that job search for a dedicated Makefile engineer going?</p>
</blockquote>
<p>Most of all: <strong>Thank you!</strong> I sincerely appreciate the chance to speak on some of my favorite things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Jason! It's great to see when developers create tools for their own need out of sheer passion for creation and codify what they've learned.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://github.com/jhwohlgemuth/tomo-cli">Learn more about Tomo at GitHub</a>.</blockquote>Secure Coding - Interview with Liran Talasecurecodinginterviewwithlirantal2019-07-31t00:00:00z2019-07-31T00:00:00Z<p>There's more than one way to code, and you'll find multiple programming styles. One aspect that's perhaps neglected sometimes is <em>secure coding</em>.</p>
<p>To learn more about the topic, I'm interviewing <a href="https://twitter.com/liran_tal">Liran Tal</a>, a security expert.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/287bb23f57a850c63f8bbd50c7ad7bed?s=200"" alt="Liran Tal" class="author" width="100" height="100" /><figcaption>Liran Tal</figcaption></figure></p>
<p>Hi! I’m from Israel, married and father to 5 years old Ori Tal. I’ve been dabbling with software and open source since elementary school, mostly through the FOSS movement around the Linux OS. I was drawn to information security, through-out my childhood and adult life.</p>
<p>It’s always been an on-and-off thing until recently. For example, I authored a book about Node.js Security, and work with the Node.js Foundation’s Security working group. These activities led me to consider a Developer Relations role at <a href="https://snyk.io">Snyk</a> seriously. Ultimately I made a move from a software developer and team lead to security full-time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_secure-coding_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_secure-coding_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Secure Coding</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_secure-coding_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Taking into account the security aspects of the code we write is as important as ensuring it's performant and bug-free. Secure coding contributes to the overall quality of our software. Similar to other doctrines, to write secure code, we follow best practices, secure conventions, and standards. This way, we ensure that the code we write is following standards and free of security bugs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-is-_secure-coding_-important-" id="why-is-_secure-coding_-important-"></a><span class="text">Why is <em>Secure Coding</em> important?</span><a class="header-anchor-select" href="https://survivejs.com/#why-is-_secure-coding_-important-">#</a></h2>
<p>As a developer, I naturally relate a lot to secure coding practices because, as developers security vulnerabilities that manifest due to security bugs begin with us. The <a href="https://snyk.io/opensourcesecurity-2019/">state of open source security report</a> from 2018 revealed the median time of a security bug from introduction to discovery. Based on the study, it takes no less than two and a half years!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_secure-coding_-differ-from-other-forms-of-security-" id="how-does-_secure-coding_-differ-from-other-forms-of-security-"></a><span class="text">How does <em>Secure Coding</em> differ from other forms of security?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_secure-coding_-differ-from-other-forms-of-security-">#</a></h2>
<p>There are indeed so many forms for security, as well as verticals in which security kicks in. Good examples are network security or application security. The common dominator, however, is software because the software is eating the world and so just like Software Defined Networking, many other technologies will eventually become software-based.</p>
<p>When we zoom in on the software development lifecycle, security should be embedded throughout the entire lifecycle from planning and design to development, testing, and production monitoring. Secure coding is that first phase in that lifecycle where planning meets implementation.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>OWASP has a significant number of resources, one of which is the <a href="https://www.owasp.org/index.php/OWASP_Secure_Coding_Practices_-_Quick_Reference_Guide">Secure Coding Practices</a> reference that would serve up as a good starting point, to begin with.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_secure-coding_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_secure-coding_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Secure Coding</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_secure-coding_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I believe that we are going to see a lot of automation and developer-empowered workflows and tools. These will help us make sure that we bake security into the development process and not treat it as an after-thought. The trend makes a lot of sense because of the scale that we’re facing.</p>
<p>There are a hundred developers for every security person in an organization. The situation is hard to scale, and it's impossible to run manual reviews per commit which get deployed quickly as we also embrace CI/CD and DevOps. Because of this, we need excellent security automation tools to help us realize good security in our applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>For anyone getting into software development, I’d recommend to unlock yourself from the chains of frameworks or keeping up with trends. Focus on building things you are passionate about and challenges that fuel your brain. Connect with communities and colleagues so you can enrich each other with knowledge and confidence.</p>
<p>As you are making your way in software, take the time to study essential software development skills. These include the essence of writing tests, the art of debugging, and the importance of software security and the principles of security best practices.</p>
<p>One of these communities is <a href="https://www.thesecuredeveloper.com/post/owasp-top-ten-proactive-controls-jim-manico">the secure developer</a> where we feature Jim Manico among other great speakers and AppSec influencers to support developers. I take part in this community and invite you to join as we're running webinars, a newsletter and a Slack group for security-minded developers. We cover secure coding practices and all-around web security topics.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/BenedekGagyi">@BenedekGagyi</a> or <a href="https://twitter.com/Alyssa_Herrera_">@Alyssa<em>Herrera\</em></a> are going to have interesting stories which I’m eager to read about!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Open source is fantastic, and we’re at exciting times in software and technology in general. Take a deep breath and jump in!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Liran! As a topic, <em>secure coding</em> is one of those techniques that often gets overlooked and I feel there's a lot for many developers to learn. I can't wait for more tooling to appear in the space to help us develop robust, more secure software.</p>
Experiences on CSSCamp and JSCamp 2019aexperiencesoncsscampandjscamp20192019-07-27t00:00:00z2019-07-27T00:00:00Z<p>I was invited to <a href="https://csscamp.tech">CSSCamp 2019 (17.07)</a> and <a href="https://jscamp.tech">JSCamp 2019 (18-19.07)</a> by David Pich, the main organizer, to help out. I performed speaker interviews and a part of the Twitter coverage while documenting the event a bit.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-csscamp-and-jscamp-2019" id="overview-of-csscamp-and-jscamp-2019"></a><span class="text">Overview of CSSCamp and JSCamp 2019</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-csscamp-and-jscamp-2019">#</a></h2>
<p><figure><img src="/548762292734dd20bea03c1e1ea2b228.jpg" alt="Hello from CSSCamp or JSCamp" class="" width="" height="" /><figcaption>Hello from CSSCamp or JSCamp</figcaption></figure></p>
<p>CSSCamp and JSCamp were held as a dual conference in Barcelona, Spain. CSSCamp was held for the first time while JSCamp was the second time in a row. Before that, there used to be a year of AngularCamp before the event was rebranded last year.</p>
<p>In total, the events attract roughly 600 developers, and especially the conference portions seemed close to sold out although there was space in the workshops. I know from experience selling can be unpredictable, and many things can go wrong.</p>
<p><figure><img src="/d0e61f1c54ec8db160d850397b6f25c4.jpg" alt="Preparing for the speaker interviews" class="" width="" height="" /><figcaption>Preparing for the speaker interviews</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-venue" id="the-venue"></a><span class="text">The Venue</span><a class="header-anchor-select" href="https://survivejs.com/#the-venue">#</a></h3>
<p><figure><img src="/da4131317ff4f6c6c31140841dca2007.jpg" alt="Especially the lighting of the venue was impressive" class="" width="" height="" /><figcaption>Especially the lighting of the venue was impressive</figcaption></figure></p>
<p>The event was held at Auditorio AXA, the same venue as last year. Although not the most spacious, it's one of the more attractive conference venues I've seen, and it fits the purpose quite well. Capacity-wise the conference cannot grow from this within the same space, but that said, the scale seems fine even now. Sometimes events become too big, and as a result, the atmosphere suffers.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-workshop-days-15-16-07" id="the-workshop-days-15-16-07"></a><span class="text">The Workshop Days - 15-16.07</span><a class="header-anchor-select" href="https://survivejs.com/#the-workshop-days-15-16-07">#</a></h3>
<p><figure><img src="/bd1417758c784f75b6cdd7b8ff8fe07b.jpg" alt="Coffee at the workshops" class="" width="" height="" /><figcaption>Coffee at the workshops</figcaption></figure></p>
<p>The conference began on Monday with a workshop by Kyle Simpson. He held another one on Tuesday, and that's when I joined the event. On Tuesday, Sean Larkin and Harry Roberts held theirs in addition to a second workshop by Kyle. The workshops were held in a full-day format. I cannot comment on the quality of the workshops as I didn't attend any this time.</p>
<p><figure><img src="/3af43cefb20d4f99418876550381bc77.jpg" alt="Learning hard at a workshop" class="" width="" height="" /><figcaption>Learning hard at a workshop</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#csscamp-17-07" id="csscamp-17-07"></a><span class="text">CSSCamp - 17.07</span><a class="header-anchor-select" href="https://survivejs.com/#csscamp-17-07">#</a></h3>
<p><a href="https://csscamp.tech">CSSCamp</a> was held right after the workshop days. It was targeted towards both designers and developers, and I feel it made the whole conference more diverse than the last year.</p>
<p>The day started with a keynote by Tatiana Mac, where she discussed how to build socially inclusive design systems. It's easy to forget the context in which we design, and by understanding our biases, we'll be able to create more accessible designs.</p>
<p><figure><img src="/c5b21e8e71b5fec5c31c8b9e8848a67b.jpg" alt="Tatiana Mac delivering her keynote" class="" width="" height="" /><figcaption>Tatiana Mac delivering her keynote</figcaption></figure></p>
<p>After the keynote, Jason Pamenthal followed with a technical talk about variable fonts and their potential for the web. Variable fonts move away from the traditional thinking of fonts where you have multiple separate variants of the same typeface to choose from. Instead, we have a single typeface we can alter on various dimensions using variables, hence the name variable fonts.</p>
<p>Cassie Evans talk showcased how to use SVG for animation on the web, and it was well-received by the audience. I think there's a lot of potential there we are still missing as developers. The funny thing is that as a specification SVG is old but we still don't use it to its full potential. It's nice to see SVG receiving more attention as especially now with high resolution displays using it pays off.</p>
<p><figure><img src="/3f8b81d72aa635ba0c555680fc6cd40f.jpg" alt="Cassie Evans at the makeup lady - each speaker received the treatment" class="" width="" height="" /><figcaption>Cassie Evans at the makeup lady - each speaker received the treatment</figcaption></figure></p>
<p>Oliver Turner continued on Houdini, the upcoming standard that's going to change the way we write and think about CSS. The talk was valuable as it showed perhaps a glance of a future where innovation in CSS is driven by the community, not by the standards bodies.</p>
<p><figure><img src="/d3330f3884df177e80dcd7f28f36416a.jpg" alt="Oliver Turner captured from the backstage" class="" width="" height="" /><figcaption>Oliver Turner captured from the backstage</figcaption></figure></p>
<p>After the lunch break, Stéphanie Walter dived into design techniques that let us improve perceived performance. Although actual, absolute performance is essential, by understanding a bit of psychology, we can create applications that feel faster by designing the right way.</p>
<p>Adam Argyle's following talk went into the opposite direction, claiming that sometimes our user interfaces are too fast. By slowing down the animations, you create an entirely different perception of the application. The idea is related to increasing padding on a site as having more room creates a distinct impression.</p>
<p>In his talk, Sergei Kriger discussed how to make asynchronous user interfaces accessible. Many applications are like this, and it was interesting to see how you might perceive such an interface from an accessibility perspective. It's an aspect I hadn't thought about before.</p>
<p>Harry Roberts dug into the concept of resource hints. They are asset loading annotations that tell the browser something about your preference but doesn't force it to do anything. That's why they are called hints. Perhaps the most known example is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content"><code>rel="preload"</code></a> as you can use it to tell the browser to load assets even before you need them to speed up subsequent usage of your application or a site.</p>
<p>Lara Schenck took a refreshing look at how to write and test CSS. Her thesis was that you could treat CSS as a programming language. Especially the trendy topic of utility classes taps into this. In the approach, you wrap specific functionality behind a particular class and then combine the result to create the user interface you prefer.</p>
<p>Although the method requires effort when you construct the classes, now you have something you can share between views, and most importantly, to test. Testing CSS is an underappreciated topic, and it was great to see an approach that lets us do that.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#jscamp-18-07-day-1" id="jscamp-18-07-day-1"></a><span class="text">JSCamp - 18.07 - Day 1</span><a class="header-anchor-select" href="https://survivejs.com/#jscamp-18-07-day-1">#</a></h3>
<p><figure><img src="/543c6a98abcb1569f4d72f73f86ef59b.jpg" alt="Kyle Simpson preparing for his keynote" class="" width="" height="" /><figcaption>Kyle Simpson preparing for his keynote</figcaption></figure></p>
<p>After the CSSCamp day, it was time for JSCamp and its two days. The first conference day began with an 80-minute keynote by Kyle Simpson. His main point was that we should rethink the way we develop our sites and applications. Although ideas like progressive enhancement were valid in the past, we need a bit more.</p>
<p>Kyle's thesis was that we should let the user define which fidelity they prefer by using a quality metric. The implementation can be a slider that allows the user to choose the version of the site they prefer. To implement the scheme, we'll have to change our thinking and make our work more composable. We have to begin to think in terms of feature sets and different versions of a feature. The idea would push the control over the quality of service to the user from the developer end and shift the focus.</p>
<p>Jenn Creighton's talk continued on the topic of iterators. She held the presentation in a refreshing "choose your own adventure" format that made it a bit more interactive while discussing the issue. Iterators are behind many of the basic structures of JavaScript, and understanding them lets us access some of the power introduced in the new features of the language over the past few years.</p>
<p>Sigurd Schneider, a part of the V8 team at Google, dug into the internals of V8. He gave an in-depth talk on many of the features that aren't discussed so often. In terms of memory management, weak collections seem like a way forward. I expect most JavaScript developers won't end up using them, and it's a feature for especially library authors to leverage.</p>
<p>After a lunch break, Maya Shavin discussed the rise of CSS-in-JS. Overall, it was an excellent introduction to the topic, and I'm definitely in favor of the approach as it lets me develop component libraries effectively. The utility class movement is parallel to this as it addresses the same concerns of CSS maintainability.</p>
<p>Adam Argyle's second talk dug into pwototyping. By this, he means using modern PWA approach to prototype a high fidelity mobile application fast. It's achieved by using a set of techniques that let us deliver high performance. The idea is not to develop the functionality but rather to envision what it might look like to a potential investor or a client. The approach optimizes development speed and fidelity in favor of architecture and other concerns. The point is to use a spike like this to sell the project which you then implement properly.</p>
<p>Shawn Wang continued on the idea of <a href="https://jamstack.org">JAMStack</a>. His thesis was that JavaScript is eating the world of static site generation, and this, in turn, is affecting the way we approach even large content-driven sites. As time goes by, it becomes possible to push more and more functionality into this realm while gaining many benefits of static websites.</p>
<p>I'm a proponent of the approach, and I've seen its power in practice as I've developed my sites. Especially creating your content API and then driving site generation from that is powerful, and I believe there's still more to come as technology evolves.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#jscamp-18-07-afterparty" id="jscamp-18-07-afterparty"></a><span class="text">JSCamp - 18.07 - Afterparty</span><a class="header-anchor-select" href="https://survivejs.com/#jscamp-18-07-afterparty">#</a></h3>
<p><figure><img src="/bdb266071a73e556e0ae4dcd95fea3ca.jpg" alt="Sala Bikini" class="" width="" height="" /><figcaption>Sala Bikini</figcaption></figure></p>
<p>The afterparty of the event was held at Sala Bikini right underneath the main venue. Space itself was great although the party may have been too late for people to join. I decided to turn in early to prepare for the last day of the conference as it had been a rough week already.</p>
<p><figure><img src="/ee0dd13f473f71a62adb62717cccdd88.jpg" alt="Partying at afterparty" class="" width="" height="" /><figcaption>Partying at afterparty</figcaption></figure></p>
<p>One of the main attractions of the afterparty was a synthpop band. Although I missed the show, I had a chance to discuss with the band during a speakers' dinner and they seemed like fun people and I bet the gig was great.</p>
<p><figure><img src="/e98a33c10629d491a91bf038d8eb6f35.jpg" alt="Preparing for the gig" class="" width="" height="" /><figcaption>Preparing for the gig</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#jscamp-19-07-day-2" id="jscamp-19-07-day-2"></a><span class="text">JSCamp - 19.07 - Day 2</span><a class="header-anchor-select" href="https://survivejs.com/#jscamp-19-07-day-2">#</a></h3>
<p><figure><img src="/f9b2c25d72b03f2cc1182f9e5c28780c.jpg" alt="There was something interesting to look at but I don't know what" class="" width="" height="" /><figcaption>There was something interesting to look at but I don't know what</figcaption></figure></p>
<p>Day two of JSCamp started with a talk about accessibility patterns by Garance Vallat. She included many practical examples, and it was an informative talk to follow. For me, as a conference organizer, it would have been interesting to pair the presentation with Sergei Kriger's one as then you gain an enhanced perspective on the topic.</p>
<p>Ruben Bridgewater's talk discussed the topic of error handling. I think it was an excellent topic for the conference often given JavaScript developers don't provide a lot of thought to it. I should leverage inheritance to create a hierarchy of Error classes, so when I raise an error, then I get its category straight out of the box.</p>
<p>The other learning was that it makes sense to have a layer where you at least capture and log possible errors. When discussing with him, I learned he is in favor of letting applications crash fast as at least then you have a clear state which to fix. Based on that, I would say it's essential to take care of your monitoring, so you fix potential runtime issues as you notice them.</p>
<p>Sean Larkin's presentation delved into how Microsoft makes applications fast. It makes sense to have a protocol on how you track performance issues and document what you are doing so other people can learn as well. Sometimes the fix itself is trivial. To fix something, you have to be aware that something was wrong in the first place. It's one of the points where monitoring what you and your users are doing can help.</p>
<p>Paul Verbeek-Mast's talk went into the evolution of dev tools. It's an underappreciated topic, and it was great to see how much the tooling has evolved. I learned that Firefox has particular functionality in its tooling to visualize flex and grid while Chrome tooling seems better for tracking performance issues.</p>
<p>After the lunch break, Vladimir Agafonkin, the author of leaflet and many other popular libraries, discussed algorithmic performance and its implications in practice. It's one of the things many people learn during their time at university. Given there's a large number of developers that don't understand the topic, it was great to see the talk.</p>
<p>It was particularly instructive to see practical examples of speedups whereby first understanding the problem, Vladimir was able to speed up the code significantly. It can mean your code won't look as clean after optimization, but that's the tradeoff to make to cut algorithmic complexity. It's an especially valuable skill to have if you work on code that requires high performance.</p>
<p>Rich Harris' talk was about <a href="https://svelte.dev">Svelte</a>. It's a web framework using a compiler-heavy approach. Compared to libraries like React, the amount of code you have to write is significantly smaller, and that was also the central thesis of Rich's presentation. By writing less code, you end up writing fewer bugs. The declarative approach provided by Svelte is refreshing.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/svelte-interview">You can learn more about an earlier version of Svelte at the interview.</a></blockquote><p>Henri Helvetica ended the conference by discussing the evolution and the shape of the web. It was more of a philosophical talk that put what we are doing as web developers into a context. As web developers, we have a great responsibility in how the web develops. We should take good care of it, so it's there for future generations to use as we did in our time.</p>
<p><figure><img src="/f6c6408e46aee6b324d39e9f5bde4e5d.jpg" alt="Did you know Helvetica is Henri's stage name?" class="" width="" height="" /><figcaption>Did you know Helvetica is Henri's stage name?</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/ebcad5957f0b85da10415b31fdec51c4.jpg" alt="At Tibidabo, one of the speakers' dinner locations" class="" width="" height="" /><figcaption>At Tibidabo, one of the speakers' dinner locations</figcaption></figure></p>
<p>For me, both CSSCamp and JSCamp are reliable conferences. They seem to pull the local communities together and compared to the last year, and I think the audience was more diverse. It was a good move to attract more designers to the events by having the CSS theme included. The venue itself is excellent although now it's running at its limit meaning the conference cannot grow further.</p>
<p>If you want to experience Barcelona in Summer, it's not the worst idea to visit the conferences. The content is good, and the city is fantastic. I can't wait to see what David has in mind for the next year.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://www.icloud.com/sharedalbum/#B0pG6XBubLzvzF">You can find my conference photos online.</a></blockquote>Sketch.sh - Interactive ReasonML sketchbook - Interview with Nguyen Dang Khoaasketchshinteractivereasonmlsketchbookinterviewwithnguyendangkhoa2019-07-16t00:00:00z2019-07-16T00:00:00Z<p>Often learning a new programming language like <a href="https://reasonml.github.io">ReasonML</a> can be an arduous process as you have to set up the environment and tooling before you can begin learning.</p>
<p>That's where <a href="https://sketch.sh">Sketch.sh</a> by <a href="https://twitter.com/thangngoc89">Nguyen Dang Khoa</a> comes in. It's an online service addressing the problem for Reason.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/8378133c824f6d2fd4e89d98bd4e8d87?s=200"" alt="Nguyen Dang Khoa" class="author" width="100" height="100" /><figcaption>Nguyen Dang Khoa</figcaption></figure></p>
<p>Hey. My name is Nguyen Dang Khoa. I'm a freelancer from Viet Nam. I usually work on React.js/Node.js/ReasonML projects, and I built Sketch.sh.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_sketch-sh_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_sketch-sh_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Sketch.sh</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_sketch-sh_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>You can think of <em>Sketch.sh</em> as a notebook with an integrated code editor. You can execute ReasonML/OCaml code and get the results immediately.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_sketch-sh_-work-" id="how-does-_sketch-sh_-work-"></a><span class="text">How does <em>Sketch.sh</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_sketch-sh_-work-">#</a></h2>
<p>OCaml has its own virtual machine called <code>ocamlrun</code> for executing the bytecode produced by <code>ocamlc</code>. Here is an overview of OCaml's compilation targets:</p>
<p><figure><img src="/47e510c5d5fe43b8b5a7e149e97431f7.png" alt="OCaml compilation targets" class="" width="" height="" /><figcaption>OCaml compilation targets</figcaption></figure></p>
<p><a href="https://github.com/ocsigen/js_of_ocaml/">js_of_ocaml</a> is an OCaml-to-JavaScript compiler. <em>Sketch.sh</em> works by using <code>js_of_ocaml</code> to compile <code>ocamlc</code> and <code>ocamlrun</code> to JavaScript and then executes user's input code by calling these tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_sketch-sh_-differ-from-other-solutions-" id="how-does-_sketch-sh_-differ-from-other-solutions-"></a><span class="text">How does <em>Sketch.sh</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_sketch-sh_-differ-from-other-solutions-">#</a></h2>
<p>Some solutions like <a href="https://repl.it">repl.it</a>, <a href="https://nextjournal.com">nextjournal</a> offer the same functionality, but all the code execution is done server-side. They developed a special server infrastructure to handle this kind of work. With <em>Sketch.sh</em>, everything is executed inside the user's browser. <em>Sketch.sh</em>'s server is used for saving, handling authentication, and many other things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_sketch-sh_-" id="why-did-you-develop-_sketch-sh_-"></a><span class="text">Why did you develop <em>Sketch.sh</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_sketch-sh_-">#</a></h2>
<p>ReasonML is a fully typed language with a strong inference engine so you rarely see any code annotations. This is a big problem when helping others with their bug/coding issues; I have to open the terminal, run the compiler each time. I created <em>Sketch.sh</em> to reduce the friction when asking questions about ReasonML.</p>
<p>Currently, the process looks like this:</p>
<ol>
<li>Hey, I have this coding issue. Here is a Sketch with runnable code, could you help me fix the bug?</li>
<li>Here is a new Sketch with that bug fixed.</li>
</ol>
<p>How cool is that?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm currently working on supporting BuckleScript and ReasonReact as well as improving SEO, discoverability of popular sketches.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_sketch-sh_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_sketch-sh_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Sketch.sh</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_sketch-sh_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Becoming a developer is getting more comfortable every day since there are tons of tools that help you learn about web development without leaving the browser. I hope that <em>Sketch.sh</em> will be part of that trend for folks who want to learn about ReasonML and web development in general.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Learn the basics first, JavaScript, HTML, and CSS. It will benefit you in the long run. Frameworks come and go, only the languages (JavaScript) stay. If you know JavaScript, you can adapt to any frameworks (React, Angular, Vue, Ember, and so on).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://twitter.com/leostera">Leandro Ostera</a>: I love his Reasonable Coding stream and his works on improving ReasonML documentation foundation.</li>
<li><a href="https://twitter.com/bryphe">Bryan Phelps</a>: He's building <a href="https://v2.onivim.io/">oni2</a>.</li>
<li><a href="https://twitter.com/ulrikstrid">Ulrik Strid</a>: He's a wizard when it comes to setting up Azure pipeline and automating the CI process.</li>
<li><a href="https://sketch.sh">Andrey Popp</a>: He's the main developer of <a href="https://esy.sh">esy</a> - ReasonML native package manager. I can't imagine <em>Sketch.sh</em> without it.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you're interested in <em>Sketch.sh</em> or working on some challenging UI, come around and say hi at <a href="https://twitter.com/sketch_sh">@sketch_sh</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Nguyen! I think <em>Sketch.sh</em> is a great boon for people interested in Reason and also for those who want to support people learning it as it allows you to illustrate the usage of the language in a convenient manner.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://sketch.sh">try Sketch.sh online</a> and also <a href="https://github.com/Sketch-sh/sketch-sh/">check out the code at Github</a>.</blockquote>Experiences on WorkerConf 2019aexperiencesonworkerconf20192019-07-02t00:00:00z2019-07-02T00:00:00Z<p>I was invited to <a href="https://www.worker.sh">WorkerConf 2019 (27-28.06)</a> as a speaker. I also participated a workshop and went hiking after the conference. It was a small-scale conference (about 80 people) held in Dornbirn, Austria. It was my second time in the city and I enjoyed especially exploring the alpine scenery and the nearby cities on my way to <a href="https://www.meetup.com/webpack-munich/events/261324233/">the yearly webpack meetup held at Munich</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-workerconf-2019" id="overview-of-workerconf-2019"></a><span class="text">Overview of WorkerConf 2019</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-workerconf-2019">#</a></h2>
<p><figure><img src="/882265774ecc90e6558d6a88fbe6894b.jpg" alt="Dornbirn at night" class="" width="" height="" /><figcaption>Dornbirn at night</figcaption></figure></p>
<p>WorkerConf was held second time in Dornbirn. It's a sibling to <a href="https://www.agent.sh">Agent Conf</a> by the same organizers. While Agent Conf is about the frontend and skiing, WorkerConf has focus on the backend and Summer activities such as hiking or swimming.</p>
<p>Both events have workshops available and I think it's a good idea to combine conferences with something more than just technical content as it allows you to experience the region and the culture while making your trip more complete.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-workshop-day" id="the-workshop-day"></a><span class="text">The Workshop Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-workshop-day">#</a></h3>
<p><figure><img src="/6496182f63f54c4dbfb54c9e9fc0b5a7.jpg" alt="Tractor at Dornbirn" class="" width="" height="" /><figcaption>Tractor at Dornbirn</figcaption></figure></p>
<p>I took part in the Node.js and <a href="https://www.fastify.io">Fastify</a> workshop by Matteo Collina and Tomas Della Vedova. The half-day workshop (4 hours) covered the Fastify web framework in detail and gave the participants a good idea of its capabilities and approach.</p>
<p>The instructors were knowledgeable but I would have enjoyed more relaxed pace by having an entire day to dedicate to the topic. Often there are technical issues to debug and a day format gives more room for discussion.</p>
<p>That said, I think Fastify is a great framework to study especially as a replacement to the aging Express. The promise of high performance combined with a robust plugin architecture make this forward-looking framework a winner in my eyes.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-conference-day" id="the-conference-day"></a><span class="text">The Conference Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-conference-day">#</a></h3>
<p><figure><img src="/064e52cf331515aad7c3bd290ac57d1e.jpg" alt="Atmosphere" class="" width="" height="" /><figcaption>Atmosphere</figcaption></figure></p>
<p>As it's usual for smaller conferences, WorkerConf ran in a single day format. The conference day was long as the program begun 9:00 after a brief breakfast and ended around 20:30 after the last talk. There were thirteen speakers in total and the talks varied from more general ones to technology specific ones.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-venue" id="the-venue"></a><span class="text">The Venue</span><a class="header-anchor-select" href="https://survivejs.com/#the-venue">#</a></h3>
<p><figure><img src="/0259edf1ac9775f4743beebcd6656577.jpg" alt="Waterguns!" class="" width="" height="" /><figcaption>Waterguns!</figcaption></figure></p>
<p>The organizers were rather unlucky with the weather as the event was hit by a heatwave. The small venue (Plattform_V) and its air conditioning couldn't keep up with the conference and I prefer the nearby venue used for Agent Conf instead. The organizers arranged refreshments and there was plenty to drink so that helped a notch.</p>
<p>The screen of the venue was quite nice (limited to 720p) but unfortunately a part of it was obscured by the pedestal setup making it difficult to follow the presentations from the side at times. That's more of a limitation of the space, though, and it wasn't a major annoyance.</p>
<p>The catering for the lunch and the dinner was provided by a food truck parked nearby. The venue itself had occasional snacks and overall the food had better quality than most conferences I've been to.</p>
<p>Likely the venue would have worked much better if the weather hadn't been so hot. Now a large portion of the attendees had left the venue well before the last talks.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#13-speakers-broad-web-topics" id="13-speakers-broad-web-topics"></a><span class="text">13 Speakers, Broad Web Topics</span><a class="header-anchor-select" href="https://survivejs.com/#13-speakers-broad-web-topics">#</a></h3>
<p><figure><img src="/aa6705cb8466d9384fc6e8b39d6842ea.jpg" alt="WorkerConf" class="" width="" height="" /><figcaption>WorkerConf</figcaption></figure></p>
<p>In total, the conference had thirteen speakers with varying web-related topics. The topics were well organized and there were plenty of tidbits to learn even for an experienced practitioner. The breaks were long enough and gave a good chance to escape the heat a bit.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#ultralight-java-microservices-with-graalvm-thomas-w-rthinger" id="ultralight-java-microservices-with-graalvm-thomas-w-rthinger"></a><span class="text">Ultralight Java Microservices with GraalVM - Thomas Würthinger</span><a class="header-anchor-select" href="https://survivejs.com/#ultralight-java-microservices-with-graalvm-thomas-w-rthinger">#</a></h3>
<p><figure><img src="/31ef44e25dd63aa53d11c1f01de83e07.jpg" alt="Thomas Würthinger" class="" width="" height="" /><figcaption>Thomas Würthinger</figcaption></figure></p>
<p>Although I don't develop Java, there are lots of technologies that emerge from the space. Oracle's <a href="https://www.graalvm.org">GraalVM</a> is one of those. I wasn't familiar with the virtualization solution before so it was nice to get an introduction to the topic.</p>
<p>The main thesis of Thomas Würthinger was that there's a gap between interpreted and compiled languages. Both have their strong sides and it's possible there are some ways to bridge this gap over time. At the moment you'll have to compromise between the characteristics you want.</p>
<p>The interesting thing about GraalVM is that the environment has been to designed to run a lot of different languages and even to mix them. You could run Java inside JavaScript and vice versa if I understood correctly. This means you could implement portions of an application in the language best suited for it.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#javascript-class-features-a-case-study-in-tc39-dan-ehrenberg" id="javascript-class-features-a-case-study-in-tc39-dan-ehrenberg"></a><span class="text">JavaScript Class Features: A case study in TC39 - Dan Ehrenberg</span><a class="header-anchor-select" href="https://survivejs.com/#javascript-class-features-a-case-study-in-tc39-dan-ehrenberg">#</a></h3>
<p><figure><img src="/126c58d21201c6e36e839cde855940b2.jpg" alt="Dan Ehrenberg" class="" width="" height="" /><figcaption>Dan Ehrenberg</figcaption></figure></p>
<p>Dan Ehrenberg from TC39 discussed the standardization process to show people how JavaScript evolves through the influence of the committee and people taking part in its operation. You don't have to be a member of TC39 working group to affect the evolution of its language as their <a href="https://github.com/tc39">work is public on GitHub</a>.</p>
<p>When it comes to decorators, Dan's main topic, it was interesting for me to see how the community forced the hand of TC39 to standardize the feature by first having unofficial implementations of the requested feature in the wild. The rising popularity of the feature meant it will most likely have to become a part of the official standard.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#javascript-quo-vadis-juho-veps-l-inen" id="javascript-quo-vadis-juho-veps-l-inen"></a><span class="text">JavaScript - Quo Vadis - Juho Vepsäläinen</span><a class="header-anchor-select" href="https://survivejs.com/#javascript-quo-vadis-juho-veps-l-inen">#</a></h3>
<p><figure><img src="/5ee8c8a25f8c68bbdc0f2bc2547fdff3.jpg" alt="Quo Vadis" class="" width="" height="" /><figcaption>Quo Vadis</figcaption></figure></p>
<p>I gave my talk about the future of JavaScript. I had given the talk a few times before. The first time I did it was in 2016 so it was interesting for me to go through the slides and update everything. Many of the original points still stood while a few new ones had appeared.</p>
<p>It feels like the ecosystem is in a constant motion. The current struggles seem to center around package management (npm) and the increasing popularity of typing (TypeScript). My expectation is that we'll see progress in these fronts during the next 5-10 years as the community will adapt both to use distributed alternatives for package management while adopting typing even in larger scale.</p>
<p>It's likely the awareness on the value of typing will lead people to new ecosystems. It feels like <a href="https://reasonml.github.io">ReasonML</a> is in the same place where TypeScript was five years ago while it was still a young language. I don't expect the Reason to become mainstream but I think it will contribute a lot to the development of JavaScript and its ecosystem by showing us better ways of developing while innovating in the space.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://presentations.survivejs.com/javascript-quo-vadis/">You can find the slides of my talk online.</a></blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#visualizing-cloud-architectures-in-real-time-with-d3-js-julie-ng" id="visualizing-cloud-architectures-in-real-time-with-d3-js-julie-ng"></a><span class="text">Visualizing cloud architectures in real time with d3.js - Julie Ng</span><a class="header-anchor-select" href="https://survivejs.com/#visualizing-cloud-architectures-in-real-time-with-d3-js-julie-ng">#</a></h3>
<p><figure><img src="/4161b2b678e9edd220b13a8514411c63.jpg" alt="Julie Ng" class="" width="" height="" /><figcaption>Julie Ng</figcaption></figure></p>
<p>Julie Ng's talk focused on her experiences around cloud architectures and microservices in particular. Her talk was a great tutorial to the topic and the challenges related to developing applications this way.</p>
<p>She built a visualization based on the popular <a href="https://d3js.org">D3.js</a> to illustrate how a fault on a graph of microservices would cascade. The point was that it's a debuggable option to standard dashboards that show only numbers without telling much about the exact faults.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#next-js-the-react-framework-tim-neutkens" id="next-js-the-react-framework-tim-neutkens"></a><span class="text">Next.js: The React Framework - Tim Neutkens</span><a class="header-anchor-select" href="https://survivejs.com/#next-js-the-react-framework-tim-neutkens">#</a></h3>
<p><figure><img src="/3af4a93c53521accd981328b9de11a49.jpg" alt="Tim Neutkens" class="" width="" height="" /><figcaption>Tim Neutkens</figcaption></figure></p>
<p>Tim Neutkens' presentation gave an overview of the popular <a href="https://nextjs.org">Next.js framework</a> for React. As a recent user of Next.js, it helped me to understand its capabilities and future better. The framework has been progressing furiously over the past few years so it was great to see the vision for it.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#server-side-rendering-using-nuxt-js-vanessa-b-hner" id="server-side-rendering-using-nuxt-js-vanessa-b-hner"></a><span class="text">Server-Side Rendering using Nuxt.js - Vanessa Böhner</span><a class="header-anchor-select" href="https://survivejs.com/#server-side-rendering-using-nuxt-js-vanessa-b-hner">#</a></h3>
<p><figure><img src="/1c72e64219486a61437bb3070bca10a6.jpg" alt="Vanessa Böhner" class="" width="" height="" /><figcaption>Vanessa Böhner</figcaption></figure></p>
<p>Vanessa Böhner's talk complemented Tim's talk by discussing <a href="https://nuxtjs.org">Nuxt.js</a>, a Next.js inspired framework for Vue.js. She explained how she approached developing a site for her podcast under a strict deadline. It was cool to see the contrast with the React approach.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#speeding-up-react-ssr-with-esx-david-mark-clements" id="speeding-up-react-ssr-with-esx-david-mark-clements"></a><span class="text">Speeding Up React SSR with ESX - David Mark Clements</span><a class="header-anchor-select" href="https://survivejs.com/#speeding-up-react-ssr-with-esx-david-mark-clements">#</a></h3>
<p><figure><img src="/d2e05d01a071aacf52932e91c15191e7.jpg" alt="David Mark Clements" class="" width="" height="" /><figcaption>David Mark Clements</figcaption></figure></p>
<p>According to David Mark Clements, if React was invented today, we wouldn't be using JSX. Instead, we would rely on ES6/ES2015 template strings. And that's what he achieved in by developing <a href="https://www.npmjs.com/package/esx">esx</a>. esx lets you write JSX within template strings.</p>
<p>The great benefit of the approach is that it can speed up server-side rendering by avoiding work through caching. The more complicated your application is, the greater the potential gains.</p>
<p>The best thing is that to get the benefits, you don't even have to use esx as it's possible to precompile JSX to esx without having to change the way you write code. It's good to note approach is still experimental, though, and you should test the behavior and output carefully in a production environment.</p>
<p>My hope is that the ideas explored by David find their way to React code eventually as then a large community could benefit from the performance benefits.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#javascript-the-fairly-odd-parts-explained-benedikt-meurer" id="javascript-the-fairly-odd-parts-explained-benedikt-meurer"></a><span class="text">JavaScript: The fairly odd parts (explained) - Benedikt Meurer</span><a class="header-anchor-select" href="https://survivejs.com/#javascript-the-fairly-odd-parts-explained-benedikt-meurer">#</a></h3>
<p><figure><img src="/e53fdbce213d5b9ec1fa836f7d40cd1b.jpg" alt="Benedikt Meurer" class="" width="" height="" /><figcaption>Benedikt Meurer</figcaption></figure></p>
<p>Benedikt Meurer, one of the organizers of the conference, gave a lightning talk on fairly odd parts of JavaScript. I saw the original version of the talk in YGLF Kiev 2018 and now Benedikt dove into the details. Overall it was an entertaining bit and a great addition to the conference by one of the authors of the legendary V8 engine.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#benchmarking-inside-and-out-tomas-della-vedova" id="benchmarking-inside-and-out-tomas-della-vedova"></a><span class="text">Benchmarking inside and out - Tomas Della Vedova</span><a class="header-anchor-select" href="https://survivejs.com/#benchmarking-inside-and-out-tomas-della-vedova">#</a></h3>
<p><figure><img src="/92774940ac243733221dff10b5c72771.jpg" alt="Tomas Della Vedova" class="" width="" height="" /><figcaption>Tomas Della Vedova</figcaption></figure></p>
<p>Tomas Della Vedova, one of the authors of Fastify, discussed his approach to benchmarking. The main points for me were that before measuring, you should make sure the JIT is warm by performing a few runs before starting the main ones. You also have to be careful about what you measure. You may end up measuring something entirely different than what you want if you don't think about the test setup.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automating-your-vulnerabilities-away-tierney-cyren" id="automating-your-vulnerabilities-away-tierney-cyren"></a><span class="text">Automating Your Vulnerabilities Away - Tierney Cyren</span><a class="header-anchor-select" href="https://survivejs.com/#automating-your-vulnerabilities-away-tierney-cyren">#</a></h3>
<p><figure><img src="/571888004f6d6cdb3a4972a556008774.jpg" alt="Tierney Cyren" class="" width="" height="" /><figcaption>Tierney Cyren</figcaption></figure></p>
<p>Tierney Cyren from Node.js discussed security of npm and applications built on top of it. You should maintain a cached version of the registry to protect against catastrophic failures from registry side. It's also important to keep track of the current versions of the packages and leverage tools such as <code>npm audit</code>.</p>
<p>You should also have a process for dealing with security issues so if something happens, you are at least ready instead of having to improvise. Given Node itself can have security issues, you should have means to get notified so you can update as needed.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#reason-a-ml-language-for-the-masses-patrick-stapfer" id="reason-a-ml-language-for-the-masses-patrick-stapfer"></a><span class="text">Reason: A ML language for the Masses - Patrick Stapfer</span><a class="header-anchor-select" href="https://survivejs.com/#reason-a-ml-language-for-the-masses-patrick-stapfer">#</a></h3>
<p><figure><img src="/d226c4f68543a9a2925e5d532867f653.jpg" alt="Patrick Stapfer" class="" width="" height="" /><figcaption>Patrick Stapfer</figcaption></figure></p>
<p>Patrick Stapfer, the founder of <a href="https://www.reason-association.org">Reason Association</a>, discussed Reason language and why it's finally ready for the masses. He gave an overview of the capabilities of the language and after that he gave a live demonstration showing the value of the type system.</p>
<p>I think Reason is starting to get to a good place and you can already see especially product houses adopting it for their own development.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#stream-into-the-future-matteo-collina" id="stream-into-the-future-matteo-collina"></a><span class="text">Stream into the future - Matteo Collina</span><a class="header-anchor-select" href="https://survivejs.com/#stream-into-the-future-matteo-collina">#</a></h3>
<p><figure><img src="/a4102725bf3faba4f62960127053acd9.jpg" alt="Matteo Collina" class="" width="" height="" /><figcaption>Matteo Collina</figcaption></figure></p>
<p>Matteo Collina, one of the authors of Fastify and the maintainer of Node.js streams, discussed the complexity of streaming. Handling streams has always been challenging in Node.js and it's even more complex than I thought. Fortunately Matteo is doing his best to improve the primitives while avoiding breaking too much in the process.</p>
<p>One of the hard parts will be remedying the differences between the browser and Node.js streaming so APIs like <code>fetch</code> work as we expect. To make things worse, using promises brings its own problems. As it happens, generators might be the right primitive to use with streams instead of what we've seen so far.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#security-the-serverless-future-olga-skobeleva" id="security-the-serverless-future-olga-skobeleva"></a><span class="text">Security: the serverless future - Olga Skobeleva</span><a class="header-anchor-select" href="https://survivejs.com/#security-the-serverless-future-olga-skobeleva">#</a></h3>
<p><figure><img src="/f871ef3b3a11b40d0c7f83b3d78863d7.jpg" alt="Olga Skobeleva" class="" width="" height="" /><figcaption>Olga Skobeleva</figcaption></figure></p>
<p>Olga Skobeleva discussed how Cloudflare is moving towards edge computing and what it means in practice. Compared to what we had before, pushing computation close to the consumer seems like the next natural step as it means in some cases we can avoid a round-trip to the server. The approach is new still but there's enough capability to experiment with.</p>
<p>To demonstrate, Olga showed how to develop two-way authentication using a traditional password combined with a message sent to Telegram messaging platform to confirm login to a service.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#hiking-day-at-latschau" id="hiking-day-at-latschau"></a><span class="text">Hiking Day at Latschau</span><a class="header-anchor-select" href="https://survivejs.com/#hiking-day-at-latschau">#</a></h2>
<p><figure><img src="/74693fb3d9a7ffe84b690ddf69f46f19.jpg" alt="Hiking at Latschau" class="" width="" height="" /><figcaption>Hiking at Latschau</figcaption></figure></p>
<p>The highlight of the conference for me was hiking on Saturday at Latschau. It's simply amazing to go up and down the hills. The views are amazing and there's even snow. Best of all, it's not too hot although you have to be careful with the sun. I wouldn't mind hiking in the mountainous region of Austria more. The experience alone made the whole trip worth it.</p>
<p>There was one more activity day on Sunday but I didn't have enough time to stay for that as I went to Munich to run <a href="https://www.meetup.com/webpack-munich/events/261324233/">the yearly webpack meetup</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/3462288a1706484b840d1be8f5bc50e7.jpg" alt="If you don't like clowns, don't visit Bregenz" class="" width="" height="" /><figcaption>If you don't like clowns, don't visit Bregenz</figcaption></figure></p>
<p>Although the conference venue could have been better, I enjoyed the conference overall. Likely I would try to develop the format further. Single track is fine but given you have some of the leading minds of the industry in the same place, there could be room for more open sessions instead of a conference alone. Especially the outdoor activities seem to be the thing for WorkerConf and I hope they emphasize the aspect further.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://www.icloud.com/sharedalbum/#B0pGWZuqDGKqbRM">You can find my conference and hiking photos online</a></blockquote>Minima - To-do lists done right - Interview with Alex Fedoseevaminimatodolistsdonerightinterviewwithalexfedoseev2019-06-17t00:00:00z2019-06-17T00:00:00Z<p>If there's one thing that transformed my life, it's the adoption of the Getting Things Done (GTD) methodology. The key part for me was to begin what's to be done and then committing on doing it. I use OmniFocus and Google Keep for this and while it requires some discipline, it has definitely been worth it for me.</p>
<p><a href="https://twitter.com/alexfedoseev">Alex Fedoseev</a> has been developing a service, <strong>Minima</strong>, that achieves this online while aiming to provide functionality beyond personal usage. In this interview, we'll learn more about the solution and his technical approach for it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/4946bcea2b14546bd390883bfb2585fe?s=200"" alt="Alex Fedoseev" class="author" width="100" height="100" /><figcaption>Alex Fedoseev</figcaption></figure></p>
<p>I got into development pretty late, when I was 30 or 31. My original background has nothing in common with neither Computer Science (CS) nor User Experience (UX), but the latter hooked me up somehow, and it's still my main point of interest.</p>
<p>For the past three years, I've been a frontend engineer at <a href="https://www.shakacode.com/">ShakaCode</a>, and for the past seven years, I've been working on <a href="https://minima.app">Minima</a>.</p>
<p>My current tools of the trade are ReasonML and Rust.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-minima-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-minima-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Minima to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-minima-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Minima is a combination of personal task manager and project management solution for teams. But it’s not quite there yet. I kicked off MVP with the Personal Workspace only for now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-minima-work-" id="how-does-minima-work-"></a><span class="text">How does Minima work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-minima-work-">#</a></h2>
<p>For the users, Minima starts in the Personal Workspace—the place where they can manage their tasks: work, life, everything. In the future, they will be able to join Teams—one or many-to collaborate on projects.</p>
<p>App follows GTD principles, so if you are familiar with it, you should feel like home.</p>
<p>Here is the screenshot of the Project screen to give you a better idea:</p>
<p><figure><img src="/d2a78b27dc2669da39463fc9afd6f4ae.png" alt="Minima project screen" class="" width="" height="" /><figcaption>Minima project screen</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-minima-differ-from-other-solutions-" id="how-does-minima-differ-from-other-solutions-"></a><span class="text">How does Minima differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-minima-differ-from-other-solutions-">#</a></h2>
<p>Lacking personal space was my main concern for years with many solutions on the market. So one of the main goals is to provide private space for each team member, to make it genuine first-class part of the project management solution for teams.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-minima-" id="why-did-you-develop-minima-"></a><span class="text">Why did you develop Minima?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-minima-">#</a></h2>
<p>I was passionate about the whole project management thing but had zero experience in development (at that time, I was a project manager at marketing space). I was heavily inspired by <strong>Things</strong>—native personal task manager for macOS. It’s the best GTD implementation in software, in my opinion. And I would love to have something like this built into the team project management tool.</p>
<p>Once I shaped up my vision of the app, I could stay on the product side of things and search for investors. But I always had a stance that you can’t efficiently manage the area that you didn’t master yourself. So I decided that it’s time to learn something new.</p>
<p>At first, I was worried that someone is already addressing this problem. Mainly, because people use “This problem is already solved by X” argument quite often these days. But if you think about it, it’s silly to stop developing something you care about just because someone else is trying to solve the same problem.</p>
<p>Take the car industry, there are dozen of vendors out there, and they co-exist just fine because customers choose different products for different reasons: price, features, design, etc. I don’t see how it’s different from the software solutions.</p>
<p>Anyway, my only goal is to build a great product, not to win the race.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-technical-challenges-have-you-encountered-during-the-development-of-minima-so-far-" id="what-kind-of-technical-challenges-have-you-encountered-during-the-development-of-minima-so-far-"></a><span class="text">What kind of technical challenges have you encountered during the development of Minima so far?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-technical-challenges-have-you-encountered-during-the-development-of-minima-so-far-">#</a></h2>
<p>The hardest part of developing a side project is that you can’t do this full time. I spent few years in the loop: after the pause, I come back to the app, don’t remember where I am at, spending few hours per day try to continue with a complex feature, things get randomly broken here and there because I’m hardly in context, depression, pause, repeat.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#types-get-you-into-the-zone" id="types-get-you-into-the-zone"></a><span class="text">Types Get You Into the Zone</span><a class="header-anchor-select" href="https://survivejs.com/#types-get-you-into-the-zone">#</a></h3>
<p>I can’t stress enough about how types are helpful here. Even after weeks, it takes minutes to get into the zone because everything you do starts with the types and then compiler reminds you what it’s all about, immediately slaps you if you do something stupid and keeps you in context 100% of the time.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-platform-" id="the-platform-"></a><span class="text">The Platform™</span><a class="header-anchor-select" href="https://survivejs.com/#the-platform-">#</a></h3>
<p>The second pain point was The Platform™. One of my goals with Minima is to make the user experience as close as possible to the desktop apps. Neither platform nor npm didn’t help much here. Packages I tried either over-abstracted, or hard to bind to, or doesn’t do what I need in the way I need.</p>
<p>At some point, I stopped spending time on bindings and invested it in my solutions. At the time of writing, <code>quill</code> is the only UI related dependency used in production. Everything else—primitives, dialogs, focus/selection management—all internal implementations. It took time, but I mostly satisfied with the result, and owning your UI is a pleasure for many reasons.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#on-open-sourcing-and-focus" id="on-open-sourcing-and-focus"></a><span class="text">On Open Sourcing and Focus</span><a class="header-anchor-select" href="https://survivejs.com/#on-open-sourcing-and-focus">#</a></h3>
<p>Without a doubt, the most challenging UI part was drag-and-drop (and the most incomplete so far). One of my mistakes was that I open sourced it too early. Never do this. Implement internally → battle test in application context → abstract. Not the other way around.</p>
<p>As a result, I spent a lot of time implementing the functionality that was not critical at all and burned out. After some break, I pulled it back into the app, addressed app requirements, and moved on. It’s still far from perfect, but issues are localized and will be addressed along the way. I will open source it back, hopefully, soon.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#offline-support" id="offline-support"></a><span class="text">Offline Support</span><a class="header-anchor-select" href="https://survivejs.com/#offline-support">#</a></h3>
<p>The offline story is also tricky but brings a lot of benefits to the user. I use a combination of PouchDb + CouchDB for storing app data, the former is running in the worker thread, and almost all operations are optimistic and happen in the background, so main thread should be fast, responsive and spinner-free. Service workers are giving me a lot of pain, though, especially in Safari.</p>
<p>I have an excellent infra manager implemented in Rust but guess it’s already long enough.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The next big things in the pool are timed to-dos and mobile app. Lots of small/medium things. Once I feel comfortable with the app, I’ll finalize the pricing model.</p>
<p>In the background, I’m prototyping Team Workspaces; its implementation is going to be quite different from the Personal Workspace implementation on the tech side of things, so I need to thought out details here.</p>
<p>There is a <a href="https://minima.app/roadmap">Roadmap</a> section on the site with a more detailed list.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-minima-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-minima-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for Minima and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-minima-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Oh man, it’s all in flux. I was living on the bleeding edge for years, and I’m afraid of guessing what’s next.</p>
<p>The web platform is being used as an app platform for some time, but it’s not welcoming space in its current state, IMO. I’m glad that types are coming to the web though. Objectively, I wouldn’t get to this MVP unless I switched to Reason and Rust. These technologies were like nitro to my progress. I sincerely hope they will gain more adoption in the near future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<ul>
<li>Get a good starting point. If you target application development, something like OCaml/Reason, Elm, Rust, F#, Swift, etc. would work. I can’t imagine app development without sum types and pattern matching.</li>
<li>Find a mentor, if possible. Self-teaching is slow and sometimes depressing.</li>
<li>Learn to take breaks. If you tired and can’t grok something, it’s ok to let it go for some time.</li>
</ul>
<p>The above is the list of my mistakes haha.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Lots of great folks in the Reason community. Mentioning just few of them (in alphabetical order):</p>
<ul>
<li><a href="https://twitter.com/BlaineBublitz">BlaineBublitz</a> — Gulp lead and contributor to Reason eco-system</li>
<li><a href="https://twitter.com/bloodyowl">bloodyowl</a> — without his work, transition to the new <code>reason-react</code> would be significantly harder</li>
<li><a href="https://twitter.com/bryphe">bryphe</a> — author of <a href="https://github.com/onivim/oni2">Oni</a></li>
<li><a href="https://twitter.com/cknitt">cknit</a> — great contributor to the Reason eco-system and the author of the next version of <code>bs-react-intl</code></li>
<li><a href="https://twitter.com/DmytroGladkyi">DmytroGladkyi</a> — running <a href="http://www.reasonml.online">reasonml.online</a></li>
<li><a href="https://twitter.com/leostera">leostera</a> — I heard he likes streaming & actors :)</li>
<li><a href="https://twitter.com/MoOx/">MoOx</a> — maintainer of <code>reason-react-native</code></li>
<li><a href="https://twitter.com/Sander_Spies">Sander_Spies</a> — WASM hope of OCaml community</li>
<li><a href="https://twitter.com/thangngoc89">thangngoc89</a> — author of <a href="http://sketch.sh">sketch.sh</a></li>
<li><a href="https://twitter.com/UlrikStrid">UlrikStrid</a> — doing magic things with Reason native infra</li>
<li><a href="https://twitter.com/wokalski">wokalski</a> & <a href="https://twitter.com/rauanmayemir">rauanmayemir</a> — folks behind <a href="https://github.com/briskml/brisk">Brisk</a></li>
<li><a href="https://twitter.com/yawaramin">yawaramin</a> — doing exceptional work on educating Reason community</li>
</ul>
<p>There are a lot more on the list, but I needed to stop at some point, right?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you find Minima interesting, there are few places, where I’ll be happy to answer questions or help with the problems:</p>
<ul>
<li><a href="https://join.slack.com/t/MinimaHQ/shared_invite/enQtNjM2OTMzNDI3MjM2LTkzOGU2M2M4NDMyZmIzZWFmNDg2OTNkNWFmMzMyNmU4ZDRhNDlhZTk5ZjYzY2U5MzJlZDI3ZmNkNTJhMzRiZTE">Slack</a></li>
<li><a href="https://twitter.com/MinimaHQ">Twitter</a></li>
<li><a href="https://github.com/MinimaHQ/minima.app">Github</a></li>
<li><a href="https://facebook.com/MinimaHQ">Facebook</a></li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Alex! It's great to see when someone decides to push for their idea even if it means working a lot and expanding your set of skills. For me, Minima is a project to keep an eye on. If you want to get into GTD flow on the web, it's definitely worth a look!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To get started, <a href="https://minima.app">check Minima online</a> you can also <a href="https://github.com/MinimaHQ">find parts of the project on Github</a>.</blockquote>Reakit - Build accessible rich web apps with React - Interview with Diego Hazareakitbuildaccessiblerichwebappswithreactinterviewwithdiegohaz2019-06-10t00:00:00z2019-06-10T00:00:00Z<p>When building web applications and sites using React, you have to think carefully about the user interface. You might either go with an established user interface library, develop your own, or try a bit of both.</p>
<p>One of the aspects that often is forgotten in UI design is accessibility - how can you make sure as many people as possible are able to use your creation? That is where using a user interface library that's accessible out of the box can come in handy.</p>
<p>To learn more about such an option, I am interviewing <a href="https://twitter.com/diegohaz">Diego Haz</a>, the creator of <a href="https://reakit.io">Reakit</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/e0675d18aada9669f5db696e50f2f0d0?s=200" alt="Diego Haz" class="author" width="100" height="100" /><figcaption>Diego Haz</figcaption></figure></p>
<p>My name is Diego Haz. I'm 29, and I've been programming for about 17 years. I started building Open Source Software (OSS) four years ago.</p>
<p>I often say I don't like to code. I want to build things for humans and to impact their lives positively. Code is just the way I found to do that. I could be a dancer, but I'm terrible at dancing, so it's code. 😄</p>
<p>OSS is fantastic for achieving this. I can build one solution so many humans (developers) can use it to create many other solutions for even more humans.</p>
<p>Besides that, I'm married to <a href="https://twitter.com/gracekrodrigues">Grace Kelly</a> with a five years old stepson. I'm autistic (Asperger), I love astronomy, and I hope someday I'll help solve hunger in the world by automating all the processes from the production of the food to its distribution. Automation is the key.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_reakit_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_reakit_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Reakit</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_reakit_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://reakit.io">Reakit</a> is a low-level component library for building accessible high-level UI libraries, design systems, and applications with React. It provides components like <a href="https://reakit.io/docs/dialog/"><code>Dialog</code></a>, <a href="https://reakit.io/docs/menu/"><code>Menu</code></a>, <a href="https://reakit.io/docs/tab/"><code>Tab</code></a>, <a href="https://reakit.io/docs/tooltip/"><code>Tooltip</code></a>, <a href="https://reakit.io/docs/form/"><code>Form</code></a>, among others that <a href="https://reakit.io/docs/accessibility/">follow all the WAI-ARIA recommendations</a>.</p>
<p>You could design a dialog using <em>Reakit</em> as below:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span>
useDialogState<span class="token punctuation" >,</span>
Dialog<span class="token punctuation" >,</span>
DialogDisclosure<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit/Dialog"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >MyDialog</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// dialog exposes `visible` state and</span>
<span class="token comment" spellcheck="true" >// methods like `show`, `hide` and `toggle`</span>
<span class="token keyword keyword-const" >const</span> dialog <span class="token operator" >=</span> <span class="token function" >useDialogState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span><span class="token operator" >></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>DialogDisclosure</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >dialog</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
Open dialog
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>DialogDisclosure</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Dialog</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >dialog</span><span class="token punctuation brackets-braces" >}</span></span> <span class="token attr-name" >aria-label</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Welcome<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
Welcome to Reakit
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Dialog</span><span class="token punctuation" >></span></span>
<span class="token operator" ><</span><span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>If accessibility matters to you (and there's only one correct answer to this), you should use <em>Reakit</em> components as your foundation.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://codesandbox.io/s/m4n32vjkoj">You can play with the example on CodeSandbox</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_reakit_-work-" id="how-does-_reakit_-work-"></a><span class="text">How does <em>Reakit</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_reakit_-work-">#</a></h2>
<p>You can install <em>Reakit</em> through <code>npm</code>:</p>
<pre><code class="lang-bash"><span class="token function" >npm</span> <span class="token function" >install</span> reakit
</code></pre>
<p>And then, use it like this:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> ReactDOM <span class="token keyword keyword-from" >from</span> <span class="token string" >"react-dom"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Button <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit/Button"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >App</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Button</span><span class="token punctuation" >></span></span>Button<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Button</span><span class="token punctuation" >></span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>App</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> document<span class="token punctuation" >.</span><span class="token function" >getElementById</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"root"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Components can be imported directly from <code>reakit</code> or using separate paths like <code>reakit/Button</code>. The latter is preferred if your bundler doesn't support <a href="https://reakit.io/docs/bundle-size/#tree-shaking">tree shaking</a>.</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Button <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Button <span class="token keyword keyword-as" >as</span> Button2 <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit/Button"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>Button <span class="token operator" >===</span> Button2<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"They point to the same file"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you use Babel, you can rewrite the imports using <a href="https://www.npmjs.com/package/babel-plugin-transform-imports">babel-plugin-transform-imports</a>. This way you can use <code>import { Button } from "reakit";</code> while gaining tree shaking. The idea works with other packages too.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#components" id="components"></a><span class="text">Components</span><a class="header-anchor-select" href="https://survivejs.com/#components">#</a></h3>
<p>The highest level API (which is still low level for most use cases) of <em>Reakit</em> exports React components. They receive two kinds of props: <strong>options</strong> and <strong>HTML props</strong>.</p>
<p>Options are just custom props that don't get rendered into the DOM. They affect internal component behavior and translate to actual HTML attributes:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Hidden <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit/Hidden"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// `visible` is an option</span>
<span class="token comment" spellcheck="true" >// `className` is an HTML prop</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Hidden</span> <span class="token attr-name" >visible</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>class<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
</code></pre>
<p>Besides that, all components can be augmented with the <a href="https://reakit.io/docs/composition/#as-prop"><code>as</code> prop</a> and <a href="https://reakit.io/docs/composition/#render-props">render props</a>.</p>
<pre><code class="lang-jsx"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Hidden</span> <span class="token attr-name" >as</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Hidden</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span>hiddenProps <span class="token operator" >=></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >hiddenProps</span><span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Hidden</span><span class="token punctuation" >></span></span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#state-hooks" id="state-hooks"></a><span class="text">State hooks</span><a class="header-anchor-select" href="https://survivejs.com/#state-hooks">#</a></h3>
<p><em>Reakit</em> provides state hooks out of the box and you can also plug in your own. They receive some options as the initial state and return options needed by their respective components:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> useHiddenState<span class="token punctuation" >,</span> Hidden <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit/Hidden"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >Example</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// exposes `visible` state and</span>
<span class="token comment" spellcheck="true" >// methods like `show`, `hide` and `toggle`</span>
<span class="token keyword keyword-const" >const</span> hidden <span class="token operator" >=</span> <span class="token function" >useHiddenState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> visible<span class="token punctuation" >:</span> <span class="token boolean" >true</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span><span class="token operator" >></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>hidden<span class="token punctuation" >.</span>toggle<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>Disclosure<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Hidden</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >hidden</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>Hidden<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Hidden</span><span class="token punctuation" >></span></span>
<span class="token operator" ><</span><span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#props-hooks" id="props-hooks"></a><span class="text">Props hooks</span><a class="header-anchor-select" href="https://survivejs.com/#props-hooks">#</a></h3>
<p>As the <strong>lowest level</strong> API, <em>Reakit</em> exposes props hooks. These hooks hold most of the logic behind components and are used heavily within <em>Reakit</em>'s source code as a means to compose behaviors without the hassle of polluting the tree with multiple components. For example, <a href="https://reakit.io/docs/dialog/"><code>Dialog</code></a> uses <a href="https://reakit.io/docs/hidden/"><code>Hidden</code></a>, which in turn uses <a href="https://reakit.io/docs/box/"><code>Box</code></a>:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span>
useHiddenState<span class="token punctuation" >,</span>
useHidden<span class="token punctuation" >,</span>
useHiddenDisclosure<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit/Hidden"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >Example</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> state <span class="token operator" >=</span> <span class="token function" >useHiddenState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> visible<span class="token punctuation" >:</span> <span class="token boolean" >true</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> props <span class="token operator" >=</span> <span class="token function" >useHidden</span><span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> disclosureProps <span class="token operator" >=</span> <span class="token function" >useHiddenDisclosure</span><span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span><span class="token operator" >></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >disclosureProps</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>Disclosure<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >props</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>Hidden<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token operator" ><</span><span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling" id="styling"></a><span class="text">Styling</span><a class="header-anchor-select" href="https://survivejs.com/#styling">#</a></h3>
<p><em>Reakit</em> doesn't depend on any CSS library and components are without styling by default. You're free to use whatever approach you want. Each component returns a single HTML element that accepts all HTML props, including <code>className</code> and <code>style</code>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://reakit.io/docs/styling/">Learn more about styling</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_reakit_-differ-from-other-solutions-" id="how-does-_reakit_-differ-from-other-solutions-"></a><span class="text">How does <em>Reakit</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_reakit_-differ-from-other-solutions-">#</a></h2>
<p>The main difference is that it's entirely focused on accessibility. It's also low level enough so other solutions (like <strong>Material UI</strong>, <strong>Ant Design</strong>, <strong>Semantic UI React</strong>, etc.) could use it underneath.</p>
<p>A similar library that also focuses on accessibility is <a href="https://ui.reach.tech">Reach UI</a> by <a href="https://twitter.com/ryanflorence">Ryan Florence</a>. It is a fantastic library, but the design choices make it harder to compose and customize. A good example of this is the use of implicit React Context.</p>
<p>I prefer to give specific pieces so users can build new things without being tied to my design choices. They have more control over what they're making. You can always go from explicit to implicit (for example, you can build a React Context component API using <em>Reakit</em> API). But the other way around is hard.</p>
<p>Here's an example of a high level <a href="https://reakit.io/docs/tooltip/"><code>Tooltip</code></a> API built upon the low level <em>Reakit</em> API:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span>
Tooltip <span class="token keyword keyword-as" >as</span> BaseTooltip<span class="token punctuation" >,</span>
TooltipReference<span class="token punctuation" >,</span>
useTooltipState<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"reakit"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >App</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Tooltip</span> <span class="token attr-name" >title</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Tooltip<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span><span class="token punctuation" >></span></span>Reference<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Tooltip</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >Tooltip</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> children<span class="token punctuation" >,</span> title<span class="token punctuation" >,</span> <span class="token operator" >...</span>props <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> tooltip <span class="token operator" >=</span> <span class="token function" >useTooltipState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span><span class="token operator" >></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>TooltipReference</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >tooltip</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span>referenceProps<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
React<span class="token punctuation" >.</span><span class="token function" >cloneElement</span><span class="token punctuation brackets-parentheses" >(</span>
React<span class="token punctuation" >.</span>Children<span class="token punctuation" >.</span><span class="token function" >only</span><span class="token punctuation brackets-parentheses" >(</span>children<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
referenceProps
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>TooltipReference</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>BaseTooltip</span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >tooltip</span><span class="token punctuation brackets-braces" >}</span></span> <span class="token spread" ><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >...</span><span class="token attr-value" >props</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >{</span>title<span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>BaseTooltip</span><span class="token punctuation" >></span></span>
<span class="token operator" ><</span><span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>If you want something composable and low level, you should choose <em>Reakit</em>. If you're looking for something already abstracted, with less boilerplate, easier to use, and with restrictions that make it harder to make mistakes, I recommend Reach UI.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_reakit_-" id="why-did-you-develop-_reakit_-"></a><span class="text">Why did you develop <em>Reakit</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_reakit_-">#</a></h2>
<p>I started building <em>Reakit</em> in 2017 to ease my team's job as we were creating most of our components from scratch, and they weren't accessible at all.</p>
<p>As an autistic person, I don't have any disability that makes the web inaccessible to me. But I do have disabilities that cause a part of the world to be unavailable to me. I know how it feels not to be able to do what most people do. And this motivates me even more to work on Reakit.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm currently talking with a few companies so I can work with them and possibly use <em>Reakit</em> on real-world projects. Doing this will help me find real use cases and improve the library.</p>
<p>Once v1.0 gets out of beta, I'll start building some paid products and services around it. The goal is to make <em>Reakit</em> self-sustainable, with, at least, one developer dedicated to it full-time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_reakit_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_reakit_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Reakit</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_reakit_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In 20 to 30 years, I believe that websites — and software in general — will not be made by humans anymore. Companies will upload their business requirements and their audience data into an AI, which, after testing infinite versions of the software with unlimited versions of simulated people, will respond with the best ready-to-use application based on the available data.</p>
<p>Code and design will be fully automated. After all, there's no subjectiveness on this: the version which better performs is usually the best version.</p>
<p>It's hard to see now, but <em>Reakit</em> and all the products I'm planning to build around it are my first step into this direction.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Learn to learn. Web development and front-end development specifically are evolving fast, and knowing how to learn things is the best ability one can have. Get used to watching videos in 2x speed (or quicker), learn how to search effectively, etc.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://twitter.com/pedronauck">Pedro Nauck</a> - Creator of <a href="https://www.docz.site/">Docz</a></li>
<li><a href="https://twitter.com/brunolemos">Bruno Lemos</a> - Creator of <a href="https://devhubapp.com/">DevHub</a></li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Don't forget to <a href="https://opencollective.com/reakit">support us on Open Collective</a>. ❤️</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Diego! I think Reakit hits a good balance between providing functionality while letting developers to customize it to their own use cases.</p>
<p>The greatest benefit of the approach is that it allows people to bootstrap their own UI libraries without having to develop everything from scratch while gaining functionality and avoiding some of the maintenance cost.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about the project, <a href="https://reakit.io">take a look at Reakit website</a> and <a href="https://github.com/reakit/reakit">star Reakit on GitHub</a>.</blockquote>Benefit - utility CSS library - Interview with Chad Donohueabenefitutilitycsslibraryinterviewwithchaddonohue2019-06-03t00:00:00z2019-06-03T00:00:00Z<p>One of the developments that has began to change the way we style our applications and sites is the introduction of utility classes. <a href="https://tailwindcss.com">Tailwind</a> is an example of a popular framework that has adopted the approach.</p>
<p>To learn more about the approach, I am interviewing <a href="https://twitter.com/chaddonohue">Chad Donohue</a> about his library called <em>Benefit</em>. It's designed particularly React developers in mind and makes Tailwind a perfect fit with React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/4d096a44b3a989fa2dfb75ea9b989730?s=200" alt="Chad Donohue" class="author" width="100" height="100" /><figcaption>Chad Donohue</figcaption></figure></p>
<p>My name is Chad Donohue. I enjoy creating user experiences and talking about design systems. I've written computer software as a Full Stack Engineer for a little over ten years. When I'm not in front of a computer screen, I spend time with my beautiful wife and three amazing kids.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_benefit_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_benefit_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>benefit</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_benefit_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/cdonohue/benefit">benefit</a> is a <a href="https://tailwindcss.com">Tailwind</a>-compatible utility CSS library powered by <a href="https://emotion.sh/docs/introduction"><em>emotion</em></a>. It is framework agnostic, has a file size of <code>5kB</code>, and it <strong>only ships the CSS styles that you use</strong>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_benefit_-work-" id="how-does-_benefit_-work-"></a><span class="text">How does <em>benefit</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_benefit_-work-">#</a></h2>
<p>Here we have a <code>Button</code> component:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Button</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span><span class="token punctuation" >></span></span>Click Me<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>We'll add a few lines to include <em>benefit</em> and add some <a href="https://tailwindcss.com">Tailwind</a> class names:</p>
<pre><code class="lang-jsx"><span class="token comment" spellcheck="true" >/** @jsx jsx */</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> jsx <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"benefit/react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Button</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span>
<span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>
px-8
py-2
bg-blue-600
text-white
font-bold
tracking-wide
uppercase
rounded-full
border-2
border-blue-700
shadow-lg<span class="token punctuation" >"</span></span>
<span class="token punctuation" >></span></span>
Click Me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>By adding two lines and some additional class names, we have accomplished two things:</p>
<ul>
<li>We now have the power to style with all available utility classes (<code>~10,000</code>) at just a <code>5kB</code> inclusion cost</li>
<li>Only the styles associated with those class names were added, <strong>which happens only to be <code>~350 bytes</code></strong></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>Check out this <a href="https://codesandbox.io/s/small-wildflower-ckbhj">CodeSandbox</a> to explore this example more.</blockquote><p>At the point of inclusion within your project, <em>benefit</em> takes its default configuration (or your own if you need to <a href="https://benefit.netlify.com/customization/overview">customize it</a>), then it generates CSS declarations in memory.</p>
<p>As you use these generated class names in your markup, the styles are looked up in <em>benefit</em>'s cache, auto prefixed, and injected into the document.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_benefit_-differ-from-other-solutions-" id="how-does-_benefit_-differ-from-other-solutions-"></a><span class="text">How does <em>benefit</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_benefit_-differ-from-other-solutions-">#</a></h2>
<p>On the client, <em>benefit</em> generates and injects styles for class names only when they are used. On the server, <em>benefit</em> pairs with <em>emotion</em>’s built-in SSR support and inlines CSS with the markup.</p>
<p>Since <em>benefit</em> is powered by <em>emotion</em> in both scenarios, you also can tap into the power that it provides, like nested declarations and deterministic style composition.</p>
<p>Also, being framework agnostic, <em>benefit</em> can be used alongside any JS framework. It can be introduced at the component level or at the root of an application. And, dead-style elimination is built-in.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_benefit_-" id="why-did-you-develop-_benefit_-"></a><span class="text">Why did you develop <em>benefit</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_benefit_-">#</a></h2>
<p>I help build and ship 3rd party components. It is for sure an edge-case, but it brought on problems to solve for:</p>
<ul>
<li>[x] <strong>Style isolation</strong> - We needed the ability to normalize values (<code>margin</code>, <code>padding</code>, etc.) and sandbox the elements that made up our shipped components and not have to duplicate those normalized styles with every new component.</li>
<li>[x] <strong>Dynamic branding</strong> - When our components are requested, we need to support different branding colors and typefaces, which means we are responsible for generating design system rules based on several incoming variables.</li>
<li>[x] <strong>Rapid prototyping</strong> - Once these design system rules are decided, we need them to be reused throughout our component library.</li>
<li>[x] <strong>No extra build step to generate styles</strong> - Since every request is different, we need to ship a runtime that is small and can handle dynamic style injection. Also, we need only to inject what we use.</li>
</ul>
<p><em>benefit</em> started as an internal idea to solve these issues and has been through a few iterations. As it matured a bit more, we began to see how this could be a solution for both isolated components and full-blown sites alike.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We are working to remove the runtime altogether for SSR. Soon, we'll have some examples put together for how this would work with something like <a href="https://nextjs.org/">Next.js</a>.</p>
<p>We're also working on the way to generate custom documentation based on a configuration. So, it will be easy to share visually what different <em>benefit</em> configurations look and behave.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_benefit_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_benefit_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>benefit</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_benefit_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>As digital experiences increase in complexity, we have more of a responsibility as makers to take a look at what we are shipping to the end user. In the future, I see this getting better through the use of code-splitting and rendering on the server before shipping to the browser.</p>
<p>The use of utility classes for styling will continue to gain popularity thanks to the great work over at <a href="https://tailwindcss.com">Tailwind</a>. Utility classes are a great pattern that DRYs up a lot of the view layer. I'm not saying that every page/application will <em>only</em> have utility classes, but the individual one-off styling needs will go down considerably.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/">CSS Utility Classes and "Separation of Concerns"</a> by Adam Wathan is an excellent read that talks about some of the benefits to be gained from styling with utility classes.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Make it a goal to learn something new every day and share your knowledge with others. This industry moves fast, and it helps tremendously to be able to step out of your comfort zone often.</p>
<p>It is a gratifying profession that allows you to produce your best work while simultaneously learning something.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://twitter.com/andybelldesign">Andy Bell</a> creates excellent experiences with simple, solid foundations. I'm always impressed with his work and his fondness for progressive enhancement.</li>
<li><a href="https://twitter.com/sarah_edo">Sarah Drasner</a> can always find an untapped topic and find a way to share it with everyone while also making it easier to understand. Her contributions to open source and teaching make this community so special.</li>
<li><a href="https://twitter.com/@ericclemmons">Eric Clemmons</a> has been a mentor to me for some time now. I think people could learn tremendously from the viewpoints that he provides around developer experiences and building remote teams.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for your time and interest! I've enjoyed sharing my thoughts here and am always around on <a href="https://twitter.com/chaddonohue">Twitter</a> and <a href="https://github.com/cdonohue">GitHub</a>. Ask me anything 😄!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Chad! I can immediately see how adopting the utility class approach would help my in my daily development and I might have a project in mind that's a perfect fit for it!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about <em>benefit</em>, <a href="https://benefit.netlify.com">check out the homepage for more examples</a> and <a href="https://github.com/cdonohue/benefit">star the project on GitHub</a>.</blockquote>Webpack UI - Configure webpack with a UI - Interview with Even Stensbergawebpackuiconfigurewebpackwithauiinterviewwithevenstensberg2019-05-31t00:00:00z2019-05-31T00:00:00Z<p>Webpack is infamous for being a bundler that's not entirely easy to configure. That's one of the main reasons why I wrote <a href="https://survivejs.com/webpack/">the webpack book available on this site</a>. To be fair, webpack doesn't require as much configuration as it did before.</p>
<p>To overcome this issue, <a href="https://twitter.com/evenstensberg">Even Stensberg</a> and a group of developers are currently creating a user interface for webpack. In this post, you'll get an idea of what the tool will be like and the early preview version will be available in August 2019.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/d3ea7aa5a396a20d3edc63f1abb99005.jpg" alt="Even Stensberg" class="author" width="100" height="100" /><figcaption>Even Stensberg</figcaption></figure></p>
<p>Growing up playing World of Warcraft, I initially wanted to make games that I created myself. I was fortunate as a kid, and I'm thankful for growing up in Norway for that. I got a Packard Bell Computer early on, around the age of six, but the internet we had was too slow to do anything meaningful except gaming on high latency.</p>
<p>At that age, I spent a lot of time learning English and read fluently when starting school because I had been playing WoW for about three years (sorry mom). The experience came handy when I was tipped to check out C++ by my uncle in 5th grade. I went to the local library and got hooked immediately.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#serious-programming-starting-from-high-school" id="serious-programming-starting-from-high-school"></a><span class="text">Serious Programming Starting from High School</span><a class="header-anchor-select" href="https://survivejs.com/#serious-programming-starting-from-high-school">#</a></h3>
<p>Professionally, I didn't start doing serious programming until high school when I wanted to create a mobile app. By then I had taken a lot of courses in Computer Science, but I didn't know a language fully. I ended up developing in JavaScript using Meteor to cross-compile the application to different platforms and figured out that React was a better starting point.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#0cjs" id="0cjs"></a><span class="text">0CJS</span><a class="header-anchor-select" href="https://survivejs.com/#0cjs">#</a></h3>
<p>Before starting to develop anything, I had to set up configurations, and it took me one month to set up my initial webpack build that compiled a simple Hello World website. After becoming fluent in front-end I figured out that no one should use that much time on tooling, so I began making an automation library to automate this, now commonly known as 0CJS.</p>
<p>I was lucky, Sean Larkin from Microsoft reach out to me about improving webpack, so I got the opportunity to implement this in webpack itself, which was great. It turns out that Google also was interested in this, so I got a gig to continue to improve webpack-cli for Progressive Web Applications, performance and to make it easier for new users to use the tool.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-cli" id="webpack-cli"></a><span class="text">webpack-cli</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-cli">#</a></h3>
<p>Since then, I've been actively maintaining webpack-cli, and we're releasing the final piece of the puzzle that we have been working on for a few years. I'm excited about this. The team has put a lot of effort making this happen over a long period of time, and we have many contributors that I can't all thank at once, but I want to thank everyone involved in making this happen.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_webpack-ui_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_webpack-ui_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Webpack UI</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_webpack-ui_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><figure><img src="/694f06de184c2ebc301cb38bd7060ddf.jpg" alt="New project" class="" width="" height="" /><figcaption>New project</figcaption></figure></p>
<p><em>Webpack UI</em> is like creating a new game on Pokemon. You create a game, choose your desired player and Pokemon, then you are all set to explore.</p>
<p>With webpack UI, you can import a project (game) or create a new one, choose your preferred libraries (player) and additional utilities; then you are all set to begin developing.</p>
<p>The tool is intended to make webpack easier to use by having a Graphical User Interface for webpack and thereby making it easier to understand how to configure your project and get started more quickly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-will-_webpack-ui_-work-" id="how-will-_webpack-ui_-work-"></a><span class="text">How will <em>Webpack UI</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-will-_webpack-ui_-work-">#</a></h2>
<p><figure><img src="/1f0dcffd0ecc0c4134d19bdf93dd38ab.jpg" alt="Dashboard" class="" width="" height="" /><figcaption>Dashboard</figcaption></figure></p>
<p>It's nice that you asked, cause I've been thinking about making it as easy for users as possible for some time. As a developer, most developers are known with how the terminal works. You will need to run a command like <code>webpack ui</code> and then a local server will open on your machine and start the application. From there, you will enter the dashboard, where you will have the opportunity to create a new front end application or to import an existing project.</p>
<p>After doing so, you can compile a web application, add more things to your application such as offline support, other file formats, or analyze your project for performance issues. The team has a lot in mind, but we need to implement features gradually because we are an Open Source Organization, and we develop this tool in our spare time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-will-_webpack-ui_-differ-from-other-solutions-" id="how-will-_webpack-ui_-differ-from-other-solutions-"></a><span class="text">How will <em>Webpack UI</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-will-_webpack-ui_-differ-from-other-solutions-">#</a></h2>
<p><figure><img src="/951b9b975aa3aba05f19f46e0df4c1a7.jpg" alt="Starter packs" class="" width="" height="" /><figcaption>Starter packs</figcaption></figure></p>
<p>There aren't so many features as <em>Webpack UI</em> because this trend of Graphical User Interfaces for libraries have just started, even though there are some. <em>Webpack UI</em> is much alike Vue UI, but it is different in many ways.</p>
<p>This tool is intended to enrich an already cumbersome process of configuration files, and Vue doesn't have that. We have a Vue member helping out in webpack-cli with this project, and I'm glad that there are so many people that want to dedicate their time to develop this tool.</p>
<p>For instance, with <em>Webpack UI</em>, you will have a full overview of a project, and you will be able to implement new features rapidly. As a developer, you will have the chance to view compilation stats, add libraries, measure performance, and learn about webpack without having to use a lot of time in the terminal.</p>
<p>Most developers would argue that GUI's are bad because they slow down productivity, but we have figured that with webpack this isn't the case. Webpack is a tool that is hard to get a complete understanding off, and in particular new users get affected by this. We want to make the web better by providing a good baseline for developers to start building from.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-are-you-developing-_webpack-ui_-" id="why-are-you-developing-_webpack-ui_-"></a><span class="text">Why are you developing <em>Webpack UI</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-are-you-developing-_webpack-ui_-">#</a></h2>
<p><figure><img src="/2cb077e8ab1e4862f2af7a1ab5813811.jpg" alt="Scaffolds" class="" width="" height="" /><figcaption>Scaffolds</figcaption></figure></p>
<p>The end game of <em>Webpack UI</em> and what the team has been working on for so long is that developers have a lot of power adjusting advanced webpack configurations and front end projects, but still has a solid foundation to start from.</p>
<p>Performance is a vast field in web development, mostly because this was recently being invested in. It is hard for new users to start with webpack, and that is what we are tackling here.</p>
<p>After releasing <em>Webpack UI</em>, new users would be able to start developing front-end applications with no prior experience, which is suitable for educating new developers in the industry. We will see that reasonable defaults are set by default (by webpack), which allows applications to have the right performance metrics and clean project infrastructure.</p>
<p><strong>To condense</strong>: The hurdle of using webpack is going to be removed.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p><em>Webpack UI</em> is the last thing we are adding interface-wise to webpack for a while. After this project is done, we are focused on proper documentation with examples and tutorials and to help developers with any problems they might have using the tool.</p>
<p>When a project is in maintenance mode, it is often a good sign, because we are not adding any new features and we are focused on having a project that works well without having to explain how it works. If we can make users use webpack without having to tell them what it is, we have done a great job.</p>
<p>That is a double-edged sword because we want people to know how webpack works so that they can understand how web development works. First of all, we want to make webpack better to use without having to study it for weeks.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_webpack-ui_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_webpack-ui_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Webpack UI</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_webpack-ui_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The future of this looks bright. We've seen people quite happy with how Vue turned out and we expect the same for <em>Webpack UI</em>. In general, I'd like to emphasize that we will see more tools going to adjust to a 0CJS notion, which means that users will only have to install the tool to benefit from it. GUI tools and 0CJS have been a positive experience for a lot of people, so I expect nothing less in 2019 and beyond.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>My advice is to use sandboxes and boilerplates a lot at the start. When you are confident in the language, you will be better prepared for a whole front-end environment with Docker, webpack, SASS, and everything that comes between actually creating a web application. We are doing a lot of things to make this easier in 2019 with webpack, but an understanding of the platform is the best way to get into web development.</p>
<p>Above means that you are creating web applications in the old JavaScript format with a single html file, by adding styles in CSS and having fun. After being comfortable with this, one could start beginning to look at boilerplates and guides on how to configure a modern web application.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I advise you to interview someone from Vue.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Sure! The early preview version will be available in August 2019 and the aim is to launch a new look for webpack-cli as well. We have high hopes that what we are soon about to release will positively help developers with their work and projects. We are actively looking for contributors, so feel free to send me a message if you are interested in helping out with any of this!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Even! It will be exciting to try out <em>Webpack UI</em> once there's a preview version to play with so I can't await for a public release. The UI combined with the goodies included in webpack 5 should bring bundling to a new level.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://github.com/rishabh3112/webpack-ui">You can check out the initial UI and provide feedback on it already.</a></blockquote>ReasonML - Type safety with ease - Interview with Gabriel Rubensareasonmltypesafetywitheaseinterviewwithgabrielrubens2019-05-27t00:00:00z2019-05-27T00:00:00Z<p>I've had the chance to observe the evolution of the <a href="https://reasonml.github.io">ReasonML</a> ecosystem up close. For me, it seems to solve many pain points of the current JavaScript/TypeScript based web ecosystem by addressing many of the issues in the language itself.</p>
<p>To understand more, I am interviewing <a href="https://twitter.com/fakenickels">Gabriel Rubens</a>. His company has been using ReasonML in production for a while now, so I am curious to learn how it has worked out for them.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about ReasonML, I recommend checking out <a href="https://www.reason-conf.com">ReasonConf</a>. It's the first conference held on the topic, and it will be back in 2020! You should <a href="https://www.youtube.com/c/ReasonConf">check out the conference videos online</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/2e9578e52f4be90c650cda47b5557c08.jpg" alt="Gabriel Rubens" class="author" width="100" height="100" /><figcaption>Gabriel Rubens</figcaption></figure></p>
<p>I'm co-founder and Head of Tech at Astrocoders. We're a lean and fast software company focused mostly on everything related to financial, tax, and banking applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_reasonml_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_reasonml_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>ReasonML</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_reasonml_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Try to picture how React would be with ECMAScript 2077. That's <a href="https://reasonml.github.io/reason-react/">ReasonReact</a>.</p>
<p>I genuinely believe ReasonML is the future for JavaScript developers wanting a more robust and safe language. For me, the four of the essential features of the language, that changed the way I code for the better, are:</p>
<ul>
<li>Incredible type system</li>
<li>Exhaustive pattern-matching</li>
<li>Algebraic Data Types (ADTs) and variants</li>
<li>Generalized Algebraic Data Types (GADTs)</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#adts-and-gadts" id="adts-and-gadts"></a><span class="text">ADTs and GADTs</span><a class="header-anchor-select" href="https://survivejs.com/#adts-and-gadts">#</a></h3>
<p>ADT is a data type in ReasonML which allows you to specify what are the possible ramifications of a value carrying that type in the program. The approach is complementary to the pattern matching.</p>
<p>Consider the example below:</p>
<pre><code class="lang-clike">type person <span class="token operator" >=</span> <span class="token operator" >|</span> <span class="token function" >Teacher</span><span class="token punctuation brackets-parentheses" >(</span>string<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >|</span> <span class="token function" >Student</span><span class="token punctuation brackets-parentheses" >(</span>string<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >/*
** The most interesting part of this is that Reason can infer correctly
** the type of the argument `person` based on the pattern matching
** usage of it and that as you declared in `type person` the compiler
** will ensure you cover all the possibles cases. If you forget one
** it'll tell you which one you missed.
*/</span>
let sayHello <span class="token operator" >=</span> person <span class="token operator" >=</span><span class="token operator" >></span>
<span class="token function" >switch</span><span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token operator" >|</span> <span class="token function" >Student</span><span class="token punctuation brackets-parentheses" >(</span>name<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >"Hello, "</span> <span class="token operator" >++</span> name
<span class="token operator" >|</span> <span class="token function" >Teacher</span><span class="token punctuation brackets-parentheses" >(</span>name<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >"Hello, professor "</span> <span class="token operator" >++</span> name
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >/*
** This is why "nullables" are not necessary for Reason. The presence
** or not of value can be encoded with an ADT/variant, and Reason
** already brings a built-in type for this called `option('a)`.
*/</span>
let studentName<span class="token punctuation" >:</span> <span class="token function" >option</span><span class="token punctuation brackets-parentheses" >(</span>string<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span> <span class="token function" >Some</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Nicole"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >switch</span><span class="token punctuation brackets-parentheses" >(</span>studentName<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token operator" >|</span> <span class="token function" >Some</span><span class="token punctuation brackets-parentheses" >(</span>name<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >"Hello, "</span> <span class="token operator" >++</span> name
<span class="token operator" >|</span> None <span class="token operator" >=</span><span class="token operator" >></span> <span class="token string" >"No one to greet"</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>The above is extremely powerful as you can rely upon that the compiler will ensure all cases are covered. <a href="https://reasonml.github.io/docs/en/variant#design-decisions">According to the Reason documentation</a>:</p>
<blockquote>
<p>Philosophically speaking, a problem is composed of many possible branches/conditions. Mishandling these conditions is the majority of what we call bugs. A type system doesn't magically eliminate bugs; it points out the unhandled conditions and asks you to cover them.</p>
</blockquote>
<p>The best thing is that this style of programming is 100% idiomatic in ReasonML, you can't translate this very well to JS or TS as they weren't built for this. You can, of course, try to keep the same idea but won't be quite the same thing.</p>
<p><strong>JavaScript:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> person <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"student"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Steven"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >sayHello</span> <span class="token operator" >=</span> person <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation" >.</span>type<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >"student"</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`Hello, </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>person<span class="token punctuation" >.</span>name<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >"teacher"</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`Hello, professor </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>person<span class="token punctuation" >.</span>name<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// There's probably a potential bug here without a `default` clause</span>
<span class="token comment" spellcheck="true" >// as we can't ensure person.type will be always those two</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>TypeScript:</strong></p>
<pre><code class="lang-typescript"><span class="token keyword keyword-type" >type</span> personType <span class="token operator" >=</span> <span class="token string" >"student"</span> <span class="token operator" >|</span> <span class="token string" >"teacher"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-interface" >interface</span> <span class="token class-name" >Person</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-type" >type</span><span class="token punctuation" >:</span> personType<span class="token punctuation" >;</span>
name<span class="token punctuation" >:</span> <span class="token keyword keyword-string" >string</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> person<span class="token punctuation" >:</span> Person <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> <span class="token keyword keyword-type" >type</span><span class="token punctuation" >:</span> <span class="token string" >"student"</span><span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Steven"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> sayHello <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation" >:</span> Person<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >:</span> <span class="token keyword keyword-string" >string</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation" >.</span><span class="token keyword keyword-type" >type</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >"student"</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`Hello, </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>person<span class="token punctuation" >.</span>name<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >"teacher"</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`Hello, professor </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>person<span class="token punctuation" >.</span>name<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// With strict mode on the TS compiler can catch typos and</span>
<span class="token comment" spellcheck="true" >// possible undefined return if you forget a case</span>
<span class="token comment" spellcheck="true" >// though it's not 100% idiomatic it is achievable</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>GADTs are a more advanced usage of ReasonML to encode more complex logic into the type system, and you won't need the feature for the typical cases and most of the time you'll be just fine with normal ADT/variants.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://sketch.sh/s/yH0MJiujNSiofDWOU85loX/">The primer by _shrynx</a> explains GADTs in a great detail.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_reasonml_-work-" id="how-does-_reasonml_-work-"></a><span class="text">How does <em>ReasonML</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_reasonml_-work-">#</a></h2>
<p>Reason can be thought on as a syntax of the <a href="https://ocaml.org">OCaml</a> language, which is mature by itself. OCaml is excellent because it's straightforward to hack to the compiler to target the compilation to other things that are not binaries/byte code, that's where <a href="https://bucklescript.github.io">BuckleScript</a> (BS) enters in the scene. Bloomberg started BS as an alternative of js_of_ocaml with usage more familiar to JS programmers.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, read <a href="https://khoanguyen.me/reasonml-toolchain/">the introduction to the ReasonML toolchain by @thangngoc89</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_reasonml_-differ-from-other-solutions-" id="how-does-_reasonml_-differ-from-other-solutions-"></a><span class="text">How does <em>ReasonML</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_reasonml_-differ-from-other-solutions-">#</a></h2>
<p>Compared to Elm and PureScript, ReasonML tries to be familiar enough to JavaScript developers without compromising OCaml lang features too much. BuckleScript also makes reusing existing JavaScript code easy, with great tooling for FFI/binding JavaScript modules.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-choose-_reasonml_-" id="why-did-you-choose-_reasonml_-"></a><span class="text">Why did you choose <em>ReasonML</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-choose-_reasonml_-">#</a></h2>
<p>We have been using ReasonML in my company for almost two years, and it was the best tech decision ever, we are shipping code with more confidence and without fear of refactoring for a lot of projects.</p>
<p>One of them is an automatized tax calculation platform for Brazilians and expatriates working in Brazil (<a href="http://lion.tax">http://lion.tax</a>). It was because of this tax solution why we looked up for a tool that would ensure we wouldn't commit dumb mistakes with other people's money.</p>
<p>We try to open source our ReasonML tooling as much as possible. The most important ones that we are using internal are <a href="https://github.com/Astrocoders/reform/">ReForm</a> for form state management with type-safe multi-type support and <a href="https://github.com/callstackincubator/bs-react-native-paper">BsReactNativePaper</a> (which we handed over to Callstack, the creators of Paper).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_reasonml_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_reasonml_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>ReasonML</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_reasonml_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think with the rise of TypeScript/Flow and other type systems tooling for the web, the general developer public is more open to these ideas. Some projects are being built right now with ReasonML that will change what we expect about creating multi-platform apps.</p>
<p>For instance, I believe <a href="https://github.com/revery-ui/revery">Revery</a> is the evolution of Electron. <a href="https://esy.sh/">Esy</a> also will change what you expect from a package management tool about the reliability of builds.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Don't try to learn everything at once, don't open all the links, and most important don't give up. It can feel quite frighting when you see the number of things you have to learn, but my tip is to try to build something and try to learn what is necessary for it, so when you come back to read the theories you'll have a better real-world context.</p>
<p>Also, try to contribute as much as you can to open source, it's where you are</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have a bunch of names in my head of great developers I know:</p>
<ul>
<li><a href="https://github.com/diegohaz">Diego Haz</a> - The creator or Reakit</li>
<li><a href="https://github.com/sibelius">Sibelius Seraphini</a> - Relay advocate and contributor to the React Native community</li>
<li><a href="https://github.com/brunolemos">Bruno Lemos</a> - Creator of devhub</li>
<li><a href="https://github.com/hnordt">Heliton Nordt</a> - Advocate.</li>
<li><a href="https://github.com/thangngoc89">Khoa Nguyen</a> - The creator of <a href="https://sketch.sh">sketch.sh</a></li>
<li><a href="https://github.com/alexfedoseev">Alex Fedoseev</a> - The creator of re-formality and other libs from ReasonML</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<blockquote>
<p>Apenas que busquem conhecimento</p>
</blockquote>
<p>If you are more interested in all these I highly <a href="http://dev.realworldocaml.org/">recommend reading the v2 of Real World OCaml</a>, <a href="https://www.youtube.com/watch?v=mVVNJKv9esE">watch this talk from Cheng Lou</a>, and the <a href="https://www.youtube.com/watch?v=ocBUpGC_Nbo&list=PLDLhOs9UV9w8ieADzBeUvv5LGD78r6yTH">ReasonConf 2019 playlist</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Also, we are always looking for talented people at <a href="https://astrocoders.com/">Astrocoders</a>, if you would like to know us more send as an <a href="contact <at> astrocoders.com">email</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I think ReasonML shows what JavaScript might become one day. That said, there's no reason to try it right now to see what you might be missing. The popularity of type systems seems to be rising especially thanks to the popularity of TypeScript.</p>
<p>ReasonML is an example of what you can achieve when you go far enough. The ecosystem is still emerging but it's not a bad time to look into the language!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://reasonml.github.io">Check ReasonML site</a> to get started!</blockquote>Express Gateway - A microservices API Gateway built on top of Express.js - Interview with Vincenzo Chianeseaexpressgatewayamicroservicesapigatewaybuiltontopofexpressjsinterviewwithvincenzochianese2019-04-22t00:00:00z2019-04-22T00:00:00Z<p>If you are dealing with microservices, you get questions like how to manage and orchestrate them.</p>
<p><a href="https://twitter.com/D3DVincent">Vincenzo Chianese</a> has come up with a solution designed for the popular Node.js web framework <a href="https://www.npmjs.com/package/express">Express.js</a>. Learn more about <a href="https://www.npmjs.com/package/express-gateway">Express Gateway</a> in this interview.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/4e6423770e850520261e06ea30d5afa2?s=200" alt="Vincenzo Chianese" class="author" width="100" height="100" />
</span>
My name is Vincenzo Chianese — I am an Italian Software Developer (but I've been living away from my country for the last five years). I'm currently based in Madrid, working for <a href="https://stoplight.io">Stoplight.io</a> where I help to develop tools for API Developers. Formerly, I've been working for other API-tooling companies.
</p>
<p>I also organize the <a href="https://www.meetup.com/API-Meetup-Barcelona/">API Meetup in Barcelona</a> that we're bringing it to the next level this year by turning in in a conference: <a href="https://apidays.co/barcelona">API Days Barcelona</a></p>
<p>I'm a Google Developer Expert in Web Technologies as well as an Auth0 Ambassador.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_express-gateway_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_express-gateway_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Express Gateway</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_express-gateway_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://express-gateway.io">Express Gateway</a> is an open source API Gateway written in JavaScript and running on NodeJS. It leverages the vast existing middleware ecosystem for Express.js</p>
<p>An API Gateway is a centralized middleware that encapsulates the internal system architecture and provides an API that can be shaped based on real client needs rather than merely returning what the particular microservice is sending you back. These gateways are effectively implementing the facade pattern in the microservices world.</p>
<p>API Gateway can have other responsibilities such as authentication, monitoring, load balancing, caching, request shaping and management, and static response handling.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_express-gateway_-work-" id="how-does-_express-gateway_-work-"></a><span class="text">How does <em>Express Gateway</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_express-gateway_-work-">#</a></h2>
<p>Express Gateway is a bunch of components which declaratively build around Express to meet the API Gateway use case. Express Gateway’s power is harnessed the vibrant ecosystem around Express middleware.</p>
<p>Express Gateway transforms Express into a dynamic runtime engine. For example - you can easily hardcode routes statically through Express’ API. In Express Gateway, however, those values can continually change and are dynamically injected as parameters without having to alter the underlying code.</p>
<p>Essentially, all of the core components within Express Gateway make Express more dynamic and declarative.</p>
<p>For instance, a Gateway that's proxying all requests to <a href="https://httpbin.org">httpbin</a> with a <code>key-auth</code> check is just 20 lines away.</p>
<pre><code class="lang-yaml"><span class="token key atrule" >http</span><span class="token punctuation" >:</span>
<span class="token key atrule" >port</span><span class="token punctuation" >:</span> $<span class="token punctuation brackets-braces" >{</span>EG_HTTP_PORT<span class="token punctuation" >:</span><span class="token number" >-8080</span><span class="token punctuation brackets-braces" >}</span>
<span class="token key atrule" >apiEndpoints</span><span class="token punctuation" >:</span>
<span class="token key atrule" >api</span><span class="token punctuation" >:</span>
<span class="token key atrule" >host</span><span class="token punctuation" >:</span> *
<span class="token key atrule" >serviceEndpoints</span><span class="token punctuation" >:</span>
<span class="token key atrule" >backend</span><span class="token punctuation" >:</span>
<span class="token key atrule" >url</span><span class="token punctuation" >:</span> https<span class="token punctuation" >:</span>//httpbin.org
<span class="token key atrule" >policies</span><span class="token punctuation" >:</span>
<span class="token punctuation" >-</span> proxy
<span class="token punctuation" >-</span> key<span class="token punctuation" >-</span>auth
<span class="token key atrule" >pipelines</span><span class="token punctuation" >:</span>
<span class="token key atrule" >adminAPI</span><span class="token punctuation" >:</span>
<span class="token key atrule" >apiEndpoints</span><span class="token punctuation" >:</span>
<span class="token punctuation" >-</span> api
<span class="token key atrule" >policies</span><span class="token punctuation" >:</span>
<span class="token punctuation" >-</span> <span class="token key atrule" >key-auth</span><span class="token punctuation" >:</span>
<span class="token punctuation" >-</span> <span class="token key atrule" >proxy</span><span class="token punctuation" >:</span>
<span class="token key atrule" >action</span><span class="token punctuation" >:</span>
<span class="token key atrule" >serviceEndpoint</span><span class="token punctuation" >:</span> backend
</code></pre>
<p>In contrast — an imperative approach for this would require the following lines of code:</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> express <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"express"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> app <span class="token operator" >=</span> <span class="token function" >express</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> hostapp <span class="token operator" >=</span> <span class="token function" >express</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> passport <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"passport"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> HeaderAPIKeyStrategy <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"passport-headerapikey"</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span>HeaderAPIKeyStrategy<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> vhost <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"vhost"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
passport<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token keyword keyword-new" >new</span> <span class="token class-name" >HeaderAPIKeyStrategy</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token punctuation brackets-braces" >{</span> header<span class="token punctuation" >:</span> <span class="token string" >"Authorization"</span><span class="token punctuation" >,</span> prefix<span class="token punctuation" >:</span> <span class="token string" >"Api-Key "</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token boolean" >false</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span>apikey<span class="token punctuation" >,</span> done<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span>apikey<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >done</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-null" >null</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
hostapp<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token string" >"/api/authenticate"</span><span class="token punctuation" >,</span>
passport<span class="token punctuation" >.</span><span class="token function" >authenticate</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"headerapikey"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
session<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
failureRedirect<span class="token punctuation" >:</span> <span class="token string" >"/api/unauthorized"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span>req<span class="token punctuation" >,</span> res<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
res<span class="token punctuation" >.</span><span class="token function" >json</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> message<span class="token punctuation" >:</span> <span class="token string" >"Authenticated"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >vhost</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"domain.com"</span><span class="token punctuation" >,</span> hostapp<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> listener <span class="token operator" >=</span> app<span class="token punctuation" >.</span><span class="token function" >listen</span><span class="token punctuation brackets-parentheses" >(</span>process<span class="token punctuation" >.</span>env<span class="token punctuation" >.</span>PORT<span class="token punctuation" >,</span> <span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Your app is listening on port "</span> <span class="token operator" >+</span> listener<span class="token punctuation" >.</span><span class="token function" >address</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>port<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Even though the lines of code are almost the same, Express Gateway offers:</p>
<ol>
<li>A wide array of ready to use <a href="https://www.express-gateway.io/docs/policies/">policies</a></li>
<li>Integrated error handling (which has not been taken into consideration in the code example)</li>
<li>A minimal identity server to store your users, applications, and keys as well</li>
<li>Hot reloading capabilities</li>
<li>Container native software</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_express-gateway_-differ-from-other-solutions-" id="how-does-_express-gateway_-differ-from-other-solutions-"></a><span class="text">How does <em>Express Gateway</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_express-gateway_-differ-from-other-solutions-">#</a></h2>
<p>When it comes to an API Gateway, rest assured that there are <strong>tons</strong> of alternatives; but when I was building Express Gateway I had the following principles in mind that probably are the key differentiation factors:</p>
<ol>
<li><strong>Declarative file-based configuration:</strong> although the gateway can be configured using a bunch of API Calls, Express Gateway is usually defined with a yaml based file that can be versioned and it's easy to inspect/understand. Moreover, the Gateway's hot reload mechanism will automatically reload the configuration when the target files are changed/saved.</li>
<li><strong>Easy:</strong> The gateway is not inventing any new rocket science concepts. If you ever wrote an Express.js application, you can use, extend and read Express Gateway's source code literally within hours. The whole ecosystem of Express Middlewares can be installed in minutes. Spinning up an instance is a <em>single command</em> away.</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_express-gateway_-" id="why-did-you-develop-_express-gateway_-"></a><span class="text">Why did you develop <em>Express Gateway</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_express-gateway_-">#</a></h2>
<p>The spark was the frustration related to setting up all the other solutions I found so far in the market. Some of these require database instances; some require complicated configuration steps to get the minimal use case working. On the other hand, I wanted something that could accomplish 80% of the use cases with 20% of the efforts. And so the main principles were:</p>
<ol>
<li>I want to be able to spin up a gateway instance with <strong>no external dependencies</strong> with a single command</li>
<li>I do not wish to have a database to store my configuration</li>
<li>I want to be able to iterate/develop my gateway configuration without having to make 3000 protected API calls</li>
</ol>
<p>To keep it short, Express Gateway is an API Gateway written from a developer, for developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-s-next-" id="what-s-next-"></a><span class="text">What's next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-s-next-">#</a></h2>
<p>A lot is going on — even though right now I'm the only active maintainer on the project. We're looking to finalize the Ingress Controller integration for Kubernetes as well as support for OpenAPI 3.0 (importing documents). I also gave a <a href="https://youtu.be/IkfhudP2v7U?t=9814">presentation</a> on the topics about how this integration could look like.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_express-gateway_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_express-gateway_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Express Gateway</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_express-gateway_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope to get more contributors. Although we have different Fortune 500 companies using Express Gateway in production, nobody has ever contributed or even allowed me to publicly announce their Express Gateway usage, which is a little bit sad; therefore beyond the development efforts I'd like to focus on lowering the contribution barrier as well as mentoring people willing to work on the gateway.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Refrain the hype. Web development is changing, and it is very confusing even to get started. Shall I use webpack? Parcel? GraphQL? REST API? My advice: you're writing an application on purpose, focus on that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think you should get in touch with <a href="https://smizell.me">Stephen Mizell</a>. He's been working on very cool stuff for a very long time, and it's worth voice some of the good things he's been doing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>This has been great. Thanks a lot for the invitation and please keep going with this. I've discovered at least two good open source project to look at because of this interview series!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Vincenzo! It was great for me to learn about API gateways as I haven't seen the need or value before. Now it's clear to me how using one such as yours can cut some code while keeping functionality understandable.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Learn more at <a href="https://express-gateway.io">Express Gateway site</a> and <a href="https://github.com/expressgateway/express-gateway">consider starring the project on GitHub</a>.</blockquote>Experiences on typeof 2019aexperiencesontypeof20192019-04-06t00:00:00z2019-04-06T00:00:00Z<p>I was invited to <a href="https://typeofconf.com/">typeof 2019 (27-29.03)</a> as a speaker and a workshop instructor. It was a small-scale conference (about 200 people) held in Porto, Portugal. It was my second time in Portugal (first time in mainland) and I enjoyed the trip a lot.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-typeof-2019" id="overview-of-typeof-2019"></a><span class="text">Overview of typeof 2019</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-typeof-2019">#</a></h2>
<p><figure><img src="/b686f3ec5540bb42dc99a6e4bd82e228.jpg" alt="typeof 2019 was held in the old customs building" class="" width="" height="" /><figcaption>typeof 2019 was held in the old customs building</figcaption></figure></p>
<p>It was the first time typeof was organized and I would say it went well for a first time effort. Big thanks to Mindera for running things smoothly! I know running a conference can be rather stressful and I feel they did a decent job at it. No doubt the second edition will be even better.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#a-workshop-day-and-two-conference-days" id="a-workshop-day-and-two-conference-days"></a><span class="text">A Workshop Day and Two Conference Days</span><a class="header-anchor-select" href="https://survivejs.com/#a-workshop-day-and-two-conference-days">#</a></h3>
<p>The conference started with a workshop day that had a webpack and a React workshop. I ran the webpack one based on <a href="https://survivejs.com/webpack">my webpack book material</a>. As always, you notice places where to improve the content and despite some struggles, we got through and even learned some things (I hope!). Webpack isn't the most exciting topic for a workshop and it might make sense to pivot the topic somehow so it's more exciting.</p>
<p>After the workshop day, there were two conference days that followed a single track format. The talks varied from 30 to 45 minutes. Single track is my favorite format although I prefer shorter slots for an improved flow. The longer slots worked fairly well this time, though.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#14-speakers-web-topics" id="14-speakers-web-topics"></a><span class="text">14 Speakers, Web Topics</span><a class="header-anchor-select" href="https://survivejs.com/#14-speakers-web-topics">#</a></h3>
<p>In total, the conference had 14 speakers with varying web-related topics. For me, the schedule felt a little random as there were different types (inspirational, technical, topical) of talks during both days. Sometimes it may be better to group related talks next to each other they can build on each other. Overall, it was a minor gripe and you always need something to improve on for the next edition.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#held-in-porto-portugal" id="held-in-porto-portugal"></a><span class="text">Held in Porto, Portugal</span><a class="header-anchor-select" href="https://survivejs.com/#held-in-porto-portugal">#</a></h3>
<p>The conference was held in Porto, the second biggest city of Portugal. As you might guess from the name, it's a coastal city. Porto is crossed by the Douro river and it is characterized by many hills which make the city feel different than most in Europe.</p>
<p>I had a chance to explore its different parts and it felt like there are still places to discover. The character of the city changes greatly as you go from the city center to the coast and it made the trip more interesting for me.</p>
<p><figure><img src="/166d03055054d2033758cc23a36be4bd.jpg" alt="The venue had plenty of space" class="" width="" height="" /><figcaption>The venue had plenty of space</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conference-day-1" id="conference-day-1"></a><span class="text">Conference Day 1</span><a class="header-anchor-select" href="https://survivejs.com/#conference-day-1">#</a></h2>
<p>The first day of the conference contained talks with varying topics and it was difficult to discern a specific theme. That said, there were insights to gain and I've listed mine below.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#svg-illustrations-as-components-elizabet-oliveira" id="svg-illustrations-as-components-elizabet-oliveira"></a><span class="text">SVG Illustrations as Components - Elizabet Oliveira</span><a class="header-anchor-select" href="https://survivejs.com/#svg-illustrations-as-components-elizabet-oliveira">#</a></h3>
<p><figure><img src="/2bbe10ee4f385575754f7756a568d5b0.jpg" alt="Elizabet Oliveira" class="" width="" height="" /><figcaption>Elizabet Oliveira</figcaption></figure></p>
<p>The conference began with a talk by Elizabet Oliveira. She discussed how to use SVG illustrations as React components and how to animate them. She also explained the rationale behind <a href="https://www.npmjs.com/package/react-kawaii">react-kawaii</a>. Adding little touches like this can help to make a user interface to relate to the users better on an emotional level.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#beyond-web-apps-react-and-webassembly-to-rewrite-native-apps-florian-rival" id="beyond-web-apps-react-and-webassembly-to-rewrite-native-apps-florian-rival"></a><span class="text">Beyond Web Apps: React and WebAssembly to rewrite native apps - Florian Rival</span><a class="header-anchor-select" href="https://survivejs.com/#beyond-web-apps-react-and-webassembly-to-rewrite-native-apps-florian-rival">#</a></h3>
<p><figure><img src="/4902767c339475acc0e90524df7872c6.jpg" alt="Florian Rival" class="" width="" height="" /><figcaption>Florian Rival</figcaption></figure></p>
<p>Florian Rival from Facebook discussed how he ported his game creation tool from C++ based approach to a Web Assembly and React powered one. Although the new version doesn't match the features of the pre-port one completely, the users seem to be content with it. One of the side benefits of the port is that you can try the tool online. <a href="https://gdevelop-app.com/">Check out GDevelop to learn more.</a></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#lights-camera-render-getting-your-feet-wet-with-webgl-ant-nio-capelo" id="lights-camera-render-getting-your-feet-wet-with-webgl-ant-nio-capelo"></a><span class="text">Lights, camera, render! Getting your feet wet with WebGL - António Capelo</span><a class="header-anchor-select" href="https://survivejs.com/#lights-camera-render-getting-your-feet-wet-with-webgl-ant-nio-capelo">#</a></h3>
<p><figure><img src="/3873697f9cbbfba8c7167249d01f3726.jpg" alt="António Capelo" class="" width="" height="" /><figcaption>António Capelo</figcaption></figure></p>
<p>António Capelo's talk was a great showcase in how to use WebGL to bring more life to a website or an app. I have background in 3D so there wasn't much new to learn but it was still cool to see how the technology is finding its way to the web.</p>
<p>In particular, I enjoyed the displacement shader examples António used for slide transitions. It feels like WebGL is underutilized at the moment and it seems like a good direction if you want to add that extra touch to whatever you are doing.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#graphql-without-graphql-juho-veps-l-inen" id="graphql-without-graphql-juho-veps-l-inen"></a><span class="text">GraphQL without GraphQL - Juho Vepsäläinen</span><a class="header-anchor-select" href="https://survivejs.com/#graphql-without-graphql-juho-veps-l-inen">#</a></h3>
<p><figure><img src="/277378f11fcc02d92af72000d59fe862.jpg" alt="Juho Vepsäläinen" class="" width="" height="" /><figcaption>Juho Vepsäläinen</figcaption></figure></p>
<p>In my talk, <a href="https://slides.survivejs.com/graphql-without-graphql/">GraphQL without GraphQL</a>,I discussed how I've evolved in my usage of GraphQL. Initially I began with by writing schema definitions and queries by hand. Since then, I've found ways to skip both by utilizing <a href="https://typegraphql.ml/">TypeGraphQL</a> for the schema and a home-baked solution for the queries.</p>
<p>In my current proof of concept, I derive queries based on type definitions of components. The topic likely warrants a blog post with an expanded discussion to show how the bits go together and why the approach might make sense.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#doing-the-thing-right-or-doing-the-right-thing-jos-fonseca" id="doing-the-thing-right-or-doing-the-right-thing-jos-fonseca"></a><span class="text">Doing the thing right, or doing the right thing? - José Fonseca</span><a class="header-anchor-select" href="https://survivejs.com/#doing-the-thing-right-or-doing-the-right-thing-jos-fonseca">#</a></h3>
<p><figure><img src="/fd5001ae590fc966d9300b9a9a1d162b.jpg" alt="José Fonseca" class="" width="" height="" /><figcaption>José Fonseca</figcaption></figure></p>
<p>José Fonseca discussed different tradeoffs of a developer. Perhaps the main message for me is that you should put thought into architecture and how different portions of a system go together.</p>
<p>It's also good to remember that the majority of our time we'll work on legacy systems. Then it can be more about delivering value to the client while progressively improving the system in terms of maintainability.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-the-web-in-the-web-ives-van-hoorne" id="building-the-web-in-the-web-ives-van-hoorne"></a><span class="text">Building the web in the web - Ives van Hoorne</span><a class="header-anchor-select" href="https://survivejs.com/#building-the-web-in-the-web-ives-van-hoorne">#</a></h3>
<p><figure><img src="/f347d33e6b68e5128e512b7414434029.jpg" alt="Ives van Hoorne and Sara Vieira" class="" width="" height="" /><figcaption>Ives van Hoorne and Sara Vieira</figcaption></figure></p>
<p>Ives van Hoorne discussed with Sara Vieira (live demonstration) how <a href="https://codesandbox.io/">CodeSandbox</a> allows web developers to build web in the web. The talk gave insight to the history of the tool and how it works together with VS Code these days (CodeSandbox UI is literally bootstrapped from VS Code). It's impressive what Ives has achieved in a few years and it's going to be interesting to see what's in store.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/codesandbox-interview">Read the CodeSandbox interview to learn more.</a></blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#creative-momentum-how-to-tap-into-your-creativity-to-solve-problems-faster-joana-galv-o" id="creative-momentum-how-to-tap-into-your-creativity-to-solve-problems-faster-joana-galv-o"></a><span class="text">Creative Momentum - How to tap into your creativity to solve problems faster - Joana Galvão</span><a class="header-anchor-select" href="https://survivejs.com/#creative-momentum-how-to-tap-into-your-creativity-to-solve-problems-faster-joana-galv-o">#</a></h3>
<p><figure><img src="/3ea0ae3f5a3f381a8b07eae659715eed.jpg" alt="Joana Galvão" class="" width="" height="" /><figcaption>Joana Galvão</figcaption></figure></p>
<p>Joana Galvão ended the day by discussing the concept of creativity and how developers can tap into it. She discussed a basic process to follow and perhaps the main point was that developers are creatives too. I think it's a fair assessment as often the work includes coming up with creative solutions for the problems we face.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conference-day-2" id="conference-day-2"></a><span class="text">Conference Day 2</span><a class="header-anchor-select" href="https://survivejs.com/#conference-day-2">#</a></h2>
<p>The second conference day continued from the first and it was filled with talks from varying topics.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#usegraphql-sara-vieira" id="usegraphql-sara-vieira"></a><span class="text"><code>useGraphQL()</code> - Sara Vieira</span><a class="header-anchor-select" href="https://survivejs.com/#usegraphql-sara-vieira">#</a></h3>
<p><figure><img src="/1a2adde2260e4051e060d37ebff3be4a.jpg" alt="Sara Vieira" class="" width="" height="" /><figcaption>Sara Vieira</figcaption></figure></p>
<p>Sara Vieira demonstrated GraphQL in live fashion. It was also the talk that showed what's up with the new hook feature in React.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#a-modern-approach-to-digital-product-design-andrei-herasimchuk" id="a-modern-approach-to-digital-product-design-andrei-herasimchuk"></a><span class="text">A Modern Approach to Digital Product Design - Andrei Herasimchuk</span><a class="header-anchor-select" href="https://survivejs.com/#a-modern-approach-to-digital-product-design-andrei-herasimchuk">#</a></h3>
<p><figure><img src="/05bd82769630038e14d326a605a6ec51.jpg" alt="Andrei Herasimchuk" class="" width="" height="" /><figcaption>Andrei Herasimchuk</figcaption></figure></p>
<p>Andrei Herasimchuk has background in companies like Adobe, Twitter, and Figma, just to mention a few. He discussed his approach to digital product design. The key insight for me was the value of having a reference design.</p>
<p>If you are working on multiple platforms, you should work starting <strong>from</strong> a reference design and add platform specific exceptions to it rather than the other way around. Doing this gives a more consistent UX across platforms and likely helps to avoid reducing development waste. The talk was one of the highlights of the conference for me.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#vue-js-and-design-systems-ramon-victor" id="vue-js-and-design-systems-ramon-victor"></a><span class="text">Vue.js and Design Systems - Ramon Victor</span><a class="header-anchor-select" href="https://survivejs.com/#vue-js-and-design-systems-ramon-victor">#</a></h3>
<p><figure><img src="/6628fd11296bc16a9a70f7a110188a35.jpg" alt="Ramon Victoor" class="" width="" height="" /><figcaption>Ramon Victoor</figcaption></figure></p>
<p>Ramon Victor showed how they use design systems in booking.com with Vue. It complemented Andrei's talk and gave a practical example.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#paint-the-web-drawing-with-css-eva-lettner" id="paint-the-web-drawing-with-css-eva-lettner"></a><span class="text">Paint the Web - Drawing with CSS - Eva Lettner</span><a class="header-anchor-select" href="https://survivejs.com/#paint-the-web-drawing-with-css-eva-lettner">#</a></h3>
<p><figure><img src="/21641c721fc2de08a37be5c6f21cdfdd.jpg" alt="Eva Lettner" class="" width="" height="" /><figcaption>Eva Lettner</figcaption></figure></p>
<p>Eva Lettner's talk focused on how to use CSS for drawing. Although the specification hasn't been designed to be used for graphics, there is a group of hacks that can be used to replicate common shapes. There's enough flexibility for generating something complex even. Perhaps the sweet spot is in adding subtle graphical touches here and there while using technology like SVG for heavier duty needs.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#browsers-for-better-or-worse-renato-rodrigues" id="browsers-for-better-or-worse-renato-rodrigues"></a><span class="text">Browsers - For better or worse - Renato Rodrigues</span><a class="header-anchor-select" href="https://survivejs.com/#browsers-for-better-or-worse-renato-rodrigues">#</a></h3>
<p><figure><img src="/94289502b339152d21727fc6e78055d6.jpg" alt="Renato Rodrigues" class="" width="" height="" /><figcaption>Renato Rodrigues</figcaption></figure></p>
<p>Renato Rodrigues talk gave insight the security aspect of browsers and how to exploit them. The topic is somewhat undervalued at conferences and it was cool to see practical examples of how someone might try to exploit your site. Bringing awareness of these issues to the community is valuable.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#designing-a-design-culture-s-nia-gomes" id="designing-a-design-culture-s-nia-gomes"></a><span class="text">Designing a Design Culture - Sónia Gomes</span><a class="header-anchor-select" href="https://survivejs.com/#designing-a-design-culture-s-nia-gomes">#</a></h3>
<p><figure><img src="/613da498230d322d6b4bce39bc8a772d.jpg" alt="Sónia Gomes" class="" width="" height="" /><figcaption>Sónia Gomes</figcaption></figure></p>
<p>Sónia Gomes has helped to develop a design culture in her organization and in this talk she went through the related process. For me, the key insight is that having cross-functional teams where designers work together with developers and product owners can help to foster skill development and culture while also creating empathy towards different crafts. Just like testing, design isn't something you can do later in the lifecycle of a product. It's a continuous process and even non-designers can and should design.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#navigating-the-hype-driven-frontend-development-world-without-going-nuts-kristijan-ristovski" id="navigating-the-hype-driven-frontend-development-world-without-going-nuts-kristijan-ristovski"></a><span class="text">Navigating the Hype-Driven Frontend Development World Without Going Nuts - Kristijan Ristovski</span><a class="header-anchor-select" href="https://survivejs.com/#navigating-the-hype-driven-frontend-development-world-without-going-nuts-kristijan-ristovski">#</a></h3>
<p><figure><img src="/660f33e40ceb116901008fd66568c1e0.jpg" alt="Kristijan Ristovski" class="" width="" height="" /><figcaption>Kristijan Ristovski</figcaption></figure></p>
<p>I had seen Kristijan's talk earlier in <a href="https://survivejs.com/blog/agentconf-2018/">AgentConf 2018</a> so there wasn't much to expect. I think the core point is valid - running after hype doesn't make sense until it does. What I mean is, that there's often a certain point after which it makes sense to adopt a new technology. Although the transition comes with a cost, it often solves some pain point. Before jumping on a hype train, think carefully why you are doing it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/fa9847ee2a71656523de15aa3ed9f380.jpg" alt="Porto" class="" width="" height="" /><figcaption>Porto</figcaption></figure></p>
<p>I think typeof 2019 had a great start and no doubt it will be a good conference next year as well. Especially the city of Porto is worth visiting and I feel the organizers did well with the event. Although the venue was a little out of the way, I think they made the right choice with it given it was a historical building (old customs) with a comfortable setting and it would be great to visit again.</p>
Functional Programming - Interview with Arfat Salmanafunctionalprogramminginterviewwitharfatsalman2019-04-05t00:00:00z2019-04-05T00:00:00Z<p>If there's one programming style I like a lot, it's <strong>functional programming</strong>. Although it's not the best fit for all problems, often having means to decompose a problem into smaller parts to be solved separately through composition has proven to be useful.</p>
<p>In this interview with <a href="https://twitter.com/salman_arfat">Arfat Salman</a>, you'll learn more about the topic and how uses the technique in his daily work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/879f2f512c354bb26c0af0a274a1a032?s=200" alt="Arfat Salman" class="author" width="100" height="100" />
</span>
I graduated from the University of Delhi in Computer Science. Currently, I am the Director of Education at Pesto. I began as a Web Developer here, and since then I’ve taken more responsibility towards making other engineers better by helping and training them. I have a strong interest in Computer Science in general. Particularly in Artificial Intelligence, Recommendation Systems, Natural Language Processing, Compilers, and Algorithms.
</p>
<p>In my spare time, I like to learn human languages. I learned Spanish as my 4th language (apart from Hindi/Urdu/English). Currently, I am trying to learn Japanese. I hope to learn Mandarin someday. I also co-organize and host a Spanish Meetup in Delhi in association with Duolingo.</p>
<p>I love teaching about computers, speaking at conferences, tea and reading lots of books, especially science fiction.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_functional-programming_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_functional-programming_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Functional Programming</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_functional-programming_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Any language or style exists to give shape and structure to our thoughts. In the case of Functional Programming (FP), it is a particular set of ideas to structure our thought processes while programming. Once you face a specific programming problem, you may solve it using multiple approaches. FP is one of those ways. FP has its own set of constraints and guidelines and FP recommends that (among many other things):</p>
<ul>
<li>All variables should be immutable</li>
<li>Loops should be implicit or use recursion instead of manual C-style <code>for</code> loops</li>
<li>Functions and their composition should do the heavy lifting in achieving the solution as opposed to object-based inheritance (as in OOP paradigm)</li>
</ul>
<p>In essence, in FP, while coming up with a solution, we mostly think about <strong>what</strong> to do as opposed to <strong>how</strong> to do it. In the broader sense, focusing on function composition is what functional programming is.</p>
<p>Consider the following program squaring a list of numbers:</p>
<pre><code class="lang-js"><span class="token comment" spellcheck="true" >// Imperative/Procedural Style</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >square</span><span class="token punctuation brackets-parentheses" >(</span>arr<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> result <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-for" >for</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-var" >var</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" ><</span> arr<span class="token punctuation" >.</span>length<span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
result<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>arr<span class="token punctuation brackets-square" >[</span>i<span class="token punctuation brackets-square" >]</span> <span class="token operator" >*</span> arr<span class="token punctuation brackets-square" >[</span>i<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-return" >return</span> result<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// functional style</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >square</span> <span class="token operator" >=</span> arr <span class="token operator" >=></span> arr<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>el <span class="token operator" >=></span> el <span class="token operator" >*</span> el<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>In the procedural style, we mention <em>"how"</em> to achieve the computation via a C-style <code>for</code> loop. We keep track of loop counters, the termination condition, and the increment expression. We also manually populate the result by pushing in the <code>result</code> array. Finally, in the body of the loop, we specify <em>what</em> to do.</p>
<p>In a functional style, we only specified <em>what</em> to do directly in the <code>map</code> function. The responsibility of looping, termination, and populating the result set is delegated to the <code>map</code> function itself.</p>
<p>It can be argued that the procedural style has more "moving" parts that a programmer needs to keep track of while reading the program. For example, <code>i < arr.length</code>, <code>i++</code>, <code>result.push(...)</code>. In the functional style, the cognitive load is arguably less, and the developer can only focus on the business logic (of transforming the input to output) at hand and not worry about maintaining the loop, for example.</p>
<p>Consider another example of reversing an array:</p>
<pre><code class="lang-js"><span class="token comment" spellcheck="true" >// Procedural/imperative Style</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >reverse</span> <span class="token operator" >=</span> arr <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> reversedArray <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-for" >for</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-let" >let</span> i <span class="token operator" >=</span> arr<span class="token punctuation" >.</span>length <span class="token operator" >-</span> <span class="token number" >1</span><span class="token punctuation" >;</span> i <span class="token operator" >></span> <span class="token operator" >-</span><span class="token number" >1</span><span class="token punctuation" >;</span> i<span class="token operator" >--</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
reversedArray<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>arr<span class="token punctuation brackets-square" >[</span>i<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-return" >return</span> reversedArray<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Functional style (using recursion)</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >reverse</span> <span class="token operator" >=</span> arr <span class="token operator" >=></span>
arr<span class="token punctuation" >.</span><span class="token function" >reduce</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>reversedArray<span class="token punctuation" >,</span> current<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-square" >[</span>current<span class="token punctuation" >,</span> <span class="token operator" >...</span>reversedArray<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>In the procedural implementation, we had to consciously be aware that the initialization is not from <code>0</code> but <code>arr.length</code>, we have <code>i > -1</code> in termination condition rather than the usual <code>i < arr.length</code>, and <code>i--</code> rather than usual <code>i++</code>. Whereas in the functional style, we didn't have to think about those things at all. We use established functions such as <a href="https://en.wikipedia.org/wiki/Fold_%28higher-order_function%29">fold</a> (aka reduce) to do the heavy lifting.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#haskell" id="haskell"></a><span class="text">Haskell</span><a class="header-anchor-select" href="https://survivejs.com/#haskell">#</a></h3>
<p>Here's the same program, but even more succinctly written in <a href="https://www.haskell.org/">Haskell</a>:</p>
<pre><code class="lang-haskell"><span class="token builtin" >reverse</span> <span class="token operator" >=</span> <span class="token builtin" >foldl</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token builtin" >flip</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token operator" >:</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span>
</code></pre>
<p>FP style is a lot like learning a new spoken language. We need to begin thinking in the other language using its grammatical constraints and cultural contexts. FP style is often symbol-heavy, and some syntax may seem unnatural.</p>
<p>It does take a little bit of time to master it. As our programming vocabulary expands with practice, it'll become easier to understand programs like these even if we don't have any prior experience with the language in question.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#sql" id="sql"></a><span class="text">SQL</span><a class="header-anchor-select" href="https://survivejs.com/#sql">#</a></h3>
<p>Most web developers already are intuitively familiar with declarative languages (of which FP is a part) without realizing it. SQL(Structured Query Language) is mostly declarative, though it supports other paradigms too. Here’s an example:</p>
<pre><code class="lang-sql"><span class="token keyword keyword-select" >SELECT</span> Orders<span class="token punctuation" >.</span>OrderID<span class="token punctuation" >,</span> Customers<span class="token punctuation" >.</span>CustomerName<span class="token punctuation" >,</span> Orders<span class="token punctuation" >.</span>OrderDate
<span class="token keyword keyword-from" >FROM</span> Orders
<span class="token keyword keyword-inner" >INNER</span> <span class="token keyword keyword-join" >JOIN</span> Customers <span class="token keyword keyword-on" >ON</span> Orders<span class="token punctuation" >.</span>CustomerID<span class="token operator" >=</span>Customers<span class="token punctuation" >.</span>CustomerID<span class="token punctuation" >;</span>
</code></pre>
<p>In this, we only mention what we want the computer to do. Namely, to print <code>OrderID</code>, <code>CustomerName</code>, and <code>OrderDate</code> of all orders after merging tables <code>Orders</code> and <code>Customers</code> based on the <code>CustomerID</code>. <em>We never specify how to merge two tables or how to select individual rows.</em></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#css" id="css"></a><span class="text">CSS</span><a class="header-anchor-select" href="https://survivejs.com/#css">#</a></h3>
<p>CSS is also very declarative (though it is not considered a full language). Here’s an example:</p>
<pre><code class="lang-css"><span class="token selector" >p </span><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >animation-duration</span><span class="token punctuation" >:</span> <span class="token number" >3</span>s<span class="token punctuation" >;</span>
<span class="token property" >animation-name</span><span class="token punctuation" >:</span> slidein<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token atrule" ><span class="token rule" >@keyframes</span> slidein</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token selector" >from </span><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >margin-left</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >300%</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token selector" >to </span><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >margin-left</span><span class="token punctuation" >:</span> <span class="token number" >0%</span><span class="token punctuation" >;</span>
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>In this simple example, the <code>slidein</code> animation styles the <code><p></code> element so that the text slides in from off the right edge of the browser window. We have only specified the “<em>start</em>” and the “<em>end</em>” state of the animation. The intermediate steps are calculated by the browser, and this is true for almost all CSS properties. We never specify <strong>how</strong> to achieve the effect of a style, but only <strong>what</strong> effects to have.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#_functional-programming_-a-different-way-of-thinking" id="_functional-programming_-a-different-way-of-thinking"></a><span class="text"><em>Functional Programming</em> - A Different Way of Thinking</span><a class="header-anchor-select" href="https://survivejs.com/#_functional-programming_-a-different-way-of-thinking">#</a></h3>
<p>FP is often contrasted with the imperative style of languages such as C and Java. None of the styles are objectively better than the other. They are just different ways of expressing the same solutions and within relevant real-life constraints (such as efficiency and correctness), one style may trump the other. However, I can assure you that learning FP will be worth all that time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-you-use-_functional-programming_-in-your-daily-development-" id="how-do-you-use-_functional-programming_-in-your-daily-development-"></a><span class="text">How do you use <em>Functional Programming</em> in your daily development?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-you-use-_functional-programming_-in-your-daily-development-">#</a></h2>
<p>I use JavaScript in my day-to-day tasks. Given JS’s functional heritage, I often try my best to use pure functions and functional composition to achieve a given task. I begin by making all variables const by default. Then I apply a set of transformations and transform the input values to the desired output.</p>
<p>I substitute most loops with <code>Array.prototype.map</code> and/or <code>Array.prototype.filter</code>. I try to incorporate libraries like Ramda as well. I do resort to imperative style once in a while. However, I am conscious of that fact, and I mark that piece of code so that I can come back to it later after some research and see whether I can refactor the code. I am often able to refactor such programs for the better.</p>
<p>At Pesto, we use <a href="https://reasonml.github.io/">ReasonML</a> for the frontend and most of our product is written in it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_functional-programming_-differ-from-other-solutions-" id="how-does-_functional-programming_-differ-from-other-solutions-"></a><span class="text">How does <em>Functional Programming</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_functional-programming_-differ-from-other-solutions-">#</a></h2>
<p>FP has some strict rules that are based in mathematics. It's a marked departure from the “replace the content of a location with updated values” style of solutions. Rich Hickey (creator of Clojure) called it <strong>PLOP</strong> for <em>PLace Oriented Programming</em> in his talk “<a href="https://www.youtube.com/watch?v=-6BsiVyC1kM">The Values of Values</a>”.</p>
<p>Given the strictness of its rules such as pure functions, no <a href="https://en.wikipedia.org/wiki/Side_effect_%28computer_science%29">side effects</a>, no mutability, and statelessness, the compiler can optimize our programs and make it more efficient. In some cases, the compiler can also check and verify the correctness of our code. For more reasons, see the next answer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-to-learn-_functional-programming_-" id="why-to-learn-_functional-programming_-"></a><span class="text">Why to learn <em>Functional Programming</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-to-learn-_functional-programming_-">#</a></h2>
<p><em>Why not to?</em> Even if one believes that FP has no practical use, I recommend learning it. Learning FP will give you a new perspective, and this will help you in expressing solutions in your current language better, whatever that language may be.</p>
<p>If you know only one style of programming(or just one language), then you can fall victim to the "law of instrument" cognitive bias. It says that "<em>if all you have is a hammer, everything looks like a nail</em>". And for that matter, do not stop at FP. Go ahead and learn other styles too.</p>
<p><a href="https://en.wikipedia.org/wiki/Alan_Perlis">Alan Perlis</a> once said:</p>
<blockquote>
<p><em>A language that doesn't affect the way you think about programming, is not worth knowing</em>.</p>
</blockquote>
<p>And <a href="http://norvig.com/">Peter Norvig</a> (Director of Research at Google and author of the book Artifical Intelligence) says to learn “<em>at least a half dozen programming languages</em>”, preferably of all styles. I wholeheartedly agree with Mr. Norvig and Mr. Perlis.</p>
<p>In any case, here are the concrete benefits of writing programs in a functional style.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#better-error-handling" id="better-error-handling"></a><span class="text">Better Error Handling</span><a class="header-anchor-select" href="https://survivejs.com/#better-error-handling">#</a></h3>
<p>We often have to deal with <code>null</code> in our programs. It is often done via option types. The following Rust code takes a <code>guess</code> numeric string and parses it to actual integers:</p>
<pre><code><span class="token keyword keyword-let" >let</span> guess: u32 <span class="token operator" >=</span> match guess.trim<span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>.parse<span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre><p>What happens when we get a string such as <code>"12a"</code>? Most languages will either return <code>null</code> (or equivalent) or throw an exception. We can check for the nullness in an <code>if</code> condition or wrap the line in a <code>try-catch</code>. However, we can forget to do that. Also, the compiler is not enforcing that check. In Rust, here's how we do it:</p>
<pre><code><span class="token keyword keyword-let" >let</span> guess: u32 <span class="token operator" >=</span> match guess.trim<span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>.parse<span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
Ok<span class="token punctuation brackets-parentheses" >(</span>num<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> num,
Err<span class="token punctuation brackets-parentheses" >(</span>_<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=</span><span class="token operator" >></span> println<span class="token operator" >!</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"String is not a number."</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>,
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre><p>In most functional languages, <code>null</code> does not exist. Its concept is often implemented via something called Option type. In the above Rust code, we add a block that pattern matches on two types <code>Ok</code> and <code>Err</code> for successful values and errors respectively. If <code>parse</code> is not able to turn the string into a number, it will return an <code>Err</code> value that contains more information about the error. Also, if you forget the <code>Err</code> part or even the whole block, the compiler can issue a warning that you have potentially unhandled edge cases.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#unit-testing-and-debugging" id="unit-testing-and-debugging"></a><span class="text">Unit Testing and Debugging</span><a class="header-anchor-select" href="https://survivejs.com/#unit-testing-and-debugging">#</a></h3>
<p>Since every value is immutable, and side-effects are prohibited, a function can <em>only</em> take the parameters and return a value based on those parameters. These types of functions are called <strong>pure functions</strong>.</p>
<p>You can test every function in your program only worrying about its arguments and the return values. It's this property that testers appreciate.</p>
<p>Because of the same reasons, debugging a functional program is easy. We can't modify global variables or alter values in another scope. All values are constants, and we can see how a function is transforming the input to output.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#concurrency" id="concurrency"></a><span class="text">Concurrency</span><a class="header-anchor-select" href="https://survivejs.com/#concurrency">#</a></h3>
<p>A functional program is concurrent by default. While writing concurrent programs in an imperative language, we need to use thread locks to ensure that a shared piece of data is not modified by two threads simultaneously. Since immutability is baked into functional languages, nothing can change anything. No more deadlocks or race conditions.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#machine-assisted-proofs-and-optimizations" id="machine-assisted-proofs-and-optimizations"></a><span class="text">Machine Assisted Proofs and Optimizations</span><a class="header-anchor-select" href="https://survivejs.com/#machine-assisted-proofs-and-optimizations">#</a></h3>
<p>A pure functional language is based on strict mathematical theories of lambda calculus. The compiler can take a piece of code, and generate a more efficient version or check whether all the edge-cases have been covered or not.</p>
<p>As we saw in the “Better Error Handling” segment above, the compiler was able to catch whether you are handling the error or not. It is even possible to create tools that analyze our code and generate edge cases for unit tests automatically!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_functional-programming_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_functional-programming_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Functional Programming</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_functional-programming_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The software of today is becoming increasingly complex. Applications (such as WhatsApp) and games (such as Fortnite and PUBG) today are handling millions of concurrent users, and billions of bytes of data transfer per second.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#increasing-complexity" id="increasing-complexity"></a><span class="text">Increasing Complexity</span><a class="header-anchor-select" href="https://survivejs.com/#increasing-complexity">#</a></h3>
<p>Consequently, the programs comprising the software are increasing in complexity too. Also, software is being used in almost everything in the world, from mission-critical systems like rockets and heart pacemakers to general purpose appliances such as refrigerators and microwaves.</p>
<p>On the other hand, hardware is becoming faster and better every day. RAM capacity is increasing, and the number of cores on a processor is expanding. Displays are adding Ks to their resolution year after year.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#challenges-of-parallelism" id="challenges-of-parallelism"></a><span class="text">Challenges of Parallelism</span><a class="header-anchor-select" href="https://survivejs.com/#challenges-of-parallelism">#</a></h3>
<p>It is becoming increasingly important to write extraordinarily robust and stable software that can exploit the parallelism of the processors and increased memory capacity efficiently. Programming languages, in general, are moving towards a style where more work is performed during compilation.</p>
<p>For example, Go has made expressing concurrent programs much more manageable than C/C++. Rust now combines functional features in a systems language. Immutability helps programmers not worry about inadvertent changes in one part of the code while modifying another one.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#new-environments" id="new-environments"></a><span class="text">New Environments</span><a class="header-anchor-select" href="https://survivejs.com/#new-environments">#</a></h3>
<p>Webpack has allowed developers to use multiple resources without manually managing them. All these utilities allow programmers to think about the business logic at hand rather than the low-level details.</p>
<p>Web and mobile applications are going to get bigger and hopefully better. Concurrency and distributed systems are going to play an important role. Our languages (and hence our thoughts) would always change to take concurrency into account.</p>
<p>In web development, we should see the usage of Progressive Web Applications (PWAs) and better support for native-app-like applications based on Web Assembly. However, these should be taken with a pinch of salt as I can only speak from a limited perspective.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Keep learning! It may look like there’s a vast world out there, and it’s right for computer science and web development. But many people are ready to help you in every aspect. Super nice developers have put their articles, videos, and books, and software online for free.</p>
<p>There is a very supportive open source community that you can engage with and learn. Keep an open mind, be enthusiastic and don’t lose hope. You’ll get it. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for the interview! I am always ready to help students and developers alike. Feel free to reach out to me. I write about JavaScript and web development on <a href="https://medium.com/@arfatsalman">medium</a>. You can also drop me a message on <a href="https://twitter.com/salman_arfat">Twitter</a> or <a href="https://www.linkedin.com/in/arfatsalman/">LinkedIn</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Arfat! I think you explained nicely why it's worth it to learn functional programming. I agree it's about expanding your vocabulary as a programmer. Often the ideas help you to decompose complex problems into easier to solve portions that might fit existing patterns already.</p>
Dredd - Language-agnostic HTTP API Testing Tool - Interview with Honza Javorekadreddlanguageagnostichttpapitestingtoolinterviewwithhonzajavorek2019-03-22t00:00:00z2019-03-22T00:00:00Z<p>If there's one thing developers have to deal with most of the days, it's APIs. For web developers, this often means dealing with HTTP and external services. The question is, how to test the APIs and make sure everything works as we expect.</p>
<p>For this reason, I am interviewing <a href="https://twitter.com/honzajavorek">Honza Javorek</a>, the author of Dredd, a tool designed for this particular purpose.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/7b2e4bf7ecca28e530e1c421f0676c0b?s=200" alt="Honza Javorek" class="author" width="100" height="100" />
</span>
I am a software engineer from Prague, a city in the Central Europe. I understand web APIs, love open source and documentation, and code in Python or JavaScript. You can check my articles or past conference appearances on <a href="http://honzajavorek.cz/">my personal website</a>.
</p>
<p>Since 2011 I have been helping to drive the growth and success of the <a href="https://python.cz/en/">Czech Python User Group</a>. For years I have been participating in volunteer-driven meetups, courses, workshops, <a href="https://cz.pycon.org/">conferences</a>, nonprofit, and more.</p>
<p>I have the privilege of working on Dredd, an open source project, as my day job.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_dredd_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_dredd_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Dredd</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_dredd_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>I'll assume the reader knows what <a href="https://en.wikipedia.org/wiki/Web_API">web APIs</a> are. <a href="https://dredd.org/">Dredd</a> is a command-line tool which tests whether a web API works as expected according to its specification.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_dredd_-work-" id="how-does-_dredd_-work-"></a><span class="text">How does <em>Dredd</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_dredd_-work-">#</a></h2>
<p>When you are about to develop an API, you usually start with an idea of how it should work. APIs are interfaces between systems, teams or companies so to avoid future problems it often makes sense to make the ideation process collaborative. Ideally, to share and discuss the design of the API with other people, you write it down into a document.</p>
<p>While a plain text file would be enough for collaboration, if you describe your API in a popular, structured format like <a href="https://apiblueprint.org/">API Blueprint</a> or <a href="https://www.openapis.org/">OpenAPI</a> you get the benefit of having a machine-readable source of truth for your API, which can be then used by various tools. For instance, you can automatically generate documentation from such a file.</p>
<pre><code>FORMAT: 1A
<span class="token comment" spellcheck="true" ># My API</span>
Below is one of the <span class="token function" >most</span> straightforward APIs written <span class="token keyword keyword-in" >in</span> the **API Blueprint**. You can use <span class="token punctuation brackets-square" >[</span>Markdown<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >(</span>https://daringfireball.net/projects/markdown/<span class="token punctuation brackets-parentheses" >)</span> here.
<span class="token comment" spellcheck="true" ># GET /users</span>
+ Response 200 <span class="token punctuation brackets-parentheses" >(</span>application/json<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"id"</span><span class="token keyword keyword-:" >:</span> 1,
<span class="token string" >"name"</span><span class="token keyword keyword-:" >:</span> <span class="token string" >"@survivejs"</span>,
<span class="token punctuation brackets-braces" >}</span>,
<span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"id"</span><span class="token keyword keyword-:" >:</span> 2,
<span class="token string" >"name"</span><span class="token keyword keyword-:" >:</span> <span class="token string" >"@honzajavorek"</span>,
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
</code></pre><p>When it comes to developing the API server implementation, Dredd can read the API description document, learn about the expected behavior of the API, then make requests to that API and confirm that it has returned the expected responses:</p>
<pre><code>dredd api-description.yaml http://127.0.0.1:8000
</code></pre><p>Dredd ensures that the API implementation never gets out of sync with the specification so your team and your users can be sure that the essentials you promised in the documentation are always correct.</p>
<p>Moreover, since Dredd is an open source command-line tool installable from <a href="https://www.npmjs.com/package/dredd">npm</a>, it can be easily used as part of the API project's test suite and regularly used during development. It can be run on Continuous Integration such as <a href="https://travis-ci.org/">Travis CI</a> or <a href="https://jenkins.io/">Jenkins</a> to ensure that no changes to the project can break the contract given by the API description document.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_dredd_-differ-from-other-solutions-" id="how-does-_dredd_-differ-from-other-solutions-"></a><span class="text">How does <em>Dredd</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_dredd_-differ-from-other-solutions-">#</a></h2>
<p>I don't think there's a real competitor to what Dredd does except for <a href="https://blog.apisyouwonthate.com/weworks-api-specification-workflow-defec45cc037">custom-made solutions</a>.</p>
<p>It's important to understand that Dredd doesn't completely replace other automated tests. You should still unit test your code and have integration or end-to-end tests to cover various corner cases. Dredd helps you to ensure the essentials you documented and promised in your API description file will always work in the implementation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_dredd_-" id="why-did-you-develop-_dredd_-"></a><span class="text">Why did you develop <em>Dredd</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_dredd_-">#</a></h2>
<p>Dredd is a project developed by the company I work for, <a href="https://apiary.io/">Apiary</a> (acquired by Oracle in 2017). Apiary pioneered the market of API design tools and contributed a bunch of open source projects to the world on the way, such as <a href="https://dredd.org/">Dredd</a>, <a href="https://apiblueprint.org/">API Blueprint</a>, or <a href="https://apielements.org/">API Elements</a>. The original author of Dredd is <a href="https://twitter.com/ntmlk">Adam Kliment</a>. I took over the project in 2016, leading and maintaining it until today.</p>
<p>And why did we create Dredd? It clicks together with the <em>design-first</em> approach to developing APIs which we've been preaching for years.</p>
<p>Especially people focusing on the frontend and working on API-backed <a href="https://en.wikipedia.org/wiki/Single-page_application">SPAs</a> know the frustration experienced when they need to work with an API which has been designed without their needs in mind. It is a common problem, and I believe it's mostly this frustration which drives people to try <a href="https://en.wikipedia.org/wiki/GraphQL">GraphQL</a> instead of web APIs based on embracing <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol">HTTP</a> and some of the ideas behind the <a href="https://en.wikipedia.org/wiki/REST">REST architectural pattern</a>.</p>
<p>In Apiary we firmly believe that hard-to-use APIs come to this world mainly by being developed without any communication with their future users and by documentation being generated out of the final code instead of written with human beings in mind. The right way to develop APIs, according to us, is to design them first, to write the documentation first, and to communicate before any code gets written.</p>
<p>But if you're supposed to write down a document and only then start to write code, how do you ensure that the implementation is done according to that document? The answer is Dredd. Dredd is essential for the <em>design-first</em> approach. So to be able to preach <em>design-first</em>, we had to create Dredd.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We've introduced experimental <a href="https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.0.md">OpenAPI 3</a> support in Dredd and are currently working on making it a first-class citizen among the supported formats.</p>
<p>Except for that, I have many ideas on how to improve the developer experience with Dredd. The reporters could have better arranged and more useful output, for example.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_dredd_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_dredd_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Dredd</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_dredd_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>As I already mentioned, I can see people trying GraphQL as an alternative to web APIs. I believe there are <a href="https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/">good reasons</a> why those two should coexist in symbiosis instead of replacing each other. I think that the future of Dredd in such a world isn't in supporting GraphQL, but in doing more for the web APIs so that developing them feels easier.</p>
<p>Dredd could, for example, introduce a way to test not only the API server implementation but also the API client so the contract would be validated from both sides. Imagine Dredd could read the API description document, then test your frontend or mobile app requests, and in the end give you a verdict on whether they conformed to the API description.</p>
<p>One more thing I'd love to have in Dredd is testing scenarios, i.e., series of requests and responses.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Even if you don't build web APIs in particular, I believe the <em>design-first</em> approach is a general idea you can apply to any interface as a programmer, whether it is an interface of a library you're building or a user interface of your website.</p>
<p>My advice? Read <a href="http://tom.preston-werner.com/2010/08/23/readme-driven-development.html">Readme Driven Development</a> by Tom Preston-Werner and <a href="https://www.kennethreitz.org/essays/how-i-develop-things-and-why">How I Develop Things and Why</a> by Kenneth Reitz. Then embrace the concepts and build stuff other people will love to use.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You should interview Mila Votradovec (<a href="https://twitter.com/MilaVot/">@MilaVot</a>) from <a href="https://snyk.io/">Snyk</a>. The company is doing a great job allowing people to use the open source ecosystem of their language to the maximum while making it easy for mere mortals to pay attention to security.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for the interview! I'm happy to answer any questions about Dredd on <a href="https://twitter.com/honzajavorek">Twitter</a> or in Dredd's <a href="https://github.com/apiaryio/dredd/issues">issues</a>.</p>
<p>If by any chance anyone reading this happens to be interested in Python as well, consider visiting this year's edition of the <a href="https://cz.pycon.org/2019/">PyCon CZ</a> happening on June 14–16th. It's the first time it's in Ostrava, and the team has managed to secure a fantastic venue for the event - former steelworks and coal mines premises.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Honza! For me, it's an entirely new way of testing I hadn't considered before and I can see value in the approach. I'm sure other people will too.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://dredd.org/en/latest/">check out Dredd site</a> and <a href="https://github.com/apiaryio/dredd">Dredd on GitHub</a>.</blockquote>Managing css-in-js Components with Namespacesamanagingcssinjscomponentswithnamespaces2019-03-19t00:00:00z2019-03-19T00:00:00Z<p>I've settled on using <a href="https://emotion.sh/">Emotion</a> for styling my React applications. The API is close to <a href="https://www.styled-components.com/">styled-components</a> and especially Emotion 10 is filled with functionality. I use only a small part of it in my daily work.</p>
<p>As I've been working on the print graphics for <a href="https://react-finland.fi/">React Finland</a>, I've often come across the problem of maintaining different versions of designs in my files. I've found a way to solve this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#objects-as-namespaces-for-css-in-js-components" id="objects-as-namespaces-for-css-in-js-components"></a><span class="text">Objects as Namespaces for css-in-js Components</span><a class="header-anchor-select" href="https://survivejs.com/#objects-as-namespaces-for-css-in-js-components">#</a></h2>
<p>Let's say I have basic styled components for a speaker/attendee badge like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> Badge <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
layout<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
Base<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>article<span class="token template-string" ><span class="token string" >`...`</span></span><span class="token punctuation" >,</span>
Header<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>header<span class="token template-string" ><span class="token string" >`...`</span></span><span class="token punctuation" >,</span>
Content<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>main<span class="token template-string" ><span class="token string" >`...`</span></span><span class="token punctuation" >,</span>
Footer<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>footer<span class="token template-string" ><span class="token string" >`...`</span></span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-with" >with</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
Logo<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>img<span class="token punctuation" >:</span> <span class="token template-string" ><span class="token string" >`...`</span></span><span class="token punctuation" >,</span>
Name<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>span<span class="token template-string" ><span class="token string" >`...`</span></span><span class="token punctuation" >,</span>
Company<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>span<span class="token template-string" ><span class="token string" >`...`</span></span><span class="token punctuation" >,</span>
Twitter<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>span<span class="token template-string" ><span class="token string" >`...`</span></span>
Type<span class="token punctuation" >:</span> styled<span class="token punctuation" >.</span>span<span class="token template-string" ><span class="token string" >`...`</span></span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>I use <code>layout</code> and <code>with</code> to separate components by purpose. To turn this into a layout, you'll likely have something like below:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >StyledBadge</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
logoUrl<span class="token punctuation" >,</span>
company<span class="token punctuation" >,</span>
name<span class="token punctuation" >,</span>
twitter<span class="token punctuation" >,</span>
type<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Base<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Header<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Logo src<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>logoUrl<span class="token punctuation brackets-braces" >}</span> <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Header<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Content<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>name<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Company<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>company<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Company<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Twitter<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>twitter<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Twitter<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Content<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Footer<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Type<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>type<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Type<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Footer<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Base<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>I know the above looks a little verbose so what's the point?</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>In addition, you would have a way to connect to data somehow but that goes beyond this post.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-variants" id="implementing-variants"></a><span class="text">Implementing Variants</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-variants">#</a></h2>
<p>Let's say you are going to organize another conference. This time around you'll want to display the data in different order or even different data. The most basic change would be to change the layout:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >AnotherStyledBadge</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> logoUrl<span class="token punctuation" >,</span> name<span class="token punctuation" >,</span> type <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Base<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Header<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Logo src<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>logoUrl<span class="token punctuation brackets-braces" >}</span> <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Header<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Content<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>name<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Content<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Footer<span class="token operator" >></span>
<span class="token operator" ><</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Type<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>type<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Type<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Footer<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Badge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Base<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Given you might want stylistic changes as well, you'll need to adjust the components:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> AnotherBadge <span class="token operator" >=</span> <span class="token function" >merge</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> Badge<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-with" >with</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
Name<span class="token punctuation" >:</span> <span class="token function" >styled</span><span class="token punctuation brackets-parentheses" >(</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token punctuation brackets-parentheses" >)</span><span class="token template-string" ><span class="token string" >`...`</span></span>
Type <span class="token function" >styled</span><span class="token punctuation brackets-parentheses" >(</span>Badge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token punctuation brackets-parentheses" >)</span><span class="token template-string" ><span class="token string" >`...`</span></span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>It's important to note, that the <code>merge</code> operation you use here should likely retain the old definitions you have (i.e., not lose <code>Twitter</code> and others).</p>
<p>The component also needs tuning:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >AnotherStyledBadge</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> logoUrl<span class="token punctuation" >,</span> name<span class="token punctuation" >,</span> type <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Base<span class="token operator" >></span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Header<span class="token operator" >></span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Logo src<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>logoUrl<span class="token punctuation brackets-braces" >}</span> <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Header<span class="token operator" >></span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Content<span class="token operator" >></span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span>name<span class="token punctuation brackets-braces" >}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>AnotherBadge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Name<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Content<span class="token operator" >></span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Footer<span class="token operator" >></span>
<span class="token operator" ><</span>AnotherBadge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Type<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span>type<span class="token punctuation brackets-braces" >}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>AnotherBadge<span class="token punctuation" >.</span><span class="token keyword keyword-with" >with</span><span class="token punctuation" >.</span>Type<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Footer<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>AnotherBadge<span class="token punctuation" >.</span>layout<span class="token punctuation" >.</span>Base<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>The outcome is quite verbose and visually noisy. Since we already rely on a convention, likely there would be a way to fold this into a simpler structure that connects with the component definition (<code>AnotherBadge</code>). The above is what I consider a standard JSX solution. Perhaps the point would be write something like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >AnotherStyledBadge</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> logoUrl<span class="token punctuation" >,</span> name<span class="token punctuation" >,</span> type <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >create</span><span class="token punctuation brackets-parentheses" >(</span>AnotherBadge<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
Base<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
Header<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-with" >with</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Logo"</span><span class="token punctuation" >,</span> logoUrl<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
Content<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-with" >with</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Name"</span><span class="token punctuation" >,</span> name<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
Footer<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-with" >with</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Type"</span><span class="token punctuation" >,</span> type<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>The <code>create</code> function would use the structures to generate the React code. Although I haven't implemented one yet, I can see it's not the most complicated one to write. It's something to experiment with in the future as I develop more layouts.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><code>with</code> should support arrays of arrays as well as then you could support multiple content nodes within a container. Likely mixed usage (container + content) should be supported in some way too.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Although the outcome looks verbose without the <code>create</code> helper I imagined, it's flexible to modify and it doesn't pollute the namespace of your module. You can keep the hierarchy flatter if you prefer.</p>
<p>The technique can be combined with others. For example, you could consider developing basic primitives around a package like <a href="https://styled-system.com/">Styled System</a> and then combine those with a style management approach such as this.</p>
atomic-layout - Layout composition as a React component - Interview with Artem Zakharchenkoaatomiclayoutlayoutcompositionasareactcomponentinterviewwithartemzakharchenko2019-03-15t00:00:00z2019-03-15T00:00:00Z<p>Often layouting a web page is an afterthought. Put a <code>div</code> here and there, sprinkle some CSS, and call it done. Perhaps you are more advanced and use CSS Grids to figure out exact positioning.</p>
<p>What if there was an alternative way to achieve the same while having more power as a developer? That is something that <a href="https://twitter.com/kettanaito">Artem Zakharchenko</a> is exploring with <strong>atomic-layout</strong>, a layout solution designed for React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://pbs.twimg.com/profile_images/1105592812396007426/_LRKW9Gp_400x400.jpg" alt="Artem Zakharchenko" class="author" width="100" height="100" />
</span>
Hi! My name is Artem, and I am a Full-stack JavaScript developer from Ukraine. I have graduated a medical university and decided to switch my occupation to programming because it's something I enjoy doing since I was a kid.
</p>
<p>I'm grateful to find a job and turn my hobby into a full-time activity. That hasn't stopped me, however, from endeavoring into side projects and open source. Today I'd like to share with you one of such projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_atomic-layout_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_atomic-layout_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>atomic-layout</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_atomic-layout_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/kettanaito/atomic-layout">Atomic layout</a> is a React library that provides you with a separate layer responsible for spacial distribution for your layouts. The layer decouples components and spacing, which opens vast opportunities to reuse layout units, as they are no longer bound to some context via specific spacing properties.</p>
<p>Practically speaking, it gives you a fast and maintainable way of developing responsive layouts that share global layout settings and create a unified system.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_atomic-layout_-work-" id="how-does-_atomic-layout_-work-"></a><span class="text">How does <em>atomic-layout</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_atomic-layout_-work-">#</a></h2>
<p>It generates React components based on provided CSS Grid template areas and controls their spacial relation via props. It also supports a feature called <em>responsive props</em>, that allows applying prop values conditionally, based on a breakpoint.</p>
<p>I will demonstrate the workflow below, but we need to install the library first:</p>
<pre><code class="lang-bash"><span class="token function" >npm</span> <span class="token function" >install</span> atomic-layout
</code></pre>
<p>The current version of the library uses <code>styled-components</code>, so we need to install it too:</p>
<pre><code class="lang-bash"><span class="token function" >npm</span> <span class="token function" >install</span> styled-components
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>Would you like to use Atomic layout with another styling solution? <a href="https://github.com/kettanaito/atomic-layout/issues/57">Join the discussion!</a></blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#basic-example" id="basic-example"></a><span class="text">Basic example</span><a class="header-anchor-select" href="https://survivejs.com/#basic-example">#</a></h3>
<p>Let's say we want to create a simple <code>Header</code> component that consists of three areas: logo, menu, and actions. First, we define a verbose areas definition of our <code>Header</code>:</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> areas <span class="token operator" >=</span> <span class="token string" >"logo menu actions"</span><span class="token punctuation" >;</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>Areas definition uses pristine <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas"><code>grid-template-areas</code></a> syntax.</blockquote><p>That's all it takes to create a layout of three equally spaced areas positioned inline. Now we can provide this area string to the <code>Composition</code> component of the library:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Composition <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'atomic-layout'</span>
<span class="token comment" spellcheck="true" >// Layout areas definition</span>
<span class="token keyword keyword-const" >const</span> areas <span class="token operator" >=</span> <span class="token string" >'logo menu actions'</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Header</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Composition</span> <span class="token attr-name" >areas</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>areas<span class="token punctuation brackets-braces" >}</span></span> <span class="token attr-name" >gutter</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token number" >10</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> Logo<span class="token punctuation" >,</span> Menu<span class="token punctuation" >,</span> Actions <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span><span class="token operator" >></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Logo</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>img</span> <span class="token attr-name" >src</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>logo.png<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Logo</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >as</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>nav<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>ul</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span><span class="token operator" >...</span><span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>ul</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Actions</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>a</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>/login<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Log <span class="token keyword keyword-in" >in</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Actions</span><span class="token punctuation" >></span></span>
<span class="token operator" ><</span><span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Composition</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>After passing our areas to the <code>areas</code> prop of the composition, it exposes a function as its children. That function accepts generated area components associated with the respective CSS Grid areas.</p>
<p>There are plenty of <a href="https://redd.gitbook.io/atomic-layout/fundamentals/prop-aliases">props</a> to apply to the Composition and other components exported from the library to achieve the desired effect.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#responsive-layout" id="responsive-layout"></a><span class="text">Responsive layout</span><a class="header-anchor-select" href="https://survivejs.com/#responsive-layout">#</a></h3>
<p>Atomic layout is mobile-first and responsive by default which means that it has rich support of <strong>conditional rendering</strong> and <strong>responsive props application</strong>.</p>
<h4 class="header"><a class="header-anchor" href="https://survivejs.com/#conditional-rendering" id="conditional-rendering"></a><span class="text">Conditional rendering</span><a class="header-anchor-select" href="https://survivejs.com/#conditional-rendering">#</a></h4>
<p>To conditionally render one or multiple components, we can wrap them in the <code>Only</code> component, providing it with breakpoint constraints.</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Only <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"atomic-layout"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Disclaimer</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Only</span> <span class="token attr-name" >from</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sm<span class="token punctuation" >"</span></span> <span class="token attr-name" >to</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>lg<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>
Content displayed between small and large breakpoints<span class="token punctuation" >.</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Only</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p><code>Only</code> component supports <code>from</code>, <code>to</code> and <code>except</code> props, and any combination of those. You can pass breakpoint names as the values, or use an Object in case of a custom breakpoint.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can use <code>Only</code> component just as any other React component. For example, you can render it nested within generated layout areas!</blockquote><p>When using the <code>except</code> prop, the children will be rendered everywhere <em>except</em> the given breakpoints range:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Only <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'atomic-layout'</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Disclaimer</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Only</span> <span class="token attr-name" >except</span> <span class="token attr-name" >from</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sm<span class="token punctuation" >"</span></span> <span class="token attr-name" >to</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>lg<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token operator" >...</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Only</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://redd.gitbook.io/atomic-layout/components/only">Read more about the <code>Only</code> helper component.</a></blockquote><h4 class="header"><a class="header-anchor" href="https://survivejs.com/#responsive-props" id="responsive-props"></a><span class="text">Responsive props</span><a class="header-anchor-select" href="https://survivejs.com/#responsive-props">#</a></h4>
<p>Whenever a prop name is suffixed with a breakpoint name, its value is being applied only from that breakpoint and up. Take a look at how easy it is to have a per-breakpoint gap between the <code>Header</code>'s composites (areas):</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Composition <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'atomic-layout'</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Header</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Composition</span>
<span class="token attr-name" >areas</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation" >.</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >gutter</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token number" >10</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >gutterMd</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token number" >20</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >gutterLg</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token number" >30</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token operator" >...</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Composition</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>Responsive props respect overrides, which means that would be applied as follows:</p>
<ul>
<li><code>gutter={10}</code> on the <code>xs</code> breakpoint and up;</li>
<li><code>gutterMd={20}</code> on the <code>md</code> breakpoint and up;</li>
<li><code>gutterLg={30}</code> on the <code>lg</code> breakpoint and up.</li>
</ul>
<blockquote>
<p>You can <a href="https://redd.gitbook.io/atomic-layout/api/layout/configure#breakpoints">define custom breakpoints</a> and use them as the suffixes of your responsive props (i.e. <code>paddingRetina</code> or <code>alignItemsDesktop</code>).</p>
</blockquote>
<p>The <code>areas</code> prop can be responsive as well! By providing different areas definitions on different breakpoints, we can alter the position and presence of our layout areas with a single prop.</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-const" >const</span> areasMobile <span class="token operator" >=</span> <span class="token template-string" ><span class="token string" >`
logo hamburger
`</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> areasTablet <span class="token operator" >=</span> <span class="token template-string" ><span class="token string" >`
logo menu actions
`</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Header</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Composition</span>
<span class="token attr-name" >areas</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>areasMobile<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >areasMd</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>areasTablet<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >gutter</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token number" >10</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> Logo<span class="token punctuation" >,</span> Hamburger<span class="token punctuation" >,</span> Menu<span class="token punctuation" >,</span> Actions <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span><span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span><span class="token comment" spellcheck="true" >/**
* "Logo" is present in both area definitions,
* and is always rendered.
*/</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Logo</span> <span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token comment" spellcheck="true" >/**
* "Hamburger" is present in "areas", but missing
* in "areasMd". It's automatically rendered only
* on "xs" and "sm" breakpoints.
*/</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Hamburger</span> <span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-braces" >{</span><span class="token comment" spellcheck="true" >/**
* "Menu" and "Actions" are present in "areasMd",
* and are automatically rendered on "md" breakpoint
* and up.
*/</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Actions</span> <span class="token punctuation" >/></span></span>
<span class="token operator" ><</span><span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Composition</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Welcome declarative layouts: you describe what and when to render, and let Atomic layout handle media queries and conditions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_atomic-layout_-differ-from-other-solutions-" id="how-does-_atomic-layout_-differ-from-other-solutions-"></a><span class="text">How does <em>atomic-layout</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_atomic-layout_-differ-from-other-solutions-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#spacing-as-a-first-class-citizen" id="spacing-as-a-first-class-citizen"></a><span class="text">Spacing as a first-class citizen</span><a class="header-anchor-select" href="https://survivejs.com/#spacing-as-a-first-class-citizen">#</a></h3>
<p>Unlike other solutions, Atomic layout's purpose is to <em>distribute spacing</em>. Spacing effectively defines a layout composition. That's why there is no predefined <code>Col</code> or <code>Row</code> components, but a <code>Composition</code> that can be <strong>anything</strong> you want.</p>
<p>A grid is a composition of rows and columns, and a header may be a composition of logo and menu, and so on. There is no need to be specific when you are wielding the entire power of composition as a physical entity.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#mentality-shift" id="mentality-shift"></a><span class="text">Mentality shift</span><a class="header-anchor-select" href="https://survivejs.com/#mentality-shift">#</a></h3>
<p>One of my favorite differences is that Atomic layout teaches you to think in terms of composition, which you can configure and render. Since its counterparts compose any layout element, you can get consistent components declaration throughout the entire application. Having a predictable way how components are defined makes their maintenance superb.</p>
<p>Instead of deciding what CSS properties I need to create a layout, I started asking myself: "<em>What does this layout consist of? What is the relation between its counterparts?</em>"</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#encouraging-css-grid" id="encouraging-css-grid"></a><span class="text">Encouraging CSS Grid</span><a class="header-anchor-select" href="https://survivejs.com/#encouraging-css-grid">#</a></h3>
<p>We try to make an experience of working with Atomic layout a fun way to learn CSS Grid and gain the knowledge you could apply without any libraries whatsoever. To do so, we minimize the amount of library-specific transformations of the options you provide to your composition.</p>
<pre><code class="lang-jsx"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Composition</span>
<span class="token attr-name" >areas</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>header footer<span class="token punctuation" >"</span></span>
<span class="token attr-name" >templateCols</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1fr auto<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
</code></pre>
<pre><code class="lang-css"><span class="token selector" ><span class="token class" >.composition</span> </span><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >grid-template-areas</span><span class="token punctuation" >:</span> <span class="token string" >"header footer"</span><span class="token punctuation" >;</span>
<span class="token property" >grid-template-columns</span><span class="token punctuation" >:</span> <span class="token string" >"1fr auto"</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Verbose prop names and no value transformations grant almost 1-1 compatibility with the emitted CSS.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#fast" id="fast"></a><span class="text">Fast</span><a class="header-anchor-select" href="https://survivejs.com/#fast">#</a></h3>
<p>Needless to say that layout development becomes fast and efficient. You can develop production-ready components in a few minutes, without writing a single CSS line (if you want). And that involves responsive as well!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_atomic-layout_-" id="why-did-you-develop-_atomic-layout_-"></a><span class="text">Why did you develop <em>atomic-layout</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_atomic-layout_-">#</a></h2>
<p>During the work on one of the side projects, I've noticed that I repeat the same layout patterns over and over. So I've tried to abstract the logic that makes those patterns into a contextless layout unit.</p>
<p>My admiration of <a href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic design</a> came into play, and in no time I realized that atoms and molecules could be described using CSS Grid template areas. One proof-of-concept later Atomic layout has been open-sourced.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The roadmap is to refine the existing API, improve server-side rendering, and listen to the community to evolve this library. The mission is to provide a great experience when implementing layouts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_atomic-layout_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_atomic-layout_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>atomic-layout</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_atomic-layout_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope that CSS Grid will be getting more usage, as it's indeed a future of the web. There's also a lot of attention bound to TypeScript and GraphQL, and I believe they will be the main trends this year.</p>
<p>As of Atomic layout, I would love to see people creating layouts with it, and sharing their experience. I hope together we can improve our process, encourage us to use modern technologies, and teach developers to think in terms of composition.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I wish newcomers to find a balance between practical and theoretical knowledge and don't neglect to have a deeper understanding of a subject, even if it means spending more time. Don't be afraid to fail, and don't fear the unknown. In the end, programming is about challenging yourself every day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I suggest interviewing Honza Javorek (<a href="https://twitter.com/honzajavorek">@honzajavorek</a>), who is a person behind an API testing tool called <a href="https://github.com/apiaryio/dredd">Dredd</a>. I'm also excited to join his team full-time to work on that project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for the interview! I want to invite everybody to the upcoming <a href="https://react-finland.fi/">React Finland 2019</a>, where I will be giving a talk on Atomic layout. I will be glad to answer your questions there, or via <a href="https://twitter.com/kettanaito">Twitter</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Artem! At least for me, it is a refreshing new way to look at how to develop and compose layouts. You can learn more about the approach in the video below:</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/sx_jGuyhhhg" frameborder="0" allowfullscreen></iframe>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://github.com/kettanaito/atomic-layout">Check out Atomic layout on GitHub</a> and <a href="https://redd.gitbook.io/atomic-layout">read its documentation to grasp it better</a>.</blockquote>Pesto - A career accelerator for India’s top software engineering talent - Interview with Andrew Linfootapestoacareeracceleratorforindiastopsoftwareengineeringtalentinterviewwithandrewlinfoot2019-03-08t00:00:00z2019-03-08T00:00:00Z<p>One of the unique aspects of the internet is that it makes us all equal in a strange way. What it means is that collaboration is possible on a new level as we aren't restricted by our local communities anymore. The internet has led to changes in the way we work and also in the way we seek for opportunities.</p>
<p><a href="https://twitter.com/andrewlinfoot">Andrew Linfoot</a> runs a career accelerator called Pesto for the Indian market. To learn what he thinks about the topic, read on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://pbs.twimg.com/profile_images/982008082996674560/mKIHOlpe_400x400.jpg" alt="Andrew Linfoot" class="author" width="100" height="100" />
</span>
I have been working as a software engineer and living a nomadic lifestyle for the last eight years. I was born in the US, but I am a firm believer in the idea of global citizenship. I consider myself a citizen of the internet more than any one country. I feel the global tech community lives this ideology and I love being a part of it.
</p>
<p>I'm obsessed with building things, usually involving software and startups. Currently, I am making <a href="https://pesto.tech">Pesto</a>.</p>
<p>When I'm not building things, I enjoy adrenaline sports, traveling, meeting new people and immersing myself in cultures radically different than my own.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_pesto_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_pesto_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Pesto</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_pesto_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Pesto is a school for talented software engineers in developing countries. We brush up their tech skills, teach them soft skills for remote work and then help them get full-time remote jobs at international tech companies. Doing this gives them a foot in the door to international tech careers that would otherwise be inaccessible.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_pesto_-work-" id="how-does-_pesto_-work-"></a><span class="text">How does <em>Pesto</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_pesto_-work-">#</a></h2>
<ul>
<li>Engineers apply at <a href="https://apply.pesto.tech">apply.pesto.tech</a>.</li>
<li>If they are accepted, they fly to our training center in Delhi and train with my team and me for 12 weeks.</li>
<li>After training, we help introduce candidates to companies for interviews where they get significantly better opportunities than local markets (averaging a 6x increase in salary and much more interesting tech stacks).</li>
</ul>
<p>Our program is free up front. Students pay us via income share agreements (ISA). The approach allows us to provide insanely high-quality training and career support services, while still being accessible to people in India (where we currently operate).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_pesto_-differ-from-other-solutions-" id="how-does-_pesto_-differ-from-other-solutions-"></a><span class="text">How does <em>Pesto</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_pesto_-differ-from-other-solutions-">#</a></h2>
<p>There are other ISA based boot camps for learning to code (Lambda School being the most famous). However, these schools focus on teaching beginners to code from the ground up. We concentrate on upskilling experienced engineers.</p>
<p>Since our students typically have 1-5 years of work experience, our curriculum has a significant emphasis on soft skills. We teach students about cultural differences between the US and India, how to be better communicators, how to manage their time in a remote work environment, etc.</p>
<p>However, the unique thing about Pesto is the fact that the whole training program is designed to create a change in mindset. By the time students graduate, they have the confidence to believe that their career opportunities are unbounded and that they can participate as equals in the global tech community. The skills and connections are just icing on the cake.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-found-_pesto_-" id="why-did-you-found-_pesto_-"></a><span class="text">Why did you found <em>Pesto</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-found-_pesto_-">#</a></h2>
<p><em>The short version:</em> Equal opportunity in the global economy does not exist. Most people don’t even get a chance. Their potential is permanently capped just because of where they were born.</p>
<p>At Pesto, we are creating a world where access to education and remote work gives everyone equal access to opportunity, regardless of where they were born.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>The extended story:</strong> <a href="https://hackernoon.com/how-a-kid-from-san-francisco-ended-up-starting-a-school-in-india-a868606a6f0c">How a kid from San Francisco ended up starting a school in India</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>There are millions of brilliant people all over the world that are missing out on an opportunity only because of where they were born. We are on a mission to find these undervalued people and give them a chance to prove themselves. Step one: scale up in India. Step two: scale up globally.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_pesto_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_pesto_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Pesto</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_pesto_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>We believe that the future of work is distributed. When this becomes the norm, we want to be the access point for the world's talent. When everyone has equal access, humanity will unlock vast amounts of untapped talent.</p>
<p>In terms of tech: I'm a massive fan of React, GraphQL, and ReasonML. We use ReasonML for our internal tech at Pesto, and I can't imagine going back to writing vanilla JS. When all front end code is statically typed from your GraphQL API down, the developer experience is magical.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Get involved in the open source community. The open source community is unique because some of the most brilliant minds in the field put their entire life's body of work out in the open for free. No matter where you are in the world, you can learn from the best.</p>
<p>You can not only read their code, but you can see how they communicate and manage teams via Github issues and PRs. You can see how they think by following them on Twitter. You can email them, and you'd be surprised at how many will spend the time to talk to you. This kind of access is unimaginable in most fields.</p>
<p>Contributing to open source can be intimidating. If you aren't sure where to start, try some little documentation PRs like fixing a typo or a broken link in a readme. You can also check out <a href="https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github">this free course</a> by Kent C. Dodds.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I'm biased, but you should talk to <a href="https://medium.com/@arfatsalman">Arfat</a>, Pesto's Director of Education. He's a brilliant engineer and overall a super kind human.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you are interested in taking a bet on the undiscovered talent of the world, we'd love to have you involved with Pesto, either by interviewing/hiring some of our graduates or by sharing our story and helping to get the word out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Andrew! What he described, might as well trigger a change. The great thing is that initiatives like this allow more people reach up to their potential no matter where they are born.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://www.pesto.tech/">head to Pesto site</a>.</blockquote>Codecrumbs - Document a Codebase by Breadcrumbs - Interview with Bohdan Liashenkoacodecrumbsdocumentacodebasebybreadcrumbsinterviewwithbohdanliashenko2019-03-01t00:00:00z2019-03-01T00:00:00Z<p>Developers spend most of their time reading and understanding code. That said, not much has changed in the past decades in the way we do it. Perhaps the IDEs have become smarter but we still use roughly the same techniques as before. I prefer to jump around code and perform regular searches against it to understand how everything goes together.</p>
<p><a href="https://twitter.com/bliashenko">Bohdan Liashenko</a> thinks there's room for improvement. As a result he developed <a href="https://codecrumbs.io/">Codecrumbs</a>, a specific tool addressing the problem.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Bohdan is one of the speakers at <a href="https://react-finland.fi/">React Finland 2019</a>. The presentation will be available later in a video format.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/804af8ce541ac3ed54876cef0de9c19a?s=200" alt="Bohdan Liashenko" class="author" width="100" height="100" />
</span>
I am a frontend developer at 0+X, a consultancy firm based in Stockholm. I moved to Stockholm several years ago; originally I am from Kyiv, Ukraine. I created several well-accepted open source projects: <a href="https://github.com/Bogdan-Lyashenko/codecrumbs">codecrumbs</a> (a tool for learning a codebase), <a href="https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart">js2flowchart</a> (a library to convert code into flowchart), <a href="https://github.com/Bogdan-Lyashenko/Under-the-hood-ReactJS">Under the hood ReactJS</a> (a book which explains ins and outs of React).
</p>
<p>Currently, I study a lot about technical constraints and human-factor when it comes to building software products. I am passionate about software delivery processes and believe there is still room for improvements.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_codecrumbs_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_codecrumbs_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Codecrumbs</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_codecrumbs_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Every time I joined a project or started digging into an unknown source in the past, I caught myself thinking that I am just jumping mindlessly between files, often opening the same file several times realizing that I've already seen this or that I just saw this place.</p>
<p>I realized I needed a tool to mark essential places in a codebase; I wanted to automate the "pencil and paper" approach we all use when trying to understand the big picture of how things work together inside our code. That's why codecrumbs exists. Codecrumbs is a visual tool which helps to understand a codebase.</p>
<p>The name "codecrumbs" is derived from “code” and “breadcrumb”, since the main idea is to control visual state by writing down comments (breadcrumbs) in your big code-maze (a reference to "Hansel and Gretel" story).</p>
<p>Codecrumbs offers many features when it comes to learning a codebase:</p>
<ul>
<li><strong>Trail of breadcrumbs</strong> - a sequence of codecrumbs can be used to describe a data flow (e.g., user login or form submit, etc.)</li>
<li><strong>Dependency tree</strong> - generate a dependency tree for an entry point. You can select connections and see “what is imported” and “its implementation”.</li>
<li><strong>Flowchart</strong> - builds SVG flowchart of selected file code</li>
<li><strong>Multi-codebase integration</strong> - helps to study connections between several codebases (sub-modules).</li>
</ul>
<p>On top of that, there is multi-language support (JavaScript, TypeScript, Python, Java, etc.) and the ability to share your findings with others by handy export and import feature.</p>
<p><figure><img src="/da269e617ea20c2327fd79d5644a36cd.png" alt="User interface of Codecrumbs" class="" width="" height="" /><figcaption>User interface of Codecrumbs</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_codecrumbs_-work-" id="how-does-_codecrumbs_-work-"></a><span class="text">How does <em>Codecrumbs</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_codecrumbs_-work-">#</a></h2>
<p>Codecrumbs is a client-server application with communication via sockets. When you run <code>codecrumbs</code> command for a codebase, the server analyzes the project code and looks for comments containing “codecrumbs” (i.e., comments which starts with 'cc'), collects them and sends them to the client (running in a browser). The client imposes codecrumbs on the project files structure and draws an SVG image.</p>
<p>There is support for “live updates”, so the process of use may be as follows: on one monitor — your code editor, on the other — the browser tab with the “codecrumbs” client. Write a comment — the scheme is rebuilt on the fly. Everything is implemented with JavaScript: server is Node.js and the client is built with React and Redux.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_codecrumbs_-differ-from-other-solutions-" id="how-does-_codecrumbs_-differ-from-other-solutions-"></a><span class="text">How does <em>Codecrumbs</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_codecrumbs_-differ-from-other-solutions-">#</a></h2>
<p>There are no similar solutions. :) But if we take for example other tools for code documentation, they are either help to describe low-level code entries (functions signatures, classes APIs, etc.) or high-level ideas about code architecture without connection to the source code.</p>
<p>Having either alone is not enough - on the one hand, you miss the big picture, and on another hand you know big picture but can't map it on the actual source code.</p>
<p><em>Codecrumbs</em> is precisely in between - it glues together code lines and source files with abstractive architecture. You can understand how a particular feature works from the first glance, and if you need to fix something or add new behavior there, you already have all handles where to look for in the source code.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_codecrumbs_-" id="why-did-you-develop-_codecrumbs_-"></a><span class="text">Why did you develop <em>Codecrumbs</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_codecrumbs_-">#</a></h2>
<p>I was frustrated with how inefficient we are when it comes to maintaining a big codebase. Especially with legacy code. Especially when you just joined a new project and feel hopeless for the first few months until you get thoroughly familiar with a codebase.</p>
<p>According to the survey conducted by Stack Overflow last year, here's how we expect a newcomer to get up to speed with a codebase:</p>
<ul>
<li>30% less than a month</li>
<li>44.7% one to three months</li>
<li>17.4% three to six months</li>
</ul>
<p>I believe these numbers are ridiculous. Well, they are fair, but I think we can do better, I think we don't make enough effort to solve the problems related to learning existing source code, and I am trying to change that with <em>Codecrumbs</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Well, it's just a beginning.</p>
<p>Codecrumbs allows us to learn, document and explain a codebase much faster. Also, with Download & Upload feature it becomes super easy to collect and share your “investigation results” with others.</p>
<p>The ultimate goal is to have many case studies hosted at the <a href="https://codecrumbs.io">Codecrumbs site</a> so people can learn collaboratively with real-world examples.</p>
<p>More cool features are coming, stay tuned!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_codecrumbs_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_codecrumbs_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Codecrumbs</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_codecrumbs_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I can see new frameworks and libraries, or, even new languages (TypeScript, Elm, Reason, ClojureScript, Dart) being created all the time, to help developers to do the same thing — to write down application logic. But do we need that one more framework, which will help us to describe application logic a fraction better than we’ve been doing already?</p>
<p>Maybe we do, don’t get me wrong, I like constant improvements in existing frameworks, and I love new frameworks and tools being created, but, I don’t think we should spend all our energy and give all our attention only to that.</p>
<p>As an industry, we are too much obsessed with how do we write code; we want to make the writing process perfect, while the way how do we read code is left entirely behind.</p>
<p>We don’t write code in the vacuum, almost always we instead edit or extend existing codebase than adding new features on the blank page. I believe that Codecrumbs has potential to show an excellent example of what you can achieve being more aware of the entire state of your application and how you can use that knowledge to change your product delivery and influence the world of software development as a whole.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>The amount of technologies and "buzzwords" is overwhelming here, but try to be sober about that. In the end - you need to submit a form or show a popup. There are hundreds of ways to do so, pick the one you know, align it with team and release.</p>
<p>Make it work, make it fast, make it beautiful. We (mostly) don't do rocket-science, so there is no need to over-think minor problems. Apart from doing something useful, <strong>the primary requirement for the code you write is to be good for a change you will need to do tomorrow.</strong></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for the interview, that was fun. :D</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Bohdan! It's great for me to see solutions to appear in the space of maintenance as it feels underappreciated. We put a lot of effort into developing solutions for generating code but not so much into understanding it.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about Codecrumbs and to try it out, <a href="https://codecrumbs.io/">head to Codecrumbs site</a> and <a href="https://github.com/Bogdan-Lyashenko/codecrumbs">also see the project on GitHub</a>.</blockquote>packtracker.io - Webpack bundle analysis, for every commit - Interview with Jonathan D. Johnsonapacktrackeriowebpackbundleanalysisforeverycommitinterviewwithjonathandjohnson2019-02-22t00:00:00z2019-02-22T00:00:00Z<p>When using webpack to bundle your project, it's important to keep an eye on the output. <a href="https://survivejs.com/webpack/optimizing/build-analysis/">There are multiple tools for this purpose</a>. Now there's also a service.</p>
<p>In this interview with <a href="https://twitter.com/jondavidjohn">Jonathan D. Johnson</a>, you'll learn about <a href="https://packtracker.io/?utm_source=jster&utm_campaign=links&utm_medium=interview">packtracker.io</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/91f3c86d471f089ca2b3ec5093832ccb?s=200" alt="Jonathan D. Johnson" class="author" width="100" height="100" />
</span>
Loving my wife, my sons, and my work. Full stack developer building <a href="https://codeship.com">CodeShip</a> by day and <em>packtracker.io</em> by night, otherwise you can probably find me outside. 🧗🏻♂️🏕
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_packtracker-io_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_packtracker-io_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>packtracker.io</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_packtracker-io_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It is a tool to help teams using webpack bundling, monitor and analyze they're overall JavaScript and CSS footprint.</p>
<p>We report that information right in your GitHub pull requests, <strong>before</strong> they make it to your users. Ever accidentally added the whole <em>lodash</em> library when you meant to add a single helper? We'll catch that for you, and let you know your bundle size grew significantly right inside your GitHub pull requests.</p>
<p>Another primary feature is the ability to set asset budgets to help your team stay within configured limits. We'll fail any pull request that brings your assets outside those budgets.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_packtracker-io_-work-" id="how-does-_packtracker-io_-work-"></a><span class="text">How does <em>packtracker.io</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_packtracker-io_-work-">#</a></h2>
<ol>
<li><a href="https://packtracker.io/?utm_source=jster&utm_campaign=links&utm_medium=interview">You sign up and create a project</a></li>
<li><a href="https://github.com/packtracker/webpack-plugin">Install and configure our webpack plugin</a></li>
<li>We take care of the rest</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_packtracker-io_-differ-from-other-solutions-" id="how-does-_packtracker-io_-differ-from-other-solutions-"></a><span class="text">How does <em>packtracker.io</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_packtracker-io_-differ-from-other-solutions-">#</a></h2>
<p>No other solution provides historical tracking and out-of-the-box pull request reporting. By this I mean, you can analyze your bundle history over time, helping to quantify optimization efforts and prevent slow size creep over time.</p>
<p><figure><img src="/b97a629e8158b33521a87c1db99fc771.png" alt="Build status" class="" width="" height="" /><figcaption>Build status</figcaption></figure></p>
<p>We also allow you to introspect the makeup of every commit, allowing you to explore your bundle helping you to identify redundant chunk contents and large dependencies.</p>
<p><figure><img src="/5edd67ad3c8d8d0ab786f46a8edc1efd.png" alt="Bundle composition" class="" width="" height="" /><figcaption>Bundle composition</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_packtracker-io_-" id="why-did-you-develop-_packtracker-io_-"></a><span class="text">Why did you develop <em>packtracker.io</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_packtracker-io_-">#</a></h2>
<p>I saw a need! We were using webpack in my day job and quickly realized we had never audited our webpack output. After taking a look, it had gotten out of control, delivering megabytes of javascript and css to our users.</p>
<p>Using <em>packtracker.io</em>, we were able to quantify optimization efforts and trim our asset output way down. Day to day, <em>packtracker.io</em> helps us make sure we never get in that situation again.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I am looking forward to GitHub Actions! We currently have <a href="https://github.com/packtracker/github-action">a GitHub Action</a> developed that will significantly simplify the onboarding experience for our customers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_packtracker-io_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_packtracker-io_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>packtracker.io</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_packtracker-io_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>JavaScript is eating the world, and I don't see that changing. Even popular non-JavaScript platforms like Ruby on Rails will be adopting the webpack/npm ecosystem starting with 6.0. I think the future is bright for JavaScript developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Don't skim over JavaScript! Even if your primary web application is not written with JavaScript, take the time to dig in and learn the language. Don't assume you know it because it looks familiar; that's how people develop a negative view of the language.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Jonathan! I can definitely see the need for a service like <a href="https://packtracker.io/?utm_source=jster&utm_campaign=links&utm_medium=interview">packtracker.io</a>, and I hope people find it!</p>
Overmind - Frictionless State Management - Interview with Christian Alfoniaovermindfrictionlessstatemanagementinterviewwithchristianalfoni2019-02-15t00:00:00z2019-02-15T00:00:00Z<p>Although state management solutions like <a href="https://survivejs.com/blog/redux-interview/">Redux</a> have become the standard, at least with React, there's still room for innovation in the space.</p>
<p>Sometimes what happens is that technology becomes reinterpreted. When you can see the technology in context, you can also figure out what went right and what went wrong. It's this process that gives room for innovation.</p>
<p>In this interview, <a href="https://twitter.com/christianalfoni">Christian Alfoni</a> will tell us about a new state management solution - <a href="https://overmindjs.org/">Overmind</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/cerebral-interview/">I interviewed Christian earlier about Cerebral</a>, another state management solution. Consider Overmind as its spiritual successor.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-s" id="can-you-tell-a-bit-about-yourself-s"></a><span class="text">Can you tell a bit about yourself?s</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-s">#</a></h2>
<p><figure><img src="https://www.gravatar.com/avatar/60a5ce418250e26b42baef8ef7314f39?s=200"" alt="Christian Alfoni" class="author" width="100" height="100" /><figcaption>Christian Alfoni</figcaption></figure></p>
<p>I am a 35-year-old Norwegian developer who figured out coding was his big passion around 26. That said, I have spent many years face to face with customers, drinking coffee, and sometimes I miss that a lot. Everybody needs recognition in some form, and it just hits you harder when it is face to face.</p>
<p>As much as I love open source you rarely get a face to face recognition of creating value for someone. "thanks, I learned something from you", or "man, I enjoyed using this tool to solve someone else's problem" beats 10.000 stars on Github any day.</p>
<p>I have to admit I am at the airport with a delayed flight, got two beers in me and a bit of gin and tonic so I got a bit philosophical there. In terms of contributions, I have been sharing most of the stuff I have created. Sometimes bad ideas, other times, good ideas and often just iterating existing ideas to try to push them further.</p>
<p>What I mostly care about is state management. It is one of these challenging problems as your perspective on it is heavily affected by the types of apps you build. It is almost like speaking different languages at times. But where I have given my perspective is with <a href="https://www.cerebraljs.com">cerebraljs</a> and <a href="https://www.overmindjs.org">Overmind</a>. I have even contributed to the world of <a href="https://www.flutter.dev">flutter</a> with the <a href="https://pub.dev/packages/flutter_observable_state#-readme-tab-">flutter_observable_state</a> package.</p>
<p>I have also worked a lot on <a href="https://www.codesandbox.io">Codesandbox</a>, trying to wield the extreme requirement to state management there. My efforts there will increase over the Summer and looking forward to showing people how we can separate our concerns, lower the threshold of contributions, and have great insight into how the application works.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/codesandbox-interview/">Read the Codesandbox interview to learn more about the service.</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_overmind_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_overmind_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Overmind</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_overmind_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Overmind is a state management library. That said, it takes things a bit further and pushes you to conceptually and practically think of the <a href="https://medium.com/swlh/ui-as-an-implementation-detail-7fb9f952fb43">UI of the application as an implementation detail</a>. The components, no matter what framework, is just a powerful way to compose a UI.</p>
<p>That means Overmind can contain all the state, effects, and logic required to make your application work. Separating all your state management from the UI is of course not a new idea, we have been doing this for ages.</p>
<p>In this "components can do all world" I think it is crucial that someone states that even though components is an excellent UI composition tool, it is not necessarily an awesome state management tool. It can be a practical approach to keep those two things completely separate. At least that is my experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_overmind_-work-" id="how-does-_overmind_-work-"></a><span class="text">How does <em>Overmind</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_overmind_-work-">#</a></h2>
<p>There is one decision you have to make early on with a state management tool. Should it be based on immutability or mutation tracking?</p>
<p>In my experience immutability is a technically elegant solution. The problem is that the developer experience tends to suffer because of the amount of boilerplate code required. The issue of boilerplate applies from everything from defining a state change, to mapping state to components, to worrying about render performance if too much state is exposed, and so on.</p>
<p>There were two things we wanted to do with Overmind. The first thing was to have an api-less api. The other was to give a kick-ass experience using TypeScript. Api-less api means that we take as much advantage of the native API of JavaScript as possible, which results in you defining your state as simple objects, effects as simple methods, and logic as everyday functions. That said, Overmind is aware of these building blocks and enhances them.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>See <a href="https://itnext.io/updating-uis-value-comparison-vs-mutation-tracking-9f6fe912dd9a">Christian's article about mutation tracking</a> to learn more.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#state-as-plain-objects" id="state-as-plain-objects"></a><span class="text">State as Plain Objects</span><a class="header-anchor-select" href="https://survivejs.com/#state-as-plain-objects">#</a></h3>
<p>One of those enhancements is that even though you define your state as plain objects, arrays, strings, etc., it becomes reactive. That means when you change some state, Overmind can pinpoint what components are interested in that change, even though you use the native mutation api of JavaScript.</p>
<p><figure><img src="/54624f2eebbee0c0f44bf8ba40acbbf0.png" alt="devtools_state" class="" width="" height="" /><figcaption>devtools_state</figcaption></figure></p>
<p>It can do this because it uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">proxies</a>. What is essential to understand about this is that mutation and proxies allows for a far more optimized notification of what has changed compared to immutability.</p>
<p>With immutability, a change to a posts title in an array causes a change to the post itself and also the array with all the posts. That means any component looking at the array of posts will reconcile. Since UIs often consists of lists of things, this can often cause performance issues, as the whole list in the UI evaluates when only a single value changes but this is not the case with mutable proxied state.</p>
<p>The chosen approach also increases debugging experience as Overmind can tell you exactly what value you changed, and it knows the dependencies of the components.</p>
<p><figure><img src="/48601e409d51823b46debcce1dab68d1.png" alt="devtools_mutate" class="" width="" height="" /><figcaption>devtools_mutate</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#all-actions-have-the-same-first-argument" id="all-actions-have-the-same-first-argument"></a><span class="text">All Actions Have The Same First Argument</span><a class="header-anchor-select" href="https://survivejs.com/#all-actions-have-the-same-first-argument">#</a></h3>
<p>The second enhancement is that every function, or actions as we call them, will have the same first argument. This argument is injected and contains all the state, effects, and other actions of your application. That means there is no isolation. Holding your state, logic, and effects in isolation can cause more harm than good in my experience. Splitting up your domains and concerns should be a discipline, not forced upon you.</p>
<p>Who has ever created an application where you know from the start exactly how your state and logic should be split up and contained in the end? Does an application ever "end"? By allowing you to freely explore the domains of your application without forcing you to refactor is freedom. And you know, sometimes you do have cross-domain state access and logic.</p>
<p>There are other aspects I could go into related to Overmind, but I think those are the two most fun to bring up :)</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#example-of-the-api" id="example-of-the-api"></a><span class="text">Example of the API</span><a class="header-anchor-select" href="https://survivejs.com/#example-of-the-api">#</a></h3>
<p>Here is an example of how straight forward the API is. The mutations are locked to these actions. You also see how we put an <strong>effect</strong> abstraction around the actual fetching of the posts which is the essence of Overmind, API simplicity. To boot the devtools tracks everything that happens here, even the effect:</p>
<pre><code class="lang-js"><span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> loadPosts <span class="token operator" >=</span> <span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> state<span class="token punctuation" >,</span> effects <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
state<span class="token punctuation" >.</span>isLoadingPosts <span class="token operator" >=</span> <span class="token boolean" >true</span><span class="token punctuation" >;</span>
state<span class="token punctuation" >.</span>posts <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> effects<span class="token punctuation" >.</span>api<span class="token punctuation" >.</span><span class="token function" >getPosts</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
state<span class="token punctuation" >.</span>isLoadingPosts <span class="token operator" >=</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>Since we use proxies, we can also make sure that whatever state you expose to components you never worry about render performance. Whatever state is accessed by a component is tracked and will cause the component to render again, if changed.</p>
<p>With hooks in React you get a pretty rich API for exposing state and actions to your components:</p>
<pre><code class="lang-js"><span class="token keyword keyword-function" >function</span> <span class="token function" >MyComponent</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> state<span class="token punctuation" >,</span> actions <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token function" >useOvermind</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>actions<span class="token punctuation" >.</span>decrement<span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span><span class="token operator" >-</span><span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span>state<span class="token punctuation" >.</span>count<span class="token punctuation brackets-braces" >}</span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>actions<span class="token punctuation" >.</span>increment<span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span><span class="token operator" >+</span><span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_overmind_-differ-from-other-solutions-" id="how-does-_overmind_-differ-from-other-solutions-"></a><span class="text">How does <em>Overmind</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_overmind_-differ-from-other-solutions-">#</a></h2>
<p>You know, the two big solutions out there now is Redux and MobX/MobX-State-Tree. Where Overmind differs the most is that it is not just a state management solution, meaning it defines and changes state. It also manages effects.</p>
<p>If you think about it, it is quite insane how we keep importing all these generic tools directly into our code — locking ourselves to "the current technology". In practice, this might not be such a big deal, but from a coding principle, it is not a good practice.</p>
<p>For example, in Codesandbox, we have an API based on GraphQL. In a React component, we import <code>apollo-react</code> directly and query some sandboxes for the dashboard. While this is easy and straightforward, we just made React, Apollo and GraphQL a hard dependency of the Codesandbox application. That is not good.</p>
<p>If we rather created an effect API <code>server.getDashboardSandboxes()</code> we suddenly have no requirement to React, Apollo or GraphQL. All of them becomes an implementation detail. And this is what Overmind is pushing.</p>
<p>Your application is the state, effects, and the logic to manage them. The UI is an implementation detail, and the tools you use to allow the app to talk to the outside world is also an implementation detail. What this results in is logic that is "to the point".</p>
<p>All the naming is explicitly related to the domains of your application. You can change out the UI or run the same app on multiple environments, and you can change out any of the tools your application uses to talk to the outside world, without touching the application itself. It is just about separation of concerns really, but with a concept of effects, you know where and how to do that separation while gaining additional debugging information.</p>
<p><figure><img src="/dcdf7158efe88112c432a020e1bcaa76.png" alt="devtoos_effects" class="" width="" height="" /><figcaption>devtoos_effects</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#example-of-a-complex-action" id="example-of-a-complex-action"></a><span class="text">Example of a Complex Action</span><a class="header-anchor-select" href="https://survivejs.com/#example-of-a-complex-action">#</a></h3>
<p>When you need to work on complex logic like debounced search, composing actions together, etc. it can often be expressed better in a functional way. The great thing is that you can move between the default imperative actions and the functional API to your liking:</p>
<pre><code class="lang-js"><span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> search <span class="token operator" >=</span> <span class="token function" >pipe</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token function" >mutate</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> state <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> query<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
state<span class="token punctuation" >.</span>query <span class="token operator" >=</span> query<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token function" >filter</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> state <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> state<span class="token punctuation" >.</span>query<span class="token punctuation" >.</span>length <span class="token operator" >></span> <span class="token number" >2</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token function" >debounce</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >200</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token function" >mutate</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> state<span class="token punctuation" >,</span> effects <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
state<span class="token punctuation" >.</span>isSearching <span class="token operator" >=</span> <span class="token boolean" >true</span><span class="token punctuation" >;</span>
state<span class="token punctuation" >.</span>searchResult <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> effects<span class="token punctuation" >.</span>api<span class="token punctuation" >.</span><span class="token function" >search</span><span class="token punctuation brackets-parentheses" >(</span>
state<span class="token punctuation" >.</span>query
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
state<span class="token punctuation" >.</span>isSearching <span class="token operator" >=</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_overmind_-" id="why-did-you-develop-_overmind_-"></a><span class="text">Why did you develop <em>Overmind</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_overmind_-">#</a></h2>
<p>I learned so much developing <a href="https://cerebraljs.com/">cerebraljs</a>. I think it is still a compelling way to write declarative logic, managing state and effects, but there is no way it will ever have first-class support for TypeScript. The API is too "exotic" so TypeScript was one reason. The other purpose was this push back and forth about <a href="https://itnext.io/updating-uis-value-comparison-vs-mutation-tracking-9f6fe912dd9a">value comparison VS tracking mutations</a>.</p>
<p>You can think of Redux as value comparison and MobX as tracking mutations. The two approaches affect how much time you spend "boilerplating", time spent evaluating performance issues and also the API is affected by the two methods.</p>
<p>For me, it is only a question of which one of the approaches gives the best developer experience. I love the implementation of Redux. It is such a neat and straightforward idea, much because of immutability. That said, the resulting API with reducers, configuring the project, boilerplating actions, and <code>mapStateToProps</code> and being careful about what state you expose related to performance does not give the developer experience I want.</p>
<p>MobX is opposite. The implementation can seem magical, even "hackish" (although it is not) and you go against "mutation is the root of all evil". But the developer experience is impressive in comparison!</p>
<p>Overmind is taking experiences learned from Redux, MobX and Cerebral and tries to create the best possible developer experience possible based on my personal experience and the feedback from the Cerebral community and people testing Overmind during its development.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/mobx-interview/">Read the MobX interview to learn more about the state management solution.</a>. <a href="https://survivejs.com/blog/redux-interview/">See also the Redux interview with Dan Abramov.</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>For me? Well, I am going 100% freelance after summer and will spend my time with startups. I have been helping out quite a bit with Codeandbox since the beginning, and now that they are funded, I can help out even more. So really looking forward to sharing experiences building such an insanely complex application, both in terms of state management and UI composition :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_overmind_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_overmind_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Overmind</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_overmind_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>What I learned from Cerebral is to "lock the API" after the official release. We spent six months iterating the API of Overmind to see how "API less" and straight forward we could make it. Although you almost do no typing in your app, there is a lot of typing inside Overmind; this also took a lot of iterations to get right.</p>
<p>That does not mean there will not be new features added to Overmind, but we will not change out anything. If we ever get to a point where we want to do something radically different, that will be a new project.</p>
<p>So now that we have our API, we want to see what we can do with the concept of building apps without the UI. As previously mentioned, the idea is nothing new, and you can do it with all the before suggested solutions, but the tooling for doing so can be improved a lot. Even to the point where you do not have to fire up the browser to work on your state and logic. No more questions about where should my state and logic live? Inside a component? Where in the component tree?</p>
<p>You build your app, and then you attach a UI to that app. That does not mean component state, and logic is terrible; it is essential. But the state and logic you put in components will instead be related to building the actual UI, not defining how your application should work. This way of thinking has helped me, and I want to explore it even further. "UI as an implementation detail" :-)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Take courses and try to build something, even though it has been created before. There are no right and wrong. React is not wrong about their approach; Vue is not wrong about their approach, and Angular is not wrong about their approach. You can build most things with any one of them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You know, I have this guy I do a podcast with which built a library called <a href="https://github.com/omniscientjs/immstruct">Immstruct</a> I long time ago. It was quite popular and even mentioned related to React. What is interesting about this project is that it has many of the ideas popularized today, also related to components. Even though this project does not have broad usage now, it could be fun to see that these ideas still live out there in other types of implementations. :-)</p>
<p>So like, do the same interview as if Immstruct was released today, how they thought about web development then, the future, etc. Think it would be interesting :) Anyways, just an idea!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>You know, building tools and putting them out there is not easy. Cause it can often come out as "What you are doing is wrong, this is the way to do it". But that is not the intention. The intention is to share concepts and approaches to solving problems. We spend a lot of time in front of the computer trying to solve real problems for people, the more we iterate and share knowledge around tools, the more effective we become at solving these REAL problems.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Christian! I think Overmind is an excellent example of what can happen when you reinterpret what exists while taking the current constraints, or lack of them, into account. The fact that Proxies are now widely supported by the browsers has opened new doors for developers to explore.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://overmindjs.org/">head to Overmind site</a> and <a href="https://github.com/cerebral/overmind">check it out on GitHub</a>. Note that the solution works with React, Angular, and Vue.</blockquote>webpack-config-plugins - Best practices for webpack loader configurations - Interview with Jan Nicklasawebpackconfigpluginsbestpracticesforwebpackloaderconfigurationsinterviewwithjannicklas2019-01-18t00:00:00z2019-01-18T00:00:00Z<p>Managing webpack configuration can get tough especially if you try to track best practices and optimizations.</p>
<p>To address this problem, <a href="https://twitter.com/jantimon">Jan Nicklas</a> has come up with a solution in the form of webpack plugins.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/bb6300b595a0853eaefeb5f9c78a4b31?s=200" alt="Jan Nicklas" class="author" width="100" height="100" />
</span>
As a child, my dad showed QBasic to me, and I got fascinated by the fact that my computer would do everything I told it to - even task which I would not be able to do by myself.
</p>
<p>This fascination has never stopped, drove me into studying CS and somehow turned a hobby into my job. By now I have worked for nine years in Germany, Austria, Switzerland, and the US.</p>
<p>In 2015 I discovered that webpack would allow me to write an offline-capable web app, but I had to repeat some manual steps on every change. Because of this, I discovered <a href="https://github.com/jantimon/html-webpack-plugin">html-webpack-plugin</a> and eventually became its maintainer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_webpack-config-plugins_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_webpack-config-plugins_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>webpack-config-plugins</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_webpack-config-plugins_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Webpack provides already very powerful defaults, but to be flexible, it asks you to configure your loaders manually.</p>
<p><em>webpack-config-plugins</em> offers you multiple presets for your loader configuration to reduce the boilerplate part of setting up webpack.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_webpack-config-plugins_-work-" id="how-does-_webpack-config-plugins_-work-"></a><span class="text">How does <em>webpack-config-plugins</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_webpack-config-plugins_-work-">#</a></h2>
<p>During the plugin initialization phase, the <em>webpack-config-plugins</em> presets will inject additional loader and plugin configurations to your webpack configuration.</p>
<p>Webpack provides a <code>mode</code> option which allows you to optimize it for development or productions. <em>webpack-config-plugins</em> uses this mode to decide whether the presets should be optimized for development or production.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_webpack-config-plugins_-differ-from-other-solutions-" id="how-does-_webpack-config-plugins_-differ-from-other-solutions-"></a><span class="text">How does <em>webpack-config-plugins</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_webpack-config-plugins_-differ-from-other-solutions-">#</a></h2>
<p>There are already excellent boilerplates available. Unfortunately, most of them are opinionated and add another layer of configuration on top of webpack and lock you into that.</p>
<p><em>webpack-config-plugins</em> is an attempt to break these boilerplates into smaller pieces to allow you to pick the presets you need and to keep you in control but still let you update your loader configurations.</p>
<p>The configuration of a preset is the same you would write into your webpack config manually. Because of this, users should be able to understand or even modify presets quite easily.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_webpack-config-plugins_-" id="why-did-you-develop-_webpack-config-plugins_-"></a><span class="text">Why did you develop <em>webpack-config-plugins</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_webpack-config-plugins_-">#</a></h2>
<p>Our requirements often led us away from prebuilt boilerplates. However, after some month of development, it was costly to upgrade webpack, webpack plugins and webpack loaders because we didn't have tests for our webpack configurations.</p>
<p>The problem led to the idea of automatically tested webpack configurations to understand which loader or plugin upgrade would influence your build asset results or your build performance.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The <a href="https://travis-ci.org/namics/webpack-config-plugins/builds/471694940">automated performance tests</a> seem to provide a lot of value. However, the work on them has just begun, and there is more to be done.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Try to find a small design or app that YOU really would like to build and start.</p>
<p>Your first work doesn't need to be perfect, and you will learn a lot from your mistakes keep going until you reached your goal :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Even Stensberg (<strong>@evenstensberg</strong>) works hard at the <em>webpack-cli</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jan! I think packaging webpack best practices into plugins is a worthwhile idea. The approach is flexible enough to let users pick only the presets they find valuable while maintaining the rest on their own.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://github.com/namics/webpack-config-plugins">Check out webpack-config-plugins on GitHub to learn more!</a> See also <a href="https://webpack-config-plugins.js.org/">the online app that helps you to choose the right presets</a>.</blockquote>SurviveJS - Summary of 2018asurvivejssummaryof20182019-01-03t00:00:00z2019-01-03T00:00:00Z<p>2018 was mostly a consulting year for me. I also did travel within Europe and discovered countries such as Croatia and Armenia. It was my first year as a conference organizer as I helped to set up two conferences in Helsinki, Finland. Both were well received, and there's more to come. It may evolve into a business direction of its own.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#consulting" id="consulting"></a><span class="text">Consulting</span><a class="header-anchor-select" href="https://survivejs.com/#consulting">#</a></h2>
<p>My main clients in 2018 were eBay (Berlin) and Kleiner Perkins. The former case was a continuation to training performed in 2017, and I spent an entire month in Berlin with the client. The Kleiner Perkins case was more involved than the eBay one, and I dedicated most of the year for it.</p>
<p>The starting point for the case was <a href="https://reactabular.js.org">Reactabular</a>, a table framework for React I had developed earlier. Given I was too busy with the eBay case when this one popped up, I handed it to <a href="https://okonet.ru/">Andrey Okonetchikov</a>, a good developer friend of mine in Vienna. Once I came back from Berlin, we spent the remainder of the year on the client project, and we work nicely together by now.</p>
<p>The cases were technically demanding, and I learned a lot in the process. I see now why TypeScript is becoming the mainstream option for larger scale projects. I also appreciate the component driven development approach more. Even though building a style guide requires effort, it can have severe payoffs as you don't end up re-invent the wheel again and again.</p>
<p>Outside of this work, I did GraphQL related development for my conferences to make them easier to run. I saw the light with css-in-js finally. Especially the next generation of the libraries, including solutions like <a href="https://www.npmjs.com/package/linaria">linaria</a> and <a href="https://www.npmjs.com/package/astroturf">astroturf</a>, seems promising as it avoids the runtime cost generally accepted with css-in-js.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#publishing" id="publishing"></a><span class="text">Publishing</span><a class="header-anchor-select" href="https://survivejs.com/#publishing">#</a></h2>
<p>I didn't have as much time to focus on publishing as on earlier years. The blog grew by thirty posts, most of which were interviews. I'll continue on the interviews as I feel it's an excellent way to highlight ideas that might otherwise go unnoticed.</p>
<p><a href="https://survivejs.com/webpack/">The webpack book</a> received updates for webpack 4 and <a href="https://survivejs.com/maintenance/">the maintenance book</a> improved. There's still plenty of improvements to be made.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#public-appearances" id="public-appearances"></a><span class="text">Public Appearances</span><a class="header-anchor-select" href="https://survivejs.com/#public-appearances">#</a></h2>
<p>I visited several conferences during the year and even spoke in a few. The highlights for me include <a href="https://survivejs.com/blog/agentconf-2018/">AgentConf</a>, <a href="https://survivejs.com/blog/webexpo-2018/">WebExpo</a>, <a href="https://survivejs.com/blog/webcampzg-2018/">WebCamp Zagreb</a>, <a href="https://survivejs.com/blog/concat-2018/">Concat</a>, <a href="https://survivejs.com/blog/scriptconf-2018/">ScriptConf</a>, and <a href="https://survivejs.com/blog/halfstack-2018/">Halfstack London</a>. I also visited JIMDO at Hamburg, <a href="https://survivejs.com/blog/webpack-in-munich-may-2018/">spent some webpack time in Munich</a>, checked out YGLF in Kiev, saw ReactiveConf in Prague, went to JSCamp in Barcelona, and finally spoke in JSConf Armenia. I was one of the hosts for React Finland 2018 and also helped a lot with GraphQL Finland 2018.</p>
<p>That's enough for one year, and I hope to travel less in 2019.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#react-finland-2018-24-26-4-2018-helsinki" id="react-finland-2018-24-26-4-2018-helsinki"></a><span class="text">React Finland 2018 - 24-26.4.2018, Helsinki</span><a class="header-anchor-select" href="https://survivejs.com/#react-finland-2018-24-26-4-2018-helsinki">#</a></h2>
<p><a href="https://react-finland.fi/">React Finland</a> was the first trial of fire for the people organizing it. <a href="https://medium.com/react-finland/react-finland-2018-lessons-learned-754a5f29067c">The event was a great success</a> and now we are looking forward to the next edition held at the same dates in 2019. We've begun early bird sales and refined the format further. It's still three days and single track but this time around we took the idea of themed sessions and went all-in with it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#graphql-finland-2018-18-19-10-2018-helsinki" id="graphql-finland-2018-18-19-10-2018-helsinki"></a><span class="text">GraphQL Finland 2018 - 18-19.10.2018, Helsinki</span><a class="header-anchor-select" href="https://survivejs.com/#graphql-finland-2018-18-19-10-2018-helsinki">#</a></h2>
<p>Encouraged by the success of React Finland, we decided to organize a GraphQL themed one in the form of <a href="https://graphql-finland.fi/">GraphQL Finland</a>. The target of the conference was to have a vendor-neutral, international conference and I feel <a href="https://medium.com/graphql-finland/summary-of-graphql-finland-2018-a769460ebfdd">we reached this goal</a>. We took some of the learnings for the first conference and then proceeded with the second one. Again, it looks like there's going to be a second edition in store.</p>
<p>Organizing both events gave me insight on the other side and increased my appreciation for people running events. It's a great exercise in logistics, and it takes a lot of effort to pull off an event. During this process, I've developed tooling to support these ventures, and I expect I'll do further related work this year.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#business" id="business"></a><span class="text">Business</span><a class="header-anchor-select" href="https://survivejs.com/#business">#</a></h2>
<p>Business-wise I'm in a good position for 2019. The new event direction is promising, and plenty of work awaits even if client work doesn't become available. At least for the time being, I'll try to avoid cases with full-time commitment as it makes it tricky to find the energy and time required by writing.</p>
<p>That said, I'll remain open to consulting and coaching style work where I can help an organization to reach their technical goals or to improve the way they work. As in 2018, I am open to collaboration, and if there's something that goes beyond me, I will tap into my network to find the best fit for the case.</p>
<p>I hope to get new book versions out and even reach new editions on some. Before starting something new, I would prefer to have three solid books out there. Likely this will lead to some form of branching again where one book becomes two when it's too big to maintain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though 2018 didn't turn out as I expected, I feel it was a good year still. I am particularly happy that the conferences I helped to organize turned out well. I also gained plenty of expertise which will come handy in 2019. I have a stronger understanding of the stack, and I can see where the world of web development is heading. We are living in exciting times.</p>
webpack-plugin-serve - A Development Server in a webpack Plugin - Interview with Andrew Powellawebpackpluginserveadevelopmentserverinawebpackplugininterviewwithandrewpowell2018-12-13t00:00:00z2018-12-13T00:00:00Z<p>Usually, when you use webpack, you also have to set up its development server as well. Traditionally doing this hasn't been trivial and has required a certain amount of expertise. That is one of the reasons why I wrote <a href="https://survivejs.com/webpack/">the webpack book</a> available on this site.</p>
<p>To learn about an alternative approach, I am interviewing <a href="https://twitter.com/shellscape">Andrew Powell</a>, the developer behind <em>webpack-plugin-serve</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/f738f26dd1bba7ab3cf9f971ffed5cd0?s=200" alt="Andrew Powell" class="author" width="100" height="100" />
</span>
I reside in the U.S., in the great state of <a href="https://www.reddit.com/r/FloridaMan/">Florida Man</a>, have been a remote developer for ten years, and am pretty passionate about Fishing and Fishery + Ocean Conservation. There's a good chance I'm on a boat as you're reading this.
</p>
<p>On the <a href="https://media1.tenor.com/images/38116553c1ba1b9f0e4fbc7673b22622/tenor.gif">nerdy</a> side of things, I love me some Team Fortress Classic, have owned an N64 for forever, and my focus these days is squarely on Node.js for Backend and DevOps.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_webpack-plugin-serve_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_webpack-plugin-serve_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>webpack-plugin-serve</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_webpack-plugin-serve_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>I'd wager the conversation would go something like this;</p>
<p><strong>Sean Connery</strong>: What in the bloody hell is a webpack-plugin-serve?</p>
<p><strong>Me</strong>: Mr. Connery, you're drunk again. Relax. You know webpack, and how Webpack has plugins to do all kinds of different things right?</p>
<p><strong>Sean Connery</strong>: I love me some bundles. Pass the Scotch.</p>
<p><strong>Me</strong>: Right. So to test your bundles on your machine, you need to run a local web server. Something like Express, Koa, or Python's SimpleHTTPServer would do the trick if you just needed something basic.</p>
<p><strong>Sean Connery</strong>: Pythons! Going to get my Walther PPK, will dispatch them with haste. BRB.</p>
<p><strong>Me</strong>: <facepalm> Moving on. Now, if you didn't have to spin up your server and take care of all the setup so the server would know where your bundle is and which files to serve, for each bundle you work on, wouldn't that be swell?</p>
<p><strong>Sean Connery</strong>: I am quite swole, yes.</p>
<p><strong>Me</strong>: So that's where this plugin comes in. It'll create a web server that stays running for the duration of the webpack process and goes away once the build process has been ended. Leveraging webpack's <code>watch</code> option keeps the process running, so the server doesn't have to.</p>
<p><strong>Sean Connery</strong>: This conversation is sobering.</p>
<p><strong>Me</strong>: Indeed, mind-blowing. And to top it all off, there's no new CLI to learn, no avalanche of CLI flags to understand, and you can pretty much mold it to your environment's needs.</p>
<p><strong>Sean Connery</strong>:</p>
<p><figure><img src="/7fb8a52acf12da518402baba73955361.jpg" alt="" class="" width="" height="" /><figcaption></figcaption></figure></p>
<p><strong>Me</strong>: Right?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_webpack-plugin-serve_-work-" id="how-does-_webpack-plugin-serve_-work-"></a><span class="text">How does <em>webpack-plugin-serve</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_webpack-plugin-serve_-work-">#</a></h2>
<p><em>webpack-plugin-serve</em> is a self-contained development server triggered by a webpack build and part of the webpack process. Users must add an instance of the plugin to their webpack configuration. A configuration might look something like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> WebpackPluginServe <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'webpack-plugin-serve'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> options <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> <span class="token operator" >...</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// an example entry definition</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >'app.js'</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// important: this is where the magic happens in the browser</span>
<span class="token string" >'webpack-plugin-serve/client'</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token operator" >...</span>
plugins<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token keyword keyword-new" >new</span> <span class="token class-name" >WebpackPluginServe</span><span class="token punctuation brackets-parentheses" >(</span>options<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// important: webpack and the server</span>
<span class="token comment" spellcheck="true" >// will continue to run in watch mode</span>
watch<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>With that, we're leveraging quite a bit of 3rd party packages to make it all work:</p>
<ol>
<li>When a webpack build is initiated, the plugin sets itself up. That includes a <a href="https://koajs.com">Koa</a> application, middleware is set up, and a few other static goodies that need to be ready to go down the line.</li>
<li>Once a build starts, the plugin leaps into action. A web server is spun up and attached to the Koa application, a <a href="https://github.com/websockets/ws">WebSocket server</a> instance is connected to the web server, and the plugin begins listening to the compiler instance for notification of a refreshed build.</li>
<li>If <strong>Hot Module Replacement</strong> is enabled, it'll communicate changes via WebSocket to the client/browser, and you'll see changes based on the options passed to the plugin.</li>
</ol>
<p>There are different ways to configure and use the server, and we've <a href="https://github.com/shellscape/webpack-plugin-serve/tree/master/recipes">prepared a few recipes</a> so it's faster to get started, and we're keen to add more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_webpack-plugin-serve_-differ-from-other-solutions-" id="how-does-_webpack-plugin-serve_-differ-from-other-solutions-"></a><span class="text">How does <em>webpack-plugin-serve</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_webpack-plugin-serve_-differ-from-other-solutions-">#</a></h2>
<p>First and foremost, it's a plugin. Before starting development, we searched quite a bit to try and find a pre-existing, similar solution and we believe this is a novel approach for Webpack. As a plugin, it doesn't have the learning curve of a separate Command Line Interface, and there are no subsets of flags to learn or understand to use it.</p>
<p>Plugins are one of the first things that new Webpack users learn about - a perfect entrypoint for a bolt-on development server. And by leveraging the compiler directly, the server can offload responsibilities, like file watching, to the compiler and can avoid reinventing the wheel, thus reducing complexity.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#websockets-without-a-second-server" id="websockets-without-a-second-server"></a><span class="text">WebSockets without a Second Server</span><a class="header-anchor-select" href="https://survivejs.com/#websockets-without-a-second-server">#</a></h3>
<p>Just as with webpack-serve, we chose to use WebSockets for server-client communication (the magic that enables Hot Module Replacement instructions in the client/browser). Unlike webpack-serve, we were able to leverage a new "serverless" WebSocket server implementation.</p>
<p>We learned from <em>webpack-serve</em> that while the intention behind a secondary WebSocket server was good, it increased complexity and issues with minimal benefit.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#simpler-usage-due-to-simpler-architecture" id="simpler-usage-due-to-simpler-architecture"></a><span class="text">Simpler Usage Due to Simpler Architecture</span><a class="header-anchor-select" href="https://survivejs.com/#simpler-usage-due-to-simpler-architecture">#</a></h3>
<p>We also took the approach of building in support for the most popular feature sets of the other two development server options. Only this time around, there's no getting fancy with it:</p>
<ul>
<li>User-defined and user-ordered middleware is available, though vastly simplified as compared to <em>webpack-serve</em></li>
<li>Features like HTML History API Fallback, Proxying, and Compression have support baked in, though we differ in that options are passed straight through to the underlying dependencies. That makes use and documentation much easier for the end user, as there's no intermediate layer to have to understand.</li>
<li>Useful overlays for errors and warnings and progress are included out of the box, and were developed using a somewhat-standardized approach, and have a sexy, uniform look and feel for a consistent experience.</li>
</ul>
<p>I'd also argue that this approach is far cleaner than the others that preceded it. We've given a lot of consideration to how the feature set might be expanded and have put an architecture in place that should allow for new features to be supported without adding the kind of complexity that cripples maintainability. We learned quite a bit from the shortcomings of both <em>webpack-dev-server</em> and <em>webpack-serve</em> and made an effort to improve upon them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_webpack-plugin-serve_-" id="why-did-you-develop-_webpack-plugin-serve_-"></a><span class="text">Why did you develop <em>webpack-plugin-serve</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_webpack-plugin-serve_-">#</a></h2>
<p>After parting ways with the webpack org, I took up an interest in Rollup. Partly because of requirements for a new professional position, somewhat because I've always been fascinated by Rollup's approach, and partly because I wanted to continue contributing to the bundler space.</p>
<p>When I talked to those folks about joining on, we identified a few needs for the project. One of them happened to be a full-featured, robust, project-supported development server. And so I went about researching what already existed for Rollup and stumbled upon <a href="https://github.com/thgh/rollup-plugin-serve">rollup-plugin-serve</a>.</p>
<p>Full credit where credit is due - I hadn't considered that a dev server could be self-contained in a plugin until I ran across rollup-plugin-serve. It is/was a brilliant concept.</p>
<p>While still researching how I wanted to go about a Rollup development server, I was approached by a cadre of talented Brazillian developers (<strong>@matheus1lva</strong>, <strong>@sseraphini</strong>) who were bummed about webpack's decision to shutter <em>webpack-serve</em>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#plugin-based-approach-for-webpack" id="plugin-based-approach-for-webpack"></a><span class="text">Plugin Based Approach for webpack</span><a class="header-anchor-select" href="https://survivejs.com/#plugin-based-approach-for-webpack">#</a></h3>
<p>Their idea was to, at the least, fork and maintain <em>webpack-serve</em>. For Matheus and Sibelius, <em>webpack-serve</em> was a better choice than <em>webpack-dev-server</em>, despite its own set of quirks. And so they asked me if I'd like to help with this new effort.</p>
<p>At that point, I didn't have much interest in doubling back to webpack, given my new direction of focus. But after discussions, the idea quickly emerged that this could be a platform to launch a standard experience for <em>many</em> bundlers, not just restricted to webpack. And at that point, I was hooked.</p>
<p>Targeting webpack was the most logical starting point. I had accumulated a lot of knowledge about how a server should and shouldn't interact with webpack compilers and bundles by maintaining <em>webpack-dev-server</em> and authoring <em>webpack-serve</em>.</p>
<p>Between that and the real-world, day-to-day user perspective that Matheus and Sibelius were able to provide, we were able to create something great. Much of the plugin is just "plumbing," but it's how that plumbing is arranged that makes this project a stand-out in my mind.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Concerning this space, we're abstracting the codebase for the plugin into <a href="https://github.com/shellscape/bundler-serve">bundler-serve</a>, which will act as a platform for bundler development servers.</p>
<p>Matheus and I have already started the abstraction work, and we'll be targeting Rollup in the coming weeks as the first project to bind to the new platform. Eventually, <em>webpack-plugin-serve</em> will use webpack-specific bindings to <em>bundler-serve</em> as well. It's an ambitious plan, but I feel we've positioned ourselves nicely for a smooth path forward.</p>
<p>Outside of the dev-server and bundler realm I have a giant list of npm modules that I'd like to release, for which there aren't existing or effective alternatives (<strong>@sindresorhus</strong> is my npm hero). And I'm going to continue to look to help out existing projects who need maintainers. <em>markdown-toc</em> is queued up shortly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_webpack-plugin-serve_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_webpack-plugin-serve_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>webpack-plugin-serve</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_webpack-plugin-serve_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I can see us adding more features, or developing the modules to provide pass-through features, as use-cases arise. The Node server space is so rich in functionality that we should be able to expand it quickly - or most importantly - provide excellent direction for how users can apply needed functionality, easily.</p>
<p>Aside from that, the stack is pretty solid. I'm sure the webpack userbase will surprise us with scenarios we haven't considered - they always do.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#predictions-are-difficult" id="predictions-are-difficult"></a><span class="text">Predictions Are Difficult</span><a class="header-anchor-select" href="https://survivejs.com/#predictions-are-difficult">#</a></h3>
<p>As for web development, making bold predictions tend to be little more than hot takes. The "How to stay relevant in N years" trend on Twitter is evidence of that. And I've been awful at making predictions - I thought Twitter was a fad, I thought MySpace would always own Facebook, I passed on Bitcoin at $100US.</p>
<p>If I had to make a somewhat educated guess, I would say that the rise of ES Modules will start to take off in 2019, and tools like Rollup will take more substantial roles, while tools like webpack will begin to be considered "legacy".</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-rise-of-a-new-generation-of-bundlers" id="the-rise-of-a-new-generation-of-bundlers"></a><span class="text">The Rise of a New Generation of Bundlers</span><a class="header-anchor-select" href="https://survivejs.com/#the-rise-of-a-new-generation-of-bundlers">#</a></h3>
<p>You can already see some evidence in that with the rise of projects like Fastpack and Parcel, and the continued, steady increase in popularity in Rollup. I also believe 2019 will be the year of GraphQL. While 2018 saw GraphQL gain wide acceptance, I see enough to suggest that it's going to spread like wildfire.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pnpm-nestjs-vue-js" id="pnpm-nestjs-vue-js"></a><span class="text">pnpm, NestJS, Vue.js</span><a class="header-anchor-select" href="https://survivejs.com/#pnpm-nestjs-vue-js">#</a></h3>
<p>I could also see projects like pnpm gaining a wider userbase, and influencing npm proper, just as Yarn has. NestJS is something to take a good look at, and I wouldn't be surprised if Vue.js made a more significant dent in the next year.</p>
<p>Hopefully, that was sufficiently vague and will age well :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Man, I started in 1996, and the path forward is so much different now. The way you take does a lot to influence how you move forward, and starting now would put me on a much different path.</p>
<p>My path took me from platform/system development to (what we now call) full-stack to the front end to back end / devops. I'd that starting now is probably daunting. What you need to know these days as a front-end developer is staggering, and a bit ludicrous.</p>
<p>So strictly for folks <em>starting fresh</em>:</p>
<ul>
<li>Ignore the trends. Focus on established tech to get up to speed. Trends change daily, established tech sticks around.</li>
<li>Find a good source of learning, and stick with it. Back in the day, my source was <em>HTMLGoodies</em> and I still have a binder full of printouts (because nostalgia) that helped me to get going. Try to avoid a short attention span on information sources. That'll provide some consistency and continuity. Folks like <a href="https://wesbos.com/">Wes Bos</a> genuinely care about teaching the people they're making content for.</li>
<li>Choose a focus, don't try to do it all at once. There are legitimate geniuses out there, but I'm not one of them. It took me many moons to accumulate the bit of knowledge I have, and I did that by focusing, learning, and refocusing when I felt I had reached proficiency.</li>
<li>Avoid "thought leaders" and anyone who calls themselves one. These folks are prolific on social media, and just like talking heads, they want to keep your mind spinning and stay in the forefront. They won't help you gain traction, but they will keep you context shifting.</li>
<li>Start with the basics. If you're getting into JavaScript, really learn the basics first. Don't dive straight into frameworks like React, Vue, or Angular. The same goes for all languages.</li>
<li>Adopt a code style. Your preferences will evolve, but it's good to use established patterns to get started.</li>
<li>Learn <em>how</em> and <em>why</em> things work. When you understand the underpinnings, debugging becomes a touch less painful.</li>
</ul>
<p>So those are my truths. There's no possible way they're truths for everyone, instead of lessons I've learned over time. If they help someone out, that's great!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><strong>@matheus1lva</strong>! Brazil is producing some notable talent in engineering and JavaScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>We're just a few devs hoping to provide a better experience for everyone and appreciate folks spreading the word about it. Please don't hesitate to open an issue or hit us up on Twitter.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Andrew! It feels like <em>webpack-plugin-serve</em> fits a niche in the ecosystem. I like particularly the fact that the underlying architecture will enable collaboration across different bundlers.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://github.com/shellscape/webpack-plugin-serve">check out <em>webpack-plugin-serve</em> in GitHub</a>.</blockquote>React Union - React for CMSs and Portals - Interview with Tomáš Konrádyareactunionreactforcmssandportalsinterviewwithtomaskonrady2018-12-02t00:00:00z2018-12-02T00:00:00Z<p>React has uses beyond application development. One of the perhaps surprising use cases is to integrate it within a Content Management System (CMS) such as WordPress.</p>
<p>To get a better idea of how this could work out, I am interviewing <a href="https://twitter.com/konnnyy">Tomáš Konrády</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/db0a1034827780a9e20cc4f50cb604a8?s=200" alt="Tomáš Konrády" class="author" width="100" height="100" />
</span>
I am frontend developer at <a href="https://lundegaard.eu">Lundegaard</a> in Prague, living in Hradec Králové. Recently I have started to fell in love with open-source and the Ramda library. The result of that is a few projects.
</p>
<p>First of them is the <a href="https://github.com/tommmyy/ramda-extesion">ramda-extension</a> where our core team of Ramdists created point-free utility functions composed with only Ramda functions. Second open-source project is a <a href="https://github.com/lundegaard/react-union">React Union</a>, the topic of this interview.</p>
<p>In my spare time, I either draw, play a guitar or exercise with a kettlebell.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_react-union_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_react-union_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>React Union</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_react-union_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Purpose of the React Union project is to help with developing React applications that are situated in JavaScript unfriendly environments. What do I mean by these? For us, in Lundegaard, it is a Java CMS backend. For others, it can be any non-JavaScript CMS such as WordPress or Drupal.</p>
<p>React Union project consists of three parts:</p>
<ul>
<li><code><Union /></code> component - <code>Union</code> component is responsible for assembling one logical virtual DOM from physically distributed HTML fragments.</li>
<li>react-union-scripts is our SDK for developing large applications.</li>
<li>Boilerplates provide starting points for projects and they also show how to use the component and the scripts together.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-union_-work-" id="how-does-_react-union_-work-"></a><span class="text">How does <em>React Union</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-union_-work-">#</a></h2>
<p>Assume, that code below is the output of your server:</p>
<pre><code class="lang-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>html</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>body</span><span class="token punctuation" >></span></span>
Generated content by CMS.
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >id</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>news-feed<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>script</span>
<span class="token attr-name" >data-union-widget</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>news-feed<span class="token punctuation" >"</span></span>
<span class="token attr-name" >data-union-container</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>news-feed<span class="token punctuation" >"</span></span>
<span class="token punctuation" >></span></span><span class="token script language-javascript" ></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>script</span><span class="token punctuation" >></span></span>
Generated content by CMS with nonpredictable markup...
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>app-container<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >id</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>customers-chat<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>script</span>
<span class="token attr-name" >data-union-widget</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>customers-chat<span class="token punctuation" >"</span></span>
<span class="token attr-name" >data-union-container</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>customers-chat<span class="token punctuation" >"</span></span>
<span class="token punctuation" >></span></span><span class="token script language-javascript" ></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>script</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>script</span> <span class="token attr-name" >src</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>js/app.bundle.js<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token script language-javascript" ></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>script</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>body</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>html</span><span class="token punctuation" >></span></span>
</code></pre>
<p>Pay attention to the <code>script</code> tags with <code>data-union-widget</code> attribute. The tag describes which application should be rendered at which place in document (described by <code>data-union-container</code> attribute).</p>
<p>Now let's look at our index file in which the <code>Union</code> components are used:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Union <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react-union"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> routes <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> <span class="token string" >"news-feed"</span><span class="token punctuation" >,</span>
getComponent<span class="token punctuation" >:</span> done <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token keyword keyword-import" >import</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"./containers/NewsFeed"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation brackets-parentheses" >(</span>done<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> <span class="token string" >"customers-chat"</span><span class="token punctuation" >,</span>
getComponent<span class="token punctuation" >:</span> done <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token keyword keyword-import" >import</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"./containers/CustomersChat"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation brackets-parentheses" >(</span>done<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >App</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Union</span> <span class="token attr-name" >routes</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>routes<span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> App<span class="token punctuation" >;</span>
</code></pre>
<p><code>Union</code> component scans the HTML for our <code>script</code> tags - we call them <em>widget descriptors</em>. Then, combined with the route definition above, they will become React containers.</p>
<p>The component utilizes portals under the hood so we can be sure that even though the components are physically rendered in different parts in real DOM, <code>Union</code> will assemble one logical virtual DOM for us. Then we can provide one context to all of our containers. We can share the application state, theme preferences, etc. to all of our containers.</p>
<p>OK, why all the fuzz, why not to render the component directly?</p>
<p>Let's imagine that we don't have control over the response from the server. For example, it can be a result of a CMS, where administrators can drag and drop whatever application or a widget to their views. We do not know in advance what our apps should be rendered.</p>
<p>To sum up, the <code>Union</code> component allows us to define what React containers can users use in their system. The component will ensure that the right component will be rendered in the right place.</p>
<p>I described just one single use case how <code>Union</code> could be used. But there is more you can do. For example, you can <a href="https://react-union.org/union-component-widget-descriptors#3-passing-data">pass data from a server</a> or even <a href="https://react-union.org/union-component-common-data-descriptors">share common data</a> across all rendered containers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-union_-differ-from-other-solutions-" id="how-does-_react-union_-differ-from-other-solutions-"></a><span class="text">How does <em>React Union</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-union_-differ-from-other-solutions-">#</a></h2>
<p>I don't think that there are many other solutions available. I know just about <a href="https://github.com/DeloitteDigitalAPAC/react-habitat">react-habitat</a>. The library is focused on isolated components that neither share context nor state.</p>
<p>But there are surely ways of how to achieve the same (and better):</p>
<ol>
<li>"Just" change the backend technology entirely for technology that allows you prerender.</li>
<li>Turn your CMS into a data source - we call this a headless CMS.</li>
</ol>
<p>But sometimes there is no budget to change backend technology, or you and that is where React Union shines.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_react-union_-" id="why-did-you-develop-_react-union_-"></a><span class="text">Why did you develop <em>React Union</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_react-union_-">#</a></h2>
<p>At my work, there are half of backend programmers certified Liferay developers. They specialize in development for that platform. Liferay is the complex environment written in Java, and a big part of it is CMS. Our clients love using it, and our backend developers have both great inside and knowledge about it.</p>
<p>Neither clients nor backend developers will stop to use Liferay soon.</p>
<p>But I am JavaScript developer, and I don't care what backend technology is used. In advance, Liferay takes about 10 minutes to start. :)</p>
<p>I wanted to use a solution that is agnostic to the CMS platform. The React Union is the result of that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Dynamic rendering of components is one thing, but state management in CMS environments is the second and maybe more complex one. In Lundegaard we love Redux (yes, we are going to use it even though React hooks are on the way :)). As a result, we started to opensource the <a href="https://github.com/lundegaard/redux-tools"><code>redux-tools</code></a> - our solution to modular Redux. It is the younger brother of React Union that we use alongside.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-union_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_react-union_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>React Union</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-union_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Yes, there are trends — both good and bad ones.</p>
<p>Among the good ones, I consider the focus on the overall performance of web applications. We can speak either about the whole philosophy of the Progressive Web Applications or about the direction the React library is heading with focus on responsible GUIs.</p>
<p>The next big thing is undoubtedly WebAssembly (WA). I think once WA will be well supported across browsers than there will start to sublime new remarkable ways and technologies in which we will develop with native performance.</p>
<p>I have to say I am not a big fan of neither TypeScript nor Flow. Those two solutions are the way how to bring the static typing into JavaScript world. But I am aware that I stay behind the smaller group of JavaScript developers with the same opinion.</p>
<p>But I would recommend to everyone from the other group of developers to take a look into Clojure and ClojureScript world. In there they understand (for a long time) that static typing is not the silver bullet for safe apps without bugs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I would recommend them to dig into basics. It is essential to genuinely know HTML, CSS, and JavaScript before they start to add any of frameworks or libraries into their skill set.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://github.com/CrossEye">Scott Sauyet aka CrossEye</a> - One of the core members of Ramda. What are the plans according to the Ramda library? :)</li>
<li><a href="https://github.com/jxnblk">Brent Jackson aka jxnblk</a> - Creator of my most favorite css-in-js libraries - styled-system and rebass - I would like to know what new project is going to release.</li>
<li><a href="https://twitter.com/richhickey">Rich Hickey</a> - Creator of Clojure - I am interested what would he say about TypeScript or <a href="https://github.com/fantasyland/fantasy-land">FantasyLand</a>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I want to thank all members of our small team that develop React-union project for their hard work! Namely <a href="https://github.com/aizerin">aizerin</a>, <a href="https://github.com/jamescoq">jamescoq</a>, and <a href="https://github.com/wafflepie">wafflepie</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Tomáš! I am not a WordPress developer but I can see how React Union could come in handy in that context and others.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://react-union.org/">Learn more about React Union at the project site</a>. See also <a href="https://github.com/lundegaard/react-union">React Union on GitHub</a>.</blockquote>Unicon - Wrangle SVGs from your favorite design tool - Interview with Travis Arnoldauniconwranglesvgsfromyourfavoritedesigntoolinterviewwithtravisarnold2018-11-26t00:00:00z2018-11-26T00:00:00Z<p>So far design and development have been considered separate disciplines. Recently tooling has begun to appear to bridge this gap.</p>
<p>To understand more about the topic, I am interviewing <a href="https://twitter.com/souporserious">Travis Arnold</a>, the author of <a href="">Unicon</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/4dd6d33b34ec56b2ba39c947dcaa07dc?s=200" alt="Travis Arnold" class="author" width="100" height="100" />
</span>
Hello, my name is Travis Arnold. I've been designing and developing for over ten years. I started my career out as a graphic designer and eventually made my way into front-end development. Recently, I've been enjoying creating design systems and working on design tooling.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_unicon_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_unicon_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Unicon</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_unicon_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Unicon is a set of tools to help designers and developers sync SVGs from their favorite design tool to their codebase.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_unicon_-work-" id="how-does-_unicon_-work-"></a><span class="text">How does <em>Unicon</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_unicon_-work-">#</a></h2>
<p>Unicon is split up into multiple packages to allow various use cases. I'll explain the main packages below:</p>
<h4 class="header"><a class="header-anchor" href="https://survivejs.com/#-unicon-https-github-com-souporserious-unicon-tree-master-packages-unicon-" id="-unicon-https-github-com-souporserious-unicon-tree-master-packages-unicon-"></a><span class="text"><a href="https://github.com/souporserious/unicon/tree/master/packages/unicon">unicon</a></span><a class="header-anchor-select" href="https://survivejs.com/#-unicon-https-github-com-souporserious-unicon-tree-master-packages-unicon-">#</a></h4>
<p>The <strong>unicon</strong> package, the core of the solution, is responsible for sourcing SVGs from any design tool. Right now there are tighter integrations for Figma and Sketch, and then an option to read a folder of SVGs for use with any other backbone of Unicon.</p>
<p><strong>unicon</strong> is responsible for sourcing SVGs from any design tool. Right now there are tighter integrations for Figma and Sketch, and then an option to read a folder of SVGs for use with any other tool like Adobe Illustrator or any tool that can export SVG. In the future, I would like to have options for any design tool that has an available API that Unicon can integrate with.</p>
<p>In a simple use case, we can import one of three functions and gather raw SVG strings from our design tool of choice. Take a look at the following:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> getSvgsFromSketch <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"unicon"</span><span class="token punctuation" >;</span>
<span class="token function" >getSvgsFromSketch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"./path/to/illustrations.sketch"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation brackets-parentheses" >(</span>svgs <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Now we can do whatever we want with the raw SVG data</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Each function adheres to the same style and signature, with some extras needed for some instances like the Figma API needing <a href="https://github.com/souporserious/unicon/tree/master/packages/unicon#setfigmatokenauthtoken-string">authentication</a>.</p>
<h4 class="header"><a class="header-anchor" href="https://survivejs.com/#-unicon-cli-https-github-com-souporserious-unicon-tree-master-packages-unicon-cli-" id="-unicon-cli-https-github-com-souporserious-unicon-tree-master-packages-unicon-cli-"></a><span class="text"><a href="https://github.com/souporserious/unicon/tree/master/packages/unicon-cli">unicon-cli</a></span><a class="header-anchor-select" href="https://survivejs.com/#-unicon-cli-https-github-com-souporserious-unicon-tree-master-packages-unicon-cli-">#</a></h4>
<p>Next, we have a CLI tool to help automate sourcing the SVG data and creating a file of exports. A typical script could look like the following:</p>
<pre><code class="lang-bash"><span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"scripts"</span><span class="token keyword keyword-:" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"icons"</span><span class="token keyword keyword-:" >:</span> <span class="token string" >"unicon figma 5X...2ge --name icons --transformer json"</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>In this case, we are sourcing SVG data from a Figma file. We also pass a few <a href="https://github.com/souporserious/unicon/tree/master/packages/unicon-cli#options">options</a> to specify the name of the generated file as well as how the data is transformed using the <a href="https://github.com/souporserious/unicon/tree/master/packages/unicon-transformer-json"><code>unicon-transformer-json</code></a> package.</p>
<h4 class="header"><a class="header-anchor" href="https://survivejs.com/#-unicon-react-https-github-com-souporserious-unicon-tree-master-packages-unicon-react-" id="-unicon-react-https-github-com-souporserious-unicon-tree-master-packages-unicon-react-"></a><span class="text"><a href="https://github.com/souporserious/unicon/tree/master/packages/unicon-react">unicon-react</a></span><a class="header-anchor-select" href="https://survivejs.com/#-unicon-react-https-github-com-souporserious-unicon-tree-master-packages-unicon-react-">#</a></h4>
<p>Finally, the <code>unicon-react</code> package allows rendering SVGs universally in React and React Native with the same component. It understands the JSON chunks created by the <code>unicon-cli</code> tool.</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> Graphic <span class="token keyword keyword-from" >from</span> <span class="token string" >"unicon-react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Archive <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"./icons"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Graphic</span> <span class="token attr-name" >source</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>Archive<span class="token punctuation brackets-braces" >}</span></span> <span class="token attr-name" >scale</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token number" >4</span><span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_unicon_-differ-from-other-solutions-" id="how-does-_unicon_-differ-from-other-solutions-"></a><span class="text">How does <em>Unicon</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_unicon_-differ-from-other-solutions-">#</a></h2>
<p>Like other solutions, Unicon works with exported SVGs. It does this by using the <a href="https://github.com/souporserious/unicon/tree/master/packages/unicon#folder"><code>getSvgsFromFolder</code></a> function, but I also wanted to support directly exporting from the tool itself if possible. Using the provided APIs from Figma and Sketch, Unicon can keep a small feedback loop between design and development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_unicon_-" id="why-did-you-develop-_unicon_-"></a><span class="text">Why did you develop <em>Unicon</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_unicon_-">#</a></h2>
<p>I was initially inspired by what <a href="https://blog.github.com/2018-04-12-driving-changes-from-designs/">Github does to manage their icon set</a>. I liked the approach of using Figma's API to power an icon system and keep it in sync. I had previously made a <a href="sketch-to-svg-json-loader">webpack loader for Sketch</a>, so I wanted to see if I could create something better that was more flexible and included all design tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>An official docs site is next on the list. I want to create as many real-world examples to make sure Unicon can fit multiple use cases. Eventually, I'd like to create an Electron app, so it's easier for people not as familiar with the CLI to manage their icon sets. Lastly, with the release of <a href="https://github.com/features/actions">Github actions</a>, I want to look into how Unicon workflows can be more automated.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_unicon_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_unicon_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Unicon</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_unicon_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In the future, I'd like Unicon to have even better support with design tools and possibly package management for illustrations. There seems to be a trend of design tools popping up right now with everyone racing to be the next tool that exports directly to production code. In the end, I think everyone is bringing great innovation to this space, and I couldn't be more excited to be a part of it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Always be experimenting and trying out new projects. Web development is one of the best fields to be in, with such a low barrier to entry, you can make your opportunities. I highly recommend contributing to open source if you have the time. I've learned more than I could have ever imagined since I started sharing and collaborating more. It's also pretty fun getting feedback and working with people all over the world!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="http://jxnblk.com">Brent Jackson</a>. I'm always impressed and inspired by the work he puts out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for this interview! I'm excited about the future of design tooling. I can't wait to see it continue to grow and get better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Travis! I expect to see a lot of action in the space as developers and designers figure out how to collaborate better.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://github.com/souporserious/unicon">To learn more about Unicon, head to GitHub.</a></blockquote>Experiences on HalfStack London 2018aexperiencesonhalfstacklondon20182018-11-18t00:00:00z2018-11-18T00:00:00Z<p>I was invited to <a href="https://halfstackconf.com/">HalfStack London 2018</a> as a guest as we are considering bringing the conference series to Vienna. Therefore it was vital for me to get an idea of the format and how the event runs.</p>
<p>It was my second visit to London. Although the city is a little rugged, I like it, and it's easy to get along. It's famous for having a vibrant technology culture, and it showed positively at the conference.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-halfstack-london-2018" id="overview-of-halfstack-london-2018"></a><span class="text">Overview of HalfStack London 2018</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-halfstack-london-2018">#</a></h2>
<p><figure><img src="/a1693bf2990b12faab0c5bda17bf7a4f.jpg" alt="Fun at speakers' dinner" class="" width="" height="" /><figcaption>Fun at speakers' dinner</figcaption></figure></p>
<p>HalfStack is known for being a cozy conference that's held in a pub environment (a backroom of one) while being limited to one day and roughly 150 attendees. I like the single track format they chose, and I feel the schedule of the conference had been designed well.</p>
<p>The day started with an inspirational talk by Chris Heilmann, then went into technical topics, after which it changed gears into more fun talks and eventually the after party. The progression made sense to me as you tend to get more tired over the day. I might have preferred to have longer breaks and perhaps fewer speakers so this could be something we'll do differently in a Vienna edition.</p>
<p>The conference had a different feel than the others I've visited. It felt communal, and the fact that there were a quiz and other community-building events included mirrored this.</p>
<p>The venue was a little grungy in a pure London style. Some supports were obstructing the view, and the projector wasn't the best although it wasn't the worst one I've seen either. It might make sense to have a television in the back and mirror the slides there as now it was challenging to follow from there although the sofas provided in that section were nice. The venue also contained a bar from which food and drinks were served.</p>
<p><figure><img src="/b82a0e540dc49703d7e1c5f6da9fc530.jpg" alt="Cafe 1001 - The venue" class="" width="" height="" /><figcaption>Cafe 1001 - The venue</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#bringing-best-practices-front-and-centre-chris-heilmann" id="bringing-best-practices-front-and-centre-chris-heilmann"></a><span class="text">Bringing best practices front and centre - Chris Heilmann</span><a class="header-anchor-select" href="https://survivejs.com/#bringing-best-practices-front-and-centre-chris-heilmann">#</a></h2>
<p><figure><img src="/f21b2e4af93988425adee6e6381d1f3d.jpg" alt="Chris Heilmann" class="" width="" height="" /><figcaption>Chris Heilmann</figcaption></figure></p>
<p>The conference started with a talk by Chris Heilmann. The key point I got out of the session is that we should push as much to tooling as possible. In particular, he mentioned <a href="https://webhint.io/">webhint scanner</a> that has been designed to support web development.</p>
<p>I agree with the sentiment, and this is why tools like Prettier gained traction as they allowed us to eliminate entire debates while enabling us to focus on what remains.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-present-and-future-of-vr-on-the-web-ada-rose-cannon" id="the-present-and-future-of-vr-on-the-web-ada-rose-cannon"></a><span class="text">The present and future of VR on the Web - Ada Rose Cannon</span><a class="header-anchor-select" href="https://survivejs.com/#the-present-and-future-of-vr-on-the-web-ada-rose-cannon">#</a></h2>
<p><figure><img src="/97a6c40a1ac7d46fd111763542a207a1.jpg" alt="Ada Rose Cannon" class="" width="" height="" /><figcaption>Ada Rose Cannon</figcaption></figure></p>
<p>Ada Rose Cannon discussed the future of VR in the web. It was nice to see what's coming although it feels like it's still early days with the technology especially given the standards are still emerging. That said, it's the right time to start looking into the topic if you want to be amongst the first to adopt it. Also, it's a good chance to affect the development of technology by participating in the standards development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-bots-with-javascript-alex-lakatos" id="building-bots-with-javascript-alex-lakatos"></a><span class="text">Building Bots with JavaScript - Alex Lakatos</span><a class="header-anchor-select" href="https://survivejs.com/#building-bots-with-javascript-alex-lakatos">#</a></h2>
<p><figure><img src="/d13058aa2d04838e9a3ea0537eb7c102.jpg" alt="Alex Lakatos" class="" width="" height="" /><figcaption>Alex Lakatos</figcaption></figure></p>
<p>Alex Lakatos discussed the emergence of conversational user interfaces. The point was that a UI doesn't have to be static. Instead, we can code fundamental interactions to a bot that behaves in a human-like manner while remembering what we've told it before.</p>
<p>Doing this means we could tell a bot, for example, to book a flight to Berlin for the next Sunday as usual. Based on that it would propose a trip that fits our patterns of booking before and suggests scheduling it. I can see potential in this type of approach as it's also more accessible than the current options when done right.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#fast-but-not-furious-debugging-user-interaction-performance-issues-anna-migas" id="fast-but-not-furious-debugging-user-interaction-performance-issues-anna-migas"></a><span class="text">Fast But Not Furious: Debugging User Interaction Performance Issues - Anna Migas</span><a class="header-anchor-select" href="https://survivejs.com/#fast-but-not-furious-debugging-user-interaction-performance-issues-anna-migas">#</a></h2>
<p><figure><img src="/2d66a3875cf8b498c56ed19f0b15822a.jpg" alt="Anna Migas" class="" width="" height="" /><figcaption>Anna Migas</figcaption></figure></p>
<p>Anna Migas discussed how to approach user interface performance and to optimize it. The key learning for me was that there's still something for me to learn in-browser developer tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#npm-install-disaster-waiting-to-happen-liliana-kastilio" id="npm-install-disaster-waiting-to-happen-liliana-kastilio"></a><span class="text">npm install disaster-waiting-to-happen - Liliana Kastilio</span><a class="header-anchor-select" href="https://survivejs.com/#npm-install-disaster-waiting-to-happen-liliana-kastilio">#</a></h2>
<p><figure><img src="/96cf5aa84a1de6de541b5d6504bd4793.jpg" alt="Liliana Kastillo" class="" width="" height="" /><figcaption>Liliana Kastillo</figcaption></figure></p>
<p>Liliana Kastilio discussed the recent security disasters that have happened in the IT sector. Security shouldn't be an afterthought. Instead, it's something to take into account continuously. As we bring packages to our projects, we also increase the possibility for a security breach.</p>
<p>It's in part an awareness issue but also tooling and a process level problem. It's tricky to solve as packages evolve unpredictably. At the same time, the amount of available packages keeps going up.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#enter-es2018-andrico-karoulla" id="enter-es2018-andrico-karoulla"></a><span class="text">Enter ES2018 - Andrico Karoulla</span><a class="header-anchor-select" href="https://survivejs.com/#enter-es2018-andrico-karoulla">#</a></h2>
<p><figure><img src="/24b183d89bd7a13df010631e3f03a523.jpg" alt="Andrico Karoulla" class="" width="" height="" /><figcaption>Andrico Karoulla</figcaption></figure></p>
<p>Andrico Karoulla focused on the new features available in ES2018. The key point I got out of the talk is that finally, we have a way to share memory across multiple processes. Earlier this has been a problem point when parallelizing execution and I am glad to see it has been resolved.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#100-css-mario-kart-stephen-cook" id="100-css-mario-kart-stephen-cook"></a><span class="text">100% CSS Mario Kart - Stephen Cook</span><a class="header-anchor-select" href="https://survivejs.com/#100-css-mario-kart-stephen-cook">#</a></h2>
<p><figure><img src="/47852b652351ce7b6f239db35bdbfcff.jpg" alt="Stephen Cook" class="" width="" height="" /><figcaption>Stephen Cook</figcaption></figure></p>
<p>Stephen Cook's presentation gets my award for the most imaginative use of CSS. He implemented a subset of Mario Kart in using CSS and a tiny bit of JavaScript. He found a way to encode sprite textures within CSS definitions and then animate between them. Especially keyboard controls were smart as he was able to implement them with selectors crafted carefully.</p>
<p>CSS is starting to feel like a complete programming language to me. If you know what you are doing, you can do a lot with it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#buying-a-house-with-javascript-sean-mcgee" id="buying-a-house-with-javascript-sean-mcgee"></a><span class="text">Buying a House with JavaScript - Sean McGee</span><a class="header-anchor-select" href="https://survivejs.com/#buying-a-house-with-javascript-sean-mcgee">#</a></h2>
<p><figure><img src="/c8393858742c3107fb419e79edbda312.jpg" alt="Sean McGee" class="" width="" height="" /><figcaption>Sean McGee</figcaption></figure></p>
<p>Sean McGee discussed how he uses JavaScript to hunt for a house fitting his criteria. So far he hasn't been lucky, but it was intriguing to see how he combines multiple data sources to generate a visualization to show where possible candidates might exist. The nice thing is that he managed to automate so that if his criteria are met, he'll receive a text message telling him to purchase the property.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#home-automation-with-javascript-jonathan-fielding" id="home-automation-with-javascript-jonathan-fielding"></a><span class="text">Home Automation with JavaScript - Jonathan Fielding</span><a class="header-anchor-select" href="https://survivejs.com/#home-automation-with-javascript-jonathan-fielding">#</a></h2>
<p><figure><img src="/212b7f46239d86dc8a0ab2cc13d6688d.jpg" alt="Jonathan Fielding" class="" width="" height="" /><figcaption>Jonathan Fielding</figcaption></figure></p>
<p>Jonathan Fielding focused on home automation and how to approach it with JavaScript. The field is currently fragmented, and usually, hardware doesn't work with all possible standards. The fragmentation makes it tricky to integrate multiple solutions although it seems to be possible if you are smart and can develop JavaScript APIs on top of proprietary UIs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#reanimating-the-web-rob-bateman" id="reanimating-the-web-rob-bateman"></a><span class="text">Reanimating the Web - Rob Bateman</span><a class="header-anchor-select" href="https://survivejs.com/#reanimating-the-web-rob-bateman">#</a></h2>
<p><figure><img src="/6a0ed2bd33ab7dfe51c570a6462833b7.jpg" alt="Rob Bateman" class="" width="" height="" /><figcaption>Rob Bateman</figcaption></figure></p>
<p>Rob Bateman discussed his transition from Flash to JavaScript. It was impressive to see the results. One of the outcomes his work is <a href="https://github.com/awayjs">AwayJS</a>, a 3D graphics framework.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-most-important-ui-you-carolyn-stransky" id="the-most-important-ui-you-carolyn-stransky"></a><span class="text">The Most Important UI: You - Carolyn Stransky</span><a class="header-anchor-select" href="https://survivejs.com/#the-most-important-ui-you-carolyn-stransky">#</a></h2>
<p><figure><img src="/3305f334b662a46dc5d172baaf727965.jpg" alt="Carolyn Stransky" class="" width="" height="" /><figcaption>Carolyn Stransky</figcaption></figure></p>
<p>Carolyn Stransky focused on the crucial topic of self-care. It's too familiar in the industry for people to push too far and burn out. I felt the talk fit the conference well as it's a topic that requires awareness.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#cats-vs-dogs-tom-dye-dylan-schiemann" id="cats-vs-dogs-tom-dye-dylan-schiemann"></a><span class="text">Cats vs. Dogs - Tom Dye, Dylan Schiemann</span><a class="header-anchor-select" href="https://survivejs.com/#cats-vs-dogs-tom-dye-dylan-schiemann">#</a></h2>
<p><figure><img src="/99243d89299de1203f2bb64b257fdd5d.jpg" alt="Dylan Schiemann" class="" width="" height="" /><figcaption>Dylan Schiemann</figcaption></figure></p>
<p>Tom Dye and Dylan Schiemann gave a breather type presentation and figured out whether the audience prefers cats or dogs. There wasn't heavy content included, but the session had its place before more content.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#javascript-at-the-edge-cameron-diver-theodor-gherzan" id="javascript-at-the-edge-cameron-diver-theodor-gherzan"></a><span class="text">JavaScript at the edge - Cameron Diver, Theodor Gherzan</span><a class="header-anchor-select" href="https://survivejs.com/#javascript-at-the-edge-cameron-diver-theodor-gherzan">#</a></h2>
<p><figure><img src="/6390db206df202cde4f919dae269713d.jpg" alt="Cameron Diver and Theodor Gherzan" class="" width="" height="" /><figcaption>Cameron Diver and Theodor Gherzan</figcaption></figure></p>
<p>Cameron Diver and Theodor Gherzan discussed how to develop and deploy JavaScript on hardware. The talk included live demonstrations, and it was cool to see how it all went together as audio waveform was mapped to multiple LED displays.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#this-talk-is-about-you-jani-ev-kallio" id="this-talk-is-about-you-jani-ev-kallio"></a><span class="text">This Talk Is About You - Jani Eväkallio</span><a class="header-anchor-select" href="https://survivejs.com/#this-talk-is-about-you-jani-ev-kallio">#</a></h2>
<p><figure><img src="/b6c099b1e367f514f45faeec697bbb6d.jpg" alt="Jani Eväkallio" class="" width="" height="" /><figcaption>Jani Eväkallio</figcaption></figure></p>
<p>Jani Eväkallio's talk was about shifting perspective to why we are developing. Too often the focus of discussion is on technical details, and we can forget about why we are in the business in the first place. Individual decisions matter and through our personal choices we shape this world.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#beats-rhymes-unit-tests-tony-edwards" id="beats-rhymes-unit-tests-tony-edwards"></a><span class="text">Beats, Rhymes & Unit Tests - Tony Edwards</span><a class="header-anchor-select" href="https://survivejs.com/#beats-rhymes-unit-tests-tony-edwards">#</a></h2>
<p><figure><img src="/e099c672d3df8c3c87bc2afd7368d899.jpg" alt="Tony Edwards" class="" width="" height="" /><figcaption>Tony Edwards</figcaption></figure></p>
<p>Tony Edwards' talk was perhaps the most entertaining one. He is an amateur rapper, and he wanted to see if it's possible to transcribe his rapping to a computer using JavaScript. He did this through a set of experiments, and finally, in the end, something was working. He also got the crowd involved which was great.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#alpha-beta-gamer-dev-mode-joe-hart" id="alpha-beta-gamer-dev-mode-joe-hart"></a><span class="text">Alpha, Beta, Gamer: Dev Mode - Joe Hart</span><a class="header-anchor-select" href="https://survivejs.com/#alpha-beta-gamer-dev-mode-joe-hart">#</a></h2>
<p><figure><img src="/a7d9480e638db512d065a843d93b4e34.jpg" alt="Joe Hart" class="" width="" height="" /><figcaption>Joe Hart</figcaption></figure></p>
<p>Joe Hart's presentation was another entertaining one. He discussed the history of games and had several live examples. We played Flappy Bird together and had great fun overall even if the last demonstration failed due to a coding issue.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/ac46ee0bc19c2555188d2c3ca27dde22.jpg" alt="Chilling at the venue" class="" width="" height="" /><figcaption>Chilling at the venue</figcaption></figure></p>
<p>I like the concept of HalfStack. It's a small community conference that seems to have found its place. I feel it was a great showcase especially for the local community and it was amazing for me to be a part of it for a short while.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://kmu.files.cnow.at/apps/gallery/s/CqHew9fZpNeSYXs#">Find my photos of the event online.</a></blockquote>React India 2019 - The international React.js conference in Goa, India - Interview with Manjula Dubeareactindia2019theinternationalreactjsconferenceingoaindiainterviewwithmanjuladube2018-11-11t00:00:00z2018-11-11T00:00:00Z<p>It is exciting to organize a conference, especially when it's the first of its kind in a region. To learn more about one such event, I'm interviewing <a href="https://twitter.com/manjula_dube">Manjula Dube</a> from the React India (22-24.08.2019) team.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/5a6df75345bf0c37964d0acc8661e923.jpg" alt="Manjula Dube" class="author" width="100" height="100" /><figcaption>Manjula Dube</figcaption></figure></p>
<p>I am a software engineer based out of Berlin. I also teach React/Javascript at Code University and Le Wagon. I love to code like I love Indian food.</p>
<p>I organise <a href="https://www.meetup.com/mumbai-women-coders/">Mumbai Women Coders</a>, <a href="https://www.meetup.com/gdg-berlin/">GDG Berlin</a>, <a href="https://www.reactindia.io/">React India</a>. In my free time, I mostly spend time working on open source and helping developers in the community. I am also a conference speaker who loves GraphQL, React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_react-india_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_react-india_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>React India</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_react-india_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>React India is a community-led non-profit initiative with an international flavor. The first of its kind in India, the event consists of a workshop day and two days of talks around the topic.</p>
<p>It is a three-day conference with the first day focusing on workshops and the next two days talks on things around React, React Native and GraphQL. This edition will be gathering front-end and full-stack developers across the globe to Goa, India.</p>
<p>In this single track event, you will learn more about React and surrounding topics while meeting some of the leading talents around the globe. In addition to enjoying the conference, this is your chance to explore Goa. Regular and lightning talks will cover various React and frontend topics including React Native, GraphQL, VR & AR, Redux, Preact and more!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-_react-india_-offer-" id="what-does-_react-india_-offer-"></a><span class="text">What does <em>React India</em> offer?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-_react-india_-offer-">#</a></h2>
<p>React India will be one of the first Indian conferences to have over 25+ speakers flying from over 15+ countries which count for 10+ International speakers and over 15 Indian speakers.</p>
<p>React India will be the first-ever conference to hold this vast and massive community-led effort. We are also focusing on diversity and getting a lot of female speakers on board.</p>
<p>We offer our attendees the quintessence of professional front-end engineering knowledge throughout the event with multiple workshops and single track followed with two days talks by experts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-india_-differ-from-other-events-" id="how-does-_react-india_-differ-from-other-events-"></a><span class="text">How does <em>React India</em> differ from other events?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-india_-differ-from-other-events-">#</a></h2>
<blockquote>
<p>One for all, all for one.</p>
</blockquote>
<p>React India is a non-profit conference which is organized by developers for the broader developer community. We make a difference by focusing on curated developer content and while enjoying the event together as a community. We are committed to building a diverse and inclusive conference for everyone.</p>
<p>React India has a strict code of conduct which is enforced on everyone who is part of it. We make all organizers, sponsors, speakers, volunteers, delegates, and attendees of all levels to adhere to our <a href="https://www.notion.so/apherio/CODE-OF-CONDUCT-46e5dc50604a44e1be53a34d4937682f">Code of Conduct</a>.</p>
<blockquote>
<p>Here's our annual conference <a href="https://www.notion.so/apherio/ACCESSIBILITY-STATEMENT-191ec2ad04d84deeb6dfe74b638047e4">accessibility statement</a>.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-arrange-_react-india_-" id="why-did-you-decide-to-arrange-_react-india_-"></a><span class="text">Why did you decide to arrange <em>React India</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-arrange-_react-india_-">#</a></h2>
<p>There is a sizeable Indian community of developers who are eager to learn but lacked International exposure. React India will be the platform for establishing the global connect and showcase the power of this fantastic technology format.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>React India's goal is to become India's annual international conference which will aim to grow each year from its inception. We plan to reach out to more Indian developers in upcoming years. React India provides a platform to both network and to share your knowledge with global developer ecosystem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-india_-" id="what-does-the-future-look-like-for-_react-india_-"></a><span class="text">What does the future look like for <em>React India</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-india_-">#</a></h2>
<p>I haven't thought that far yet but will be doing this conference every year so that we have both international and local flavor in our Javascript and React community.</p>
<p>I want to bring in more women developers to speak out on React / Javascript topics. My ultimate goal for React India is to continue growing our community by inspiring a whole new group of people to join the amazing developer community!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>First of all, programming is not hard. Despite what people say, you don't have to be a genius to learn to program. Avoid copy and pasting even if it takes long enough to write up a necessary line code. Stick to it and work on it until you completely understand it.</p>
<p>I would say keep learning don't look back. Ask for help in the community. There are a lot of people in the community to help. My last advice will be "be determined and focused". Sometimes you will feel on the top of the world, sometimes times you will question yourself.</p>
<p>Whatever highs and lows you face, keep practicing, keep trying, keep learning because that feeling when you achieve something will make you more proud of yourself.</p>
<blockquote>
<p>Always remember - "The hardest path has the greatest payoff."</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Maybe some developers in India who are already excited about the conference or speakers such as (<a href="https://twitter.com/ken_wheeler">Ken Wheeler</a> or <a href="https://twitter.com/jevakallio">Jani Eväkallio</a>) about how they feel about coming to India for this conference. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I want to thank all the individuals behind the scenes who are working hard to make this conference an awesome one. Thanks to second organizer <a href="https://twitter.com/apheri0">Sahil Mhapsekar</a> for helping me make this happen. Lastly thanks to our sponsors <a href="https://react-finland.fi/">React Finland</a> and <a href="http://reactalicante.es/">React Alicante</a>.</p>
<p>Come forward to show your support for this non-profit initiative by self-motivated individuals from the developer community. React India is looking out for sponsorship. Through sponsorship support, we hope to invite as many deserving people as possible who would otherwise be unable to attend. Let us together create a meaningful experience for everyone.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Learn more from the <a href="https://docs.google.com/presentation/d/e/2PACX-1vSeLd8WKidVXUd0MPEqK8ZtixjnMTSTlEoJctGGlW0zWXWaDd426WMzEObySbK3R9ECfde_ZabHpMKe/pub?start=false&loop=false&delayms=3000&slide=id.g4588fdc895_0_23">sponsorship deck</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Manjula! React India will take place between 22nd and 24th in August of 2019 in Goa, India.</p>
<p>You can learn more conference at <a href="https://www.reactindia.io/">React India site</a> and get news through <a href="https://twitter.com/react_india">@react_india</a> on Twitter.</p>
Experiences on WebCamp Zagreb 2018aexperiencesonwebcampzagreb20182018-10-10t00:00:00z2018-10-10T00:00:00Z<p>I was invited to <a href="https://2018.webcampzg.org/">WebCamp Zagreb</a> as a speaker and a workshop trainer. I gave one of my webpack workshops at the event and <a href="https://drive.google.com/open?id=1WyuJkhwKj3sTmoAqQm9yBWoYwZJyAIbe1EenrP34xAE">discussed static websites</a> and the way I see them in my talk.</p>
<p>It was my first time in Zagreb, and I was pleasantly surprised by the city. Zagreb reminds me of Prague or Vienna architecture-wise. There are fewer tourists and no subway, though. Price-level tends to be low, though, and using a taxi is a realistic option.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-webcamp-zagreb-2018" id="overview-of-webcamp-zagreb-2018"></a><span class="text">Overview of WebCamp Zagreb 2018</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-webcamp-zagreb-2018">#</a></h2>
<p><figure><img src="/c23bc9dbf31b26719d95450714987b95.jpg" alt="Oh, well" class="" width="" height="" /><figcaption>Oh, well</figcaption></figure></p>
<p>There were close to a thousand people at WebCamp Zagreb. The event was sold out. One unique aspect of WebCamp Zagreb is that the community organizes it. There isn't an equivalent event in Vienna for example. The conference has been running for many years, and during this time they have honed the process and the conference.</p>
<p>The conference started with two workshop days. After that, there were two days with talks and an afterparty to end it all. The schedule was relaxed and the talk lengths varied from roughly 25 minutes to 45 minutes.</p>
<p>The conference was split into two main tracks and a smaller unconference one. The conference venue had one big hall that was divided into the half after keynotes of each day. Sometimes you could hear some noise (applause, laughter) through but that wasn't a big issue. Overall the arrangement felt fine, and there was enough space in the venue for all the people.</p>
<p>The topics were varied. There were technical, design, and business talks of different levels. In this way, it reminded me of WebExpo, and I like the concept as it allows you to get exposed to more ideas. You learn more. Overall, the talks had a high quality, and there were a couple of pleasant surprises included.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#day-1" id="day-1"></a><span class="text">Day 1</span><a class="header-anchor-select" href="https://survivejs.com/#day-1">#</a></h2>
<p><figure><img src="/fceedbcdcbf4d550a1ccd332341921d6.jpg" alt="Selfie by proxy" class="" width="" height="" /><figcaption>Selfie by proxy</figcaption></figure></p>
<p>I traveled to Zagreb a day before my workshop on Thursday. Next time I might reserve a day or two more to enjoy the city more. The accommodation arranged by the organizers was in an apartment hotel right next to the venue. The apartments were close to new, and there was plenty of space. Compared to what conferences usually offer to their speakers, this was luxury.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#taking-ci-and-automated-testing-seriously-alen-ladavac" id="taking-ci-and-automated-testing-seriously-alen-ladavac"></a><span class="text">Taking CI and automated testing seriously - Alen Ladavac</span><a class="header-anchor-select" href="https://survivejs.com/#taking-ci-and-automated-testing-seriously-alen-ladavac">#</a></h3>
<p><figure><img src="/cea93ec0e07228ec3ca5fc7111e891a2.jpg" alt="Alen Ladavac" class="" width="" height="" /><figcaption>Alen Ladavac</figcaption></figure></p>
<p>The first conference day started with a keynote by Alen Ladavac, the CTO of Croteam. Croteam is famous for developing the Serious Sam franchise and The Talos Principle in addition to many other titles.</p>
<p>In his talk, he discussed how game developers approach Continuous Integration and automated testing. Unlike in the web space, there isn't established tooling for automation and testing is a severe problem. Often studios end up developing their solutions. That's what Croteam did.</p>
<p>According to Alen, it is highly essential that gamers can complete a game and they don't get stuck due to a bug or a design issue. How to ascertain this for a complex game like The Talos Principle? Alen suggested a couple of ways - using bots, allowing game testers to add notes to the game world in-game.</p>
<p>Although puzzles of a game might be too challenging for a bot to solve the game, they can follow recordings made by people. The advantage of using bots is that instead of having people to play through the game after each change, they can be run on a server while using accelerated time within the game engine itself. A bot can be able to complete a 10-20h game within a twenty-minute run as a result.</p>
<p>Bots cannot replace human testers, but they can complement the effort and allow people to focus on other aspects such as "do things look right". People are also sometimes more clever in finding issues. To make it convenient, Croteam has implemented bug tracking within their game engine so you can attach notes to game assets and see notes other people have done.</p>
<p>The lesson for web developers is two-fold here: 1. It likely makes sense to run a bot against the app/service you are developing (acceptance testing ). 2. Making it easier for the users to report issues gives you higher quality issues.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#property-based-testing-is-a-mindset-andrea-leopardi" id="property-based-testing-is-a-mindset-andrea-leopardi"></a><span class="text">Property-based testing is a mindset - Andrea Leopardi</span><a class="header-anchor-select" href="https://survivejs.com/#property-based-testing-is-a-mindset-andrea-leopardi">#</a></h3>
<p><figure><img src="/0924ca722892b6b6baadaac0580eaa54.jpg" alt="Andrea Leopardi" class="" width="" height="" /><figcaption>Andrea Leopardi</figcaption></figure></p>
<p>Andrea's talk was about property-based testing. It's a testing technique that can be used to generate test cases, and I've used the approach in the past and written a solution of my own even. Although I knew the basic idea, it was good to get a recap.</p>
<p>Property-based testing relies on invariants for values and for property to test. Consider array sorting for example. You know that at least properties such as the following must hold always:</p>
<ul>
<li>The output must have the same length as the input.</li>
<li>The output must contain the same items as the input.</li>
<li>The output must be in ascending order.</li>
</ul>
<p>Also, we have to define the types of parameters for the function to test. We could say we are sorting an array of integers for example. The information is required to generate a pseudorandom array passed to the invariants above and to check they hold. If a test fails, proper implementation can reduce the failure to a minimal example.</p>
<p>The problem is that often these invariants can be challenging to discover. Therefore the technique should be seen as complementary to unit testing. The most significant difference has to do with input value coverage. A property can cover a broader range of values and find corner cases you might otherwise miss.</p>
<p>To solve the discovery problem, sometimes it's possible to use another implementation as an oracle. You could try to improve performance this way for example.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#designing-with-accessibility-in-mind-bermon-painter" id="designing-with-accessibility-in-mind-bermon-painter"></a><span class="text">Designing with Accessibility in Mind - Bermon Painter</span><a class="header-anchor-select" href="https://survivejs.com/#designing-with-accessibility-in-mind-bermon-painter">#</a></h3>
<p><figure><img src="/18084419f5bde97aec7613a7a0438972.jpg" alt="Bermon Painter" class="" width="" height="" /><figcaption>Bermon Painter</figcaption></figure></p>
<p>Bermon discussed accessibility and its impact on design. If accessibility is considered in the design, it can open your software to new groups of people. Accessibility isn't a zero-sum game as even so-called regular users can benefit from the improvements. Sometimes you may also be required to implement specific measures by law.</p>
<p>Considering accessibility in the design phase may add to the initial cost of development and require different development practices. That's something I would have loved to learn more.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#a-token-walks-into-a-spa-ado-kukic" id="a-token-walks-into-a-spa-ado-kukic"></a><span class="text">A Token Walks Into a SPA... - Ado Kukic</span><a class="header-anchor-select" href="https://survivejs.com/#a-token-walks-into-a-spa-ado-kukic">#</a></h3>
<p><figure><img src="/03f88e013647a8423f8b00a3f4945516.jpg" alt="Ado Kukic" class="" width="" height="" /><figcaption>Ado Kukic</figcaption></figure></p>
<p>Ado's talk discussed the authentication flow of JSON Web Tokens. I gained a couple of insights:</p>
<ul>
<li>Authentication server that gives the keys against successful authentication should be as a separate service.</li>
<li>You should never store authentication related information to local/session storage. Instead, it makes sense to have it in-memory (think Redux or a similar state management solution).</li>
<li>To solve the problem of refresh the browser, a session cookie on the authentication server is enough. It should be able to renew the auth on request after refreshing.</li>
</ul>
<p>I would have loved to see a live demo, but apart from that, the talk was excellent.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#where-are-the-women-dora-militaru" id="where-are-the-women-dora-militaru"></a><span class="text">Where are the women? - Dora Militaru</span><a class="header-anchor-select" href="https://survivejs.com/#where-are-the-women-dora-militaru">#</a></h3>
<p><figure><img src="/089e42e80a89c3891f40b2001bc365c5.jpg" alt="Dora Militaru" class="" width="" height="" /><figcaption>Dora Militaru</figcaption></figure></p>
<p>Dora's talk was about the absence of women in the industry. Perhaps the key point for me was that it's not only about fixing some percentages. Instead, it's at least as important, if not more, to be inclusive instead of only diverse.</p>
<p>Having a diverse environment isn't enough if old decision structures remain in place. There's more structure than what's apparent. Depending on the action, different structures of a network become active. And that's where inclusivity comes in. Fixing the gender gap also means adjusting the structures and based on that gender quotas may be justified until the structures have been repaired.</p>
<p>Dora mention <a href="https://implicit.harvard.edu/implicit/">Project Implicit</a>. It's a project by Harvard meant to discover social attitudes. Overall, the talk was thought-provoking and provided a new perspective to the discussion.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-did-we-open-source-our-knowledge-and-practices-robert-orn" id="how-did-we-open-source-our-knowledge-and-practices-robert-orn"></a><span class="text">How did we open source our knowledge and practices - Robert Šorn</span><a class="header-anchor-select" href="https://survivejs.com/#how-did-we-open-source-our-knowledge-and-practices-robert-orn">#</a></h3>
<p><figure><img src="/96727c993193e7d67365db384e46fc24.jpg" alt="Robert Šorn" class="" width="" height="" /><figcaption>Robert Šorn</figcaption></figure></p>
<p>Robert discussed how he changed the knowledge processes of his company by starting an effort to document. It started small, but once people realized the value, his Git wiki-based approach started bearing fruits. Eventually, people developed it into a website and added features such as search to it.</p>
<p>Sometimes a lot of these things are implicit. Even though a process hasn't been documented, doesn't mean there isn't one. Exposing what's known allowed people to improve the content further. One side benefit was that onboarding new people to the company became more comfortable as a result.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#headless-architecture-and-the-future-of-websites-heidi-olsen" id="headless-architecture-and-the-future-of-websites-heidi-olsen"></a><span class="text">Headless architecture and the future of websites - Heidi Olsen</span><a class="header-anchor-select" href="https://survivejs.com/#headless-architecture-and-the-future-of-websites-heidi-olsen">#</a></h3>
<p><figure><img src="/b2a76de2cdcdd66538922ee1784a26df.jpg" alt="Heidi Olsen" class="" width="" height="" /><figcaption>Heidi Olsen</figcaption></figure></p>
<p>Heidi's talk discussed how her company approaches technical problems by allowing multiple different technologies used. The critical point here was to maintain a headless API in between to separate the frontend from the backend. The approach is similar to what I use to develop my sites these days.</p>
<p>She also mentioned <a href="https://www.martinfowler.com/bliki/StranglerApplication.html">the strangler pattern</a> that's useful for refactoring legacy software by writing around it and eventually removing the old parts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#day-2" id="day-2"></a><span class="text">Day 2</span><a class="header-anchor-select" href="https://survivejs.com/#day-2">#</a></h2>
<p><figure><img src="/1b49a2b4eaf9ebed4d39c246df8eab4e.jpg" alt="Random statue" class="" width="" height="" /><figcaption>Random statue</figcaption></figure></p>
<p>Day two of the conference continued in the same format.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#nitpicking-terminology-are-we-using-the-right-terms-miro-svrtan" id="nitpicking-terminology-are-we-using-the-right-terms-miro-svrtan"></a><span class="text">Nitpicking terminology: are we using the right terms - Miro Svrtan</span><a class="header-anchor-select" href="https://survivejs.com/#nitpicking-terminology-are-we-using-the-right-terms-miro-svrtan">#</a></h3>
<p><figure><img src="/7f9babc564f33ceb73ac6c3cf02c15c0.jpg" alt="Miro Svrtan" class="" width="" height="" /><figcaption>Miro Svrtan</figcaption></figure></p>
<p>Miro's keynote was about the terminology we use and how we interpret them. What agile means to someone, isn't the same to someone else. The critical point was that it's good to consider what terms we use and how we use them.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#writing-superpowers-for-geeks-ivan-brezak-brkan" id="writing-superpowers-for-geeks-ivan-brezak-brkan"></a><span class="text">Writing Superpowers for Geeks - Ivan Brezak Brkan</span><a class="header-anchor-select" href="https://survivejs.com/#writing-superpowers-for-geeks-ivan-brezak-brkan">#</a></h3>
<p><figure><img src="/d746556011a5c9828c3a417a01ab7b32.jpg" alt="Ivan Brezak Brkan" class="" width="" height="" /><figcaption>Ivan Brezak Brkan</figcaption></figure></p>
<p>Ivan discussed why writing is an essential skill for programmers to acquire. By being able to write and articulate yourself well, it's easier to get complex messages through, and most importantly to respond appropriately to trolls.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pricing-shouldn-t-be-hard-vladimir-bogdani-" id="pricing-shouldn-t-be-hard-vladimir-bogdani-"></a><span class="text">Pricing shouldn't be hard - Vladimir Bogdanić</span><a class="header-anchor-select" href="https://survivejs.com/#pricing-shouldn-t-be-hard-vladimir-bogdani-">#</a></h3>
<p><figure><img src="/2dba6db718b1285f3275badbb88aaf17.jpg" alt="Vladimir Bogdanić" class="" width="" height="" /><figcaption>Vladimir Bogdanić</figcaption></figure></p>
<p>Vladimir's talk was one of the highlights of the conference for me. He discussed how he approaches business and pricing in particular. One of the key points was how to approach proposals. You should be clear on the value to the client and make it easy to understand the exact offering. By articulating well, you can charge more since there's more value on the table.</p>
<p>Pricing-wise he mentioned that you should charge a fixed price for known quantities and hourly one for something that's not. Sometimes you might go from hourly pricing to a fixed one once you have enough experience. It's a different model as then you tie your price to the value delivered instead of hours worked.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-power-of-persuasive-design-alex-kuhn" id="the-power-of-persuasive-design-alex-kuhn"></a><span class="text">The Power of Persuasive Design - Alex Kuhn</span><a class="header-anchor-select" href="https://survivejs.com/#the-power-of-persuasive-design-alex-kuhn">#</a></h3>
<p><figure><img src="/8132c51aa7893ccccdddec730f0b12bc.jpg" alt="Alex Kuhn" class="" width="" height="" /><figcaption>Alex Kuhn</figcaption></figure></p>
<p>The critical point of Alex's talk was that design could be used to persuade or dissuade people to perform specific actions. That's how calls to actions work since they shape attention. Discouraging is another pattern as they try to convince the user not to do something. Sometimes these are so-called dark UX patterns as they play against the user.</p>
<p>Alex's talk helped me to understand that design is also about motivating people. Indirection can be the way as for some things, like getting fit, there aren't any shortcuts. Instead, you should help the users to develop habits and encourage them as they reach towards their goals.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#designing-for-impact-vladimir-koncar" id="designing-for-impact-vladimir-koncar"></a><span class="text">Designing for impact - Vladimir Koncar</span><a class="header-anchor-select" href="https://survivejs.com/#designing-for-impact-vladimir-koncar">#</a></h3>
<p><figure><img src="/0da10dd91acd26371f18b00fd283fa10.jpg" alt="Vladimir Koncar" class="" width="" height="" /><figcaption>Vladimir Koncar</figcaption></figure></p>
<p>Vladimir discussed how he grew his web business over the years and there was a lot to digest. One of the key points was that even the best design wouldn't help you if there's no business case. Sometimes design can turn business into something great as they did with a language learning platform. By addressing the problems in design, they pushed the existing platform into new heights.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#delivering-fast-and-beautiful-images-and-video-doug-sillars" id="delivering-fast-and-beautiful-images-and-video-doug-sillars"></a><span class="text">Delivering Fast and Beautiful Images and Video - Doug Sillars</span><a class="header-anchor-select" href="https://survivejs.com/#delivering-fast-and-beautiful-images-and-video-doug-sillars">#</a></h3>
<p><figure><img src="/45bd6038826eed4a3364f22952178f5d.jpg" alt="Doug Sillars" class="" width="" height="" /><figcaption>Doug Sillars</figcaption></figure></p>
<p>Doug's talk focused on how to get more performance out of images and videos on the web. It's a domain where there are a lot of low hanging fruits ready to be picked since people tend to miss these optimizations. At the simplest level, you should compress your assets well. You should also consider asset dimensions and load them only if needed.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#fluid-typography-sebastijan-duman-i-" id="fluid-typography-sebastijan-duman-i-"></a><span class="text">Fluid typography - Sebastijan Dumančić</span><a class="header-anchor-select" href="https://survivejs.com/#fluid-typography-sebastijan-duman-i-">#</a></h3>
<p><figure><img src="/d5fc89b96ac38c920cb93d28a2ffe3a4.jpg" alt="Sebastijan Dumančić" class="" width="" height="" /><figcaption>Sebastijan Dumančić</figcaption></figure></p>
<p>Sebastijan's talk showed how to achieve fluid typography without ugly breakpoints. It's one of those techniques I'll try out in my work as then I'll have more control over what a site looks like in different resolutions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/b88d7dc19d0892cd2ed3f1e8ce518556.jpg" alt="Resting at WebCamp Zagreb" class="" width="" height="" /><figcaption>Resting at WebCamp Zagreb</figcaption></figure></p>
<p>WebCamp Zagreb was a new acquaintance to me, and if there's time, I'll try to go back next year. I liked the variety of topics present, and the venue was great as well. The conference is quite inexpensive compared to others with a similar caliber, and I have no doubt they'll be sold out next time too. In short, WebCamp Zagreb is a quality conference, and the city is excellent also.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://www.flickr.com/photos/bebraw/sets/72157699028672052">Find my photos of the event at Flickr.</a></blockquote>Experiences on WebExpo 2018aexperiencesonwebexpo20182018-09-24t00:00:00z2018-09-24T00:00:00Z<p>I was invited to <a href="https://www.webexpo.net/">WebExpo 2018</a> as a visitor since <a href="https://survivejs.com/blog/webexpo-2017">I spoke at the conference last year</a>. Prague is one of my favorite cities in Europe, and the conference was good last year, so I decided to go again. Like last time, also this time most of the attendees were local, and I estimate there were roughly a thousand people in total if not more.</p>
<p>The event was held in the same place (Lucerna) as last year. Although a shopping mall busy with people isn't the most obvious place for a conference, I feel it works quite well. My main problem has to do with the acoustics of the main hall. They had the same problem with echo as last year, so it made it annoying to listen to the talks over a more extended period. The other halls didn't have the problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-webexpo-2018" id="overview-of-webexpo-2018"></a><span class="text">Overview of WebExpo 2018</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-webexpo-2018">#</a></h2>
<p><figure><img src="/e8c000545be180917dd595ef0694412e.jpg" alt="Prague" class="" width="" height="" /><figcaption>Prague</figcaption></figure></p>
<p>Like last year, the conference ran four tracks. The fourth track alternated between workshops and lightning talks and I didn't spend much time on it although the topics were interesting. I like the format as often purely technical conferences can get a little annoying. I gain more from design or business talks. During this year's event, there were many insightful talks about design in particular.</p>
<p>My only problem with the schedule was the lack of lunch breaks. It felt a little sad to skip a talk, and it mustn't have been nice for the speakers either since people need their lunch. Perhaps the way to solve this would have been to condense most talks to 30-minute format instead of 40 and putting more emphasis on lightning talks. Sometimes the talks were forced to the long format without adding much content, and sometimes the speakers knew not to push it by cutting the talks to 30-35 minute range which was fine by me.</p>
<p>Instead of taking questions publicly after a talk, WebExpo uses the concept of a speakers' corner where you can discuss personally with a speaker. I think it's an excellent alternative to a public QA which can get awkward sometimes. I also like the way YGLF Kiev solved the problem by having a conversation with the host after the talk.</p>
<p>WebExpo provided pastries and something salty to eat in the mornings. There were also reasonably paid lunch offerings and one option where you could get a hot dog against a registration (seemed to be Czech only so I skipped it). I didn't find paid lunch to be a problem as it's quite easy to find a nice meal in Prague for a reasonable cost.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#day-1" id="day-1"></a><span class="text">Day 1</span><a class="header-anchor-select" href="https://survivejs.com/#day-1">#</a></h2>
<p>Given I traveled from Vienna by train in the morning, I had to skip a couple of the morning talks. Perhaps next time I'll arrive in Prague the day before.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#microcopy-your-users-will-fall-in-love-kinneret-yifrah" id="microcopy-your-users-will-fall-in-love-kinneret-yifrah"></a><span class="text">Microcopy: Your Users Will Fall in Love - Kinneret Yifrah</span><a class="header-anchor-select" href="https://survivejs.com/#microcopy-your-users-will-fall-in-love-kinneret-yifrah">#</a></h3>
<p><figure><img src="/251f0936532fa731dc635c7993a53974.jpg" alt="Kinneret Yifrah" class="" width="" height="" /><figcaption>Kinneret Yifrah</figcaption></figure></p>
<p>I started my day with a talk about Microcopy by Kinneret Yifrah. Her main point was simple; there are opportunities for copywriting everywhere. Instead of writing in technical terms, we should write in human terms instead. It's these small things that count. Whether you give a technical warning or error or a humane one, can make a massive difference to the user experience and brand perception.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#lead-with-design-diamond-ho" id="lead-with-design-diamond-ho"></a><span class="text">Lead with Design - Diamond Ho</span><a class="header-anchor-select" href="https://survivejs.com/#lead-with-design-diamond-ho">#</a></h3>
<p><figure><img src="/f9826507ca5a21d14dc7f3c2df789155.jpg" alt="Diamond Ho" class="" width="" height="" /><figcaption>Diamond Ho</figcaption></figure></p>
<p>The next talk I attended, was about leading with design by Diamond Ho of Facebook. She is working in the intersection of product and design and went through the design thinking process they use at Facebook. I learned from the talk that design is a non-linear challenge even if you present it as a linear process.</p>
<p>The key seems to be in experimentation. For an organization like Facebook, it's essential to be able to run experiments effectively so better results can be reached considering the different stakeholders.</p>
<p>Another point she made is that sometimes simple design can mean a massive amount of work. What's simple from the user, can mean countless work hours for the developers implementing the feature and the changes required can cascade through the entire system. Due to this, experimentation plays a significant role as you don't have an infinite budget to use. Therefore you have to choose your experiments well.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-can-tech-teams-help-or-destroy-a-startup-jan-e-b" id="how-can-tech-teams-help-or-destroy-a-startup-jan-e-b"></a><span class="text">How Can Tech Teams Help or Destroy a Startup? - Jan Řežáb</span><a class="header-anchor-select" href="https://survivejs.com/#how-can-tech-teams-help-or-destroy-a-startup-jan-e-b">#</a></h3>
<p><figure><img src="/f2c3fe27705a39811e7a772a1fd15f15.jpg" alt="Jan Řežáb" class="" width="" height="" /><figcaption>Jan Řežáb</figcaption></figure></p>
<p>I got most of Jan Řežáb's talk about the Czech software industry accidentally, but it was interesting nevertheless. There's a sizable developer shortage in Czech (up to 50.000 developers, can it be true?) and also there's an attitude problem.</p>
<p>According to Jan, demotivated developers in Czech prefer to remain in their companies while doing side work for extra pay. It's something that's hurting the industry, and his advice is that people should stop doing it. I can see why but it's maybe not an easy problem to solve.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pitching-to-win-christian-barnett" id="pitching-to-win-christian-barnett"></a><span class="text">Pitching to Win - Christian Barnett</span><a class="header-anchor-select" href="https://survivejs.com/#pitching-to-win-christian-barnett">#</a></h3>
<p><figure><img src="/f491fdabbb9435b4b77ea9aaa8b98c13.jpg" alt="Christian Barnett" class="" width="" height="" /><figcaption>Christian Barnett</figcaption></figure></p>
<p>Christian's talk about pitching was the highlight of the conference for me. The speech reinforced some of my beliefs about pitching, and he highlighted techniques such as reframing the problem and putting emphasis on how people will hear you. The main point is that everyone will intercept your message through their viewpoint and needs. Therefore what is heard and gets through is different per person.</p>
<p>He claimed that many people put a lot of effort into creating something but not enough into how to communicate the creation. By putting more focus into pitching and how the idea is presented, has definite value as if the point isn't made correctly, it won't go through.</p>
<p>Christian didn't use any slides in his presentation (well, technically one to show his name) and I found this captivating. You indeed had to focus on what he had to say, and I noticed he was using several techniques, such as repetition, in his talk. He had a set of ideas in mind he wanted to get through, and I think he managed to do that most excitingly.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#design-systems-at-scale-rich-fulcher" id="design-systems-at-scale-rich-fulcher"></a><span class="text">Design Systems at Scale - Rich Fulcher</span><a class="header-anchor-select" href="https://survivejs.com/#design-systems-at-scale-rich-fulcher">#</a></h3>
<p><figure><img src="/fc9c1084affb022f071cb498b711000a.jpg" alt="Rich Fulcher" class="" width="" height="" /><figcaption>Rich Fulcher</figcaption></figure></p>
<p>Rich Fulcher from Google discussed how they implemented design systems (the famous Material Design) in Google and the challenges they faced. Given I'm a design system convert by now, there wasn't that much new in the talk for me. The critical point was that when an organization is significant, keeping a system in sync can become a challenge.</p>
<p>Different units might have different ideas and needs which need to be taken into account. A design system captures concerns that might otherwise be solved differently and again be all over the place. In short, design systems allow capturing everyday needs into patterns which may be reused across the organization.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#live-demo-react-js-portals-and-modern-js-apps-for-cms-tom-konr-dy" id="live-demo-react-js-portals-and-modern-js-apps-for-cms-tom-konr-dy"></a><span class="text">Live Demo: React.js Portals and Modern JS Apps for CMS - Tomáš Konrády</span><a class="header-anchor-select" href="https://survivejs.com/#live-demo-react-js-portals-and-modern-js-apps-for-cms-tom-konr-dy">#</a></h3>
<p><figure><img src="/54f6dced979655dd5910dac2dfd14dd0.jpg" alt="Tomáš Konrády" class="" width="" height="" /><figcaption>Tomáš Konrády</figcaption></figure></p>
<p>I was curious about Tomáš's talk as the topic was close to my heart given the way I develop websites these days. I've ended up using GraphQL as my CMS through GitHub and then rendering that to static HTML through React. I've found the approach fits my needs well and likely scales to new requirements as time goes by.</p>
<p>Tomáš did mostly the same but from a different point of view. He demonstrated how to start from a CMS such as WordPress and then integrate React with it. The result of his exploration was <a href="https://react-union.org/">React Union</a>. To tell you more about the solution, I hope to interview for this blog shortly.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#config-less-server-less-effort-less-guillermo-rauch" id="config-less-server-less-effort-less-guillermo-rauch"></a><span class="text">Config-less, Server-less, Effort-less - Guillermo Rauch</span><a class="header-anchor-select" href="https://survivejs.com/#config-less-server-less-effort-less-guillermo-rauch">#</a></h3>
<p>I wanted to see Guillermo's talk but given his speech was delayed due to a delayed flight and I was hungry, I decided to skip it and explore Prague instead. It was time to find some food, so I went to my favorite place.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://www.webexpo.net/prague2018/talk?id=config-less-server-less-effort-less">Guillermo's talk and the slides are online</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#day-2" id="day-2"></a><span class="text">Day 2</span><a class="header-anchor-select" href="https://survivejs.com/#day-2">#</a></h2>
<p><figure><img src="/3ab4c15800204a4e6f59d5e2d9805764.jpg" alt="A conference host" class="" width="" height="" /><figcaption>A conference host</figcaption></figure></p>
<p>Day two of the conference continued on the same format. I skipped the morning keynote and started my day at 11.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-cost-of-not-testing-luk-linhart" id="the-cost-of-not-testing-luk-linhart"></a><span class="text">The Cost of (not) Testing - Lukáš Linhart</span><a class="header-anchor-select" href="https://survivejs.com/#the-cost-of-not-testing-luk-linhart">#</a></h3>
<p><figure><img src="/110184a4c087da4645865e3721d6a399.jpg" alt="Lukáš Linhart" class="" width="" height="" /><figcaption>Lukáš Linhart</figcaption></figure></p>
<p>Lukáš's testing talk was one of my favorites of the conference. The main point for me is that testing is an integral part of the culture. Testing pyramid alone doesn't capture enough as it provides an only technical view of the topic. There are several layers underneath which matter more.</p>
<p>You should always test the aspects you cannot afford to break. Testing should be seen as a way of managing risks and defining what is acceptable in a business context. Can you afford to lose a few hours, minutes, or seconds of sales? These are the kind of limits you have to figure out and then test accordingly.</p>
<p>After Lukáš's talk, I went for a long lunch with a good friend and resumed the day with a presentation about workshops.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-to-design-a-design-workshop-bob-marvan" id="how-to-design-a-design-workshop-bob-marvan"></a><span class="text">How to Design a Design Workshop - Bob Marvan</span><a class="header-anchor-select" href="https://survivejs.com/#how-to-design-a-design-workshop-bob-marvan">#</a></h3>
<p><figure><img src="/0a5c6ac9b68ea1f2d479f0e71303540c.jpg" alt="Bob Marvan" class="" width="" height="" /><figcaption>Bob Marvan</figcaption></figure></p>
<p>Bob's talk was about how to use design thinking to design a design thinking workshop. The core point of the talk is that the techniques used in a design workshop can be useful for developing the workshop itself. He also made critical points about managing people and distributing responsibility.</p>
<p>He also made a point about energy. If you start a workshop strong, it will be easier to sustain a high energy level during it although it might inevitably go down over time. His point about using psychology to make people learn was great. Workshops are about compressing people concerning focus, and that's what you should use to your advantage to gain good outcomes.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#design-is-communication-pascal-heynol" id="design-is-communication-pascal-heynol"></a><span class="text">Design is Communication - Pascal Heynol</span><a class="header-anchor-select" href="https://survivejs.com/#design-is-communication-pascal-heynol">#</a></h3>
<p><figure><img src="/4cf25a27252af7c3907c526db419066e.jpg" alt="Pascal Heynol" class="" width="" height="" /><figcaption>Pascal Heynol</figcaption></figure></p>
<p>Pascal's talk was about his progress as a designer and what design means to him. He re-iterated Shannon's theory of communication and pointed out design follows the same model since the purpose of design is to communicate an idea. Considering that, you can evaluate your design and the aspects affecting it.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#css-in-js-patterns-vojt-ch-mik-" id="css-in-js-patterns-vojt-ch-mik-"></a><span class="text">CSS in JS: Patterns - Vojtěch Mikšů</span><a class="header-anchor-select" href="https://survivejs.com/#css-in-js-patterns-vojt-ch-mik-">#</a></h3>
<p><figure><img src="/236945861f14a60182203864d71103f1.jpg" alt="Vojtěch Mikšů" class="" width="" height="" /><figcaption>Vojtěch Mikšů</figcaption></figure></p>
<p>Vojtěch's talk was about the adoption of CSS in JS within Cloudflare and how they achieved the transformation. Given I am going through a similar change in my work, it was interesting to notice the parallels. His problems were in larger scale given he works as a part of the large engineering organization. In that case, the critical point was documenting the approach well beyond the official documentation. He stated that the solution you choose doesn't matter as it's more about mindset since it's relatively easy to move between the technical solutions as needed.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#constant-curiosity-how-brands-earn-trust-by-asking-firecracker-questions-jon-burkhart" id="constant-curiosity-how-brands-earn-trust-by-asking-firecracker-questions-jon-burkhart"></a><span class="text">Constant Curiosity: How Brands Earn Trust by Asking Firecracker Questions - Jon Burkhart</span><a class="header-anchor-select" href="https://survivejs.com/#constant-curiosity-how-brands-earn-trust-by-asking-firecracker-questions-jon-burkhart">#</a></h3>
<p>I skipped Jon's talk but <a href="https://www.webexpo.net/prague2018/talk?id=constant-curiosity-how-brands-earn-trust-by-asking-firecracker-questions">the presentation and the slides are online</a>. My current work isn't brand oriented, but I may check the talk later when it becomes more relevant.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/a10aff802b4a1c68aa103fb88a83d7ba.jpg" alt="The famous Lucerna horse" class="" width="" height="" /><figcaption>The famous Lucerna horse</figcaption></figure></p>
<p>I think WebExpo was a solid event this year too. I hope they make space for lunch in the next year's schedule and compress most talks to a shorter format (personal preference). I also hope they manage to solve the acoustics issue in the main hall. Apart from these minor issues, I look forward to the event again.</p>
Refract - Manage Component Side Effects the Reactive Way - Interview with Thomas Roch.arefractmanagecomponentsideeffectsthereactivewayinterviewwiththomasroch2018-09-16t00:00:00z2018-09-16T00:00:00Z<p>It's difficult to write an application without side effects. Consider handling requests, dealing with third parties, managing storage for example. These concerns come up often.</p>
<p><a href="https://refract.js.org/">Refract</a> by <a href="https://twitter.com/tcroch">Thomas Roch</a> provides a solution to the problem for React users.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/8f3bfe81d2d4de9670c430346c490c3f?s=200" alt="Thomas Roch" class="author" width="100" height="100" />
</span>
Hey, my name is Thomas Roch. I work as a principal software engineer at FanDuel, and I live near Glasgow in Scotland. I've been focusing on front-end engineering for the last few years, and some people might know me for <a href="https://router5.js.org">router5</a>.
</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/react-router5-interview/">Read the router5 interview</a> to learn more about it.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_refract_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_refract_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Refract</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_refract_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Side effects are one of the primary sources of scalability issues for an application: in React lifecycle methods, and event handlers are used to handle side effects (making requests, persisting values in storage, pushing events to a third party vendor, etc.).</p>
<p>Refract allows you to manage side-effects in React (in Inferno and Preact too), using reactive programming: you can observe props a component receives, and decide to take actions on what is observed.</p>
<p>For instance, you can observe a text input, debounce it and make a request to receive a list of suggestions: components like a typeahead are straight-forward to implement with Refract.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_refract_-work-" id="how-does-_refract_-work-"></a><span class="text">How does <em>Refract</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_refract_-work-">#</a></h2>
<p>Refract offers a high-order component that you can use to wrap a component you want to observe. You need to supply two functions to your HoC:</p>
<ul>
<li>A function we call "aperture": it is there for creating a stream of effects (as data).</li>
<li>Each value emitted by your stream of effects will be passed to a second function called "handler" which will trigger side-effects imperatively.</li>
</ul>
<p>A simple example is: you have a multi-step process, and you want to reset the page scroll position each time the step changes. Let's say you have a component called <code>MultiStepProcess</code> which takes a <code>step</code> property, with Refract you would achieve it this way:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> withEffects <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"refract-rxjs"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// The aperture observes step changes, and for each step change</span>
<span class="token comment" spellcheck="true" >// will emit an effect</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >aperture</span> <span class="token operator" >=</span> initialProps <span class="token operator" >=></span> component <span class="token operator" >=></span>
component<span class="token punctuation" >.</span><span class="token function" >observe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"step"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >pipe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >mapTo</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"SCROLL_RESET"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// The handler handles the effects emitted by the aperture</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >handler</span> <span class="token operator" >=</span> initialProps <span class="token operator" >=></span> effect <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>effect<span class="token punctuation" >.</span>type <span class="token operator" >===</span> <span class="token string" >"SCROLL_RESET"</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
window<span class="token punctuation" >.</span><span class="token function" >scrollTo</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >0</span><span class="token punctuation" >,</span> <span class="token number" >0</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Finally, we wrap MultiStepProcess</span>
<span class="token keyword keyword-const" >const</span> MultiStepProcessWithEffects <span class="token operator" >=</span> <span class="token function" >withEffects</span><span class="token punctuation brackets-parentheses" >(</span>handler<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>aperture<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>
MultiStepProcess
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>In your aperture, you can observe values of a prop or arguments a callback prop is called with. Also, you can use any other data source you have available: a redux store (we offer redux bindings to observe actions and selectors), data from a WebSocket, global events, etc. The example above can be extended to fetch data, push analytics events, etc.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more, <a href="https://refract.js.org/examples">see the online examples</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_refract_-differ-from-other-solutions" id="how-does-_refract_-differ-from-other-solutions"></a><span class="text">How does <em>Refract</em> differ from other solutions</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_refract_-differ-from-other-solutions">#</a></h2>
<p>Refract can be compared to solutions commonly found in the Redux ecosystem (redux-saga, redux-observable, redux-loop) but without the need to use Redux. Redux has seen a lot of innovation in managing side effects due to Redux stores being easily observed (actions with middlewares, the state with subscribe).</p>
<p>Refract makes React components observable, and it enables to colocate side-effect management with components: business logic can be isolated per view rather than being centralized, applications become more comfortable to code-split and therefore easier to scale.</p>
<p>Refract is a great way to make use of reactive programming techniques in React, and we've made a special effort to have first-class support for multiple reactive libraries (RxJS, xstream, Most, Callbag): we publish fully typed individual packages rather than the main package with adapters (which lacks type safety).</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>We have a document <a href="https://refract.js.org/introduction/alternatives">comparing Refract to alternative solutions</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_refract_-" id="why-did-you-develop-_refract_-"></a><span class="text">Why did you develop <em>Refract</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_refract_-">#</a></h2>
<p>It's been a long process: what has been open-sourced is the fifth iteration of what we have developed internally at FanDuel to help scale our main application. I was introduced to reactive programming (and React) four years ago: router5 came from starting to learn reactive programming. Three years ago I began to work with a colleague on a new product.</p>
<p>Initially, I was tempted to use CycleJS. We ended up using React with Redux due to the ecosystem and the benefits of functional programming. React, and Redux was seen as a "safer" choice.</p>
<p>I was however still very keen to find opportunities to leverage reactive programming. What is now Refract started with a few thoughts around handling analytics in our app (see <a href="http://troch.github.io/posts/2016/09/27/redux-analytics-without-middleware/">Redux analytics, without middleware</a>).</p>
<p>Through this work, I began to understand the importance of observability, and I started to colocate observing behaviors to components. Initially what was developed was for analytics only. The first iterations were forced by the various use cases we discovered until we eventually came up with Refract: a generic way to handle side-effects using reactive programming.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm not sure I know. We are going to improve examples and add more to our current documentation. If Refract integrates well with existing codebases, We are looking at providing a local state solution to help new projects. The API surface of Refract is tiny, so I don't think it will evolve much. With React, Suspense is next: I am currently exploring ways for Refract to leverage it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_refract_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_refract_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Refract</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_refract_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Reactive programming is becoming a hot topic, and side effect management is an excellent application for it. Refract makes it possible to adopt reactive programming consistently gradually, and I hope it will help a lot of people getting started with it.</p>
<p>The full data journey, from user to persistent storage and back is always evolving and getting simplified. In general, the libraries of today tend to be the implementation detail of tomorrow.</p>
<p>A library like Redux is a good example: it has enforced good habits in state management (and continue to do so), but it will tend to become a pattern inspiring superior abstractions (as a cache in data fetching libraries like Apollo, in new local state abstractions leveraging React context API, ...).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>The journey is long so staying curious and critical, don't settle, be opinionated but not dogmatic, collaborate with people around you, and listen to your guts! Quite often we have good intuitions: it is by learning, discussing and experimenting with others that we develop knowledge, gather experience and innovate. But all of that without losing focus on the primary goal: crafting great experiences for users!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I like Robin Frischmann's work and in particular <a href="fela.js.org">Fela</a>, a CSS-in-JS library we've been using successfully for more than a year.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for the interview!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Thomas! Refract provides a robust solution for managing application side effects in reactive style by the looks of it.</p>
<p>To learn more, head to <a href="https://refract.js.org/">Refract site</a> and <a href="https://github.com/fanduel-oss/refract">check the project on GitHub</a>.</p>
DSS - Deterministic Style Sheets - Interview with Giuseppe Gurgoneadssdeterministicstylesheetsinterviewwithgiuseppegurgone2018-09-05t00:00:00z2018-09-05T00:00:00Z<p>CSS is perhaps one of the most controversial parts of web development. For some, it's the favorite, for some the least pleasant part. As a result, many solutions have appeared around it to make it more palatable to web developers.</p>
<p>To learn more about one, this time we'll learn about <a href="https://dss-lang.com/">DSS</a>, a solution by <a href="https://twitter.com/giuseppegurgone">Giuseppe Gurgone</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/a1af89e8768b7bb3c6ed933238797464.jpg" alt="Giuseppe Gurgone" class="author" width="100" height="100" /><figcaption>Giuseppe Gurgone</figcaption></figure></p>
<p>My name is Giuseppe, and I am a front-end engineer from Sicily, Italy. In the past I worked for Yelp on their frontend core team, I am a core team member of SUIT CSS and co-author of a CSS-in-JS library called styled-jsx. If it wasn't clear, I like to build front-end infrastructure and CSS libraries. 😅</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_dss_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_dss_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>DSS</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_dss_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>DSS - Deterministic Style Sheets - is a superset of CSS that can be compiled to atomic CSS classes.</p>
<p>In addition to producing incredibly small bundles, atomic CSS classes can be exploited to bring deterministic styles resolution to CSS.</p>
<p>For the ones who are not familiar with the concept, deterministic styles resolution means that styles resolve and affect an element based on their application order rather than cascade or their source files order.</p>
<pre><code class="lang-html"><span class="token comment" spellcheck="true" ><!-- text is green --></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>red green<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>hi there SurviveJS friends<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
<span class="token comment" spellcheck="true" ><!-- text is red --></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>green red<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>hi there SurviveJS friends<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
</code></pre>
<p>In my opinion this way of using styles is more powerful and predictable, and apparently I am not the only one who thinks that:</p>
<blockquote>
<p>This is definitely how I <em>thought</em> css worked when I first read the spec in ~2002/3 - <strong><a href="https://twitter.com/stubbornella/status/1019986406293114880">Nicole Sullivan 💎 (@stubbornella) - July 19, 2018</a></strong></p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_dss_-work-" id="how-does-_dss_-work-"></a><span class="text">How does <em>DSS</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_dss_-work-">#</a></h2>
<p>DSS is similar to CSS Modules, and it is language agnostic.</p>
<p>You write styles in regular <code>.css</code> files and then compile those with the <a href="https://dss-lang.com/usage/#dss-compiler">DSS compiler</a> to produce a single tiny bundle of atomic CSS classes that you include in your application via <code>link</code> tag.</p>
<p>Like CSS Modules, for each CSS file, the DSS compiler produces a JSON file (or JS module) which maps the original selectors to their corresponding atomic CSS classes.</p>
<pre><code class="lang-css"><span class="token selector" ><span class="token class" >.foo</span> </span><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >margin-top</span><span class="token punctuation" >:</span> <span class="token number" >30</span>px<span class="token punctuation" >;</span>
<span class="token property" >color</span><span class="token punctuation" >:</span> black<span class="token punctuation" >;</span>
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >10</span>px<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token selector" ><span class="token class" >.bar</span> </span><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >color</span><span class="token punctuation" >:</span> green<span class="token punctuation" >;</span>
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >345</span>px<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"foo"</span><span class="token operator" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >"dss_marginTop-30px"</span><span class="token punctuation" >,</span>
<span class="token string" >"dss_color-black"</span><span class="token punctuation" >,</span>
<span class="token string" >"dss_fontSize-10px"</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token property" >"bar"</span><span class="token operator" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"dss_color-green"</span><span class="token punctuation" >,</span> <span class="token string" >"dss_fontSize-345px"</span><span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Above is what you <code>import</code> in your templates when you want to use the DSS styles. You can then consume those styles using a helper that merges the atomic CSS classes arrays right to left like <code>Object.assign</code> does in JavaScript.</p>
<pre><code class="lang-js"><span class="token comment" spellcheck="true" >// DSS also comes with a webpack loader if you are using it in JavaScript.</span>
<span class="token keyword keyword-import" >import</span> styles <span class="token keyword keyword-from" >from</span> <span class="token string" >"./my-component.css"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> classNames <span class="token keyword keyword-from" >from</span> <span class="token string" >"dss-classnames"</span><span class="token punctuation" >;</span>
document<span class="token punctuation" >.</span>body<span class="token punctuation" >.</span>innerHTML <span class="token operator" >=</span> <span class="token template-string" ><span class="token string" >`<div class="</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span><span class="token function" >classNames</span><span class="token punctuation brackets-parentheses" >(</span>
styles<span class="token punctuation" >.</span>foo<span class="token punctuation" >,</span>
styles<span class="token punctuation" >.</span>bar
<span class="token punctuation brackets-parentheses" >)</span><span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >">hi</div>`</span></span><span class="token punctuation" >;</span>
</code></pre>
<p>Above produces:</p>
<pre><code class="lang-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span>
<span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dss_marginTop-30px dss_color-green dss_fontSize-345px<span class="token punctuation" >"</span></span>
<span class="token punctuation" >></span></span>
hi
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
</code></pre>
<p>Merging is done (right to left) using the first occurrence of a property, e.g., <code>dss_color</code> and ignoring the others.</p>
<p>Thanks to the low specificity and naming scheme of the atomic CSS classes, DSS can guarantee that styles are resolved in application order, i.e., deterministically!</p>
<p>Note that the <code>classnames</code> helper can be implemented in any language.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_dss_-differ-from-other-solutions-" id="how-does-_dss_-differ-from-other-solutions-"></a><span class="text">How does <em>DSS</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_dss_-differ-from-other-solutions-">#</a></h2>
<p>DSS is just proper old static CSS compiled to atomic CSS classes. Many love atomic CSS classes based solutions like <a href="http://basscss.com/">Basscss</a>, <a href="https://tachyons.io/">Tachyons</a>, and <a href="https://tailwindcss.com/">Tailwind CSS</a>. While I like how productive such approaches make me, I think that having to do the compiler job and memorize all those class names is a bit inconvenient.</p>
<p>By compiling CSS to atomic classes, DSS allows me to write as many declarations as I want without penalizing the size of the final bundle. So I get to write the CSS I already know, e.g., <code>margin-top: 25px</code> and a compiler makes sure that it is compiled to atomic CSS and deduped if there are multiple occurrences of that declaration. It is a win-win situation.</p>
<p>Ah, and you also get deterministic style resolution. 🕶</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_dss_-" id="why-did-you-develop-_dss_-"></a><span class="text">Why did you develop <em>DSS</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_dss_-">#</a></h2>
<p>Mainly because I use CSS Modules at work and I am a bit frustrated about the fact that you can still write overly specific CSS selectors. If you import the CSS files in the wrong order, you can easily screw up your application (👋 cascade).</p>
<p>In addition to that with atomic CSS your application bundle size grows logarithmically, i.e., at some point, you can keep adding CSS, but the file size of your CSS bundle won't change (increase).</p>
<p>In the end, I wanted to bring some of the good ideas from CSS-in-JS to static CSS land (and make Alex Russell happy).</p>
<blockquote>
<p>So my advice for folks who want to do the CSS-in-JS thing is to find a system that compiles the rulesets out and bottoms out at class set/unset. - <strong><a href="https://twitter.com/slightlylate/status/1025528324368490496">Alex Russell (@slightlylate) - August 3, 2018</a></strong></p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I would love to add source maps support for better debuggability in development, add automatic shorthand properties unwrapping and abstract the atomification library so that it can be used at runtime too, you know for dynamic styles.</p>
<p>But most importantly it would be amazing if people could try it out and provide feedback!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_dss_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_dss_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>DSS</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_dss_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I don't know what is the future of DSS like since the project is still at the validation stage. The principles behind it have been proven to be reliable by other similar solutions (e.g., <a href="https://css-blocks.com/">CSS Blocks</a>) therefore the future of it might depend on my marketing skills and the ability to make other people aware of its existence. :)</p>
<p>For what concerns web development I think that the future is about building a smaller, simpler and more robust set of APIs and primitives on top of the DOM that will act as the <code>normalize.css</code> for the Web Platform. React Native is doing this for native platforms and React Native for Web is a first attempt to build a web framework to build better web applications.</p>
<p>For what I know we could even <a href="https://medium.com/@velmu/is-it-time-to-reconsider-dreamweaver-34d442e5c278">go back to DreamWeaver</a> though.</p>
<p>We will also see a mix of web technologies and native code thanks to WebAssembly - <a href="https://pspdfkit.com/blog/2017/webassembly-a-new-hope/">we already do that at work</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>The beginning is probably the best and more exciting part of a programmer career. At this stage, you probably don't or can't have strong opinions and are less likely to scope creep which is a great thing. Don't let the lack of experience or knowledge intimidate you, roll with it, get things done, break things and learn as you go.</p>
<p>While you do that, also review your code and "try harder" constantly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Nicolas Gallagher about React Native for Web, @electrobabe and @evatrostlos because they are starting <a href="https://twitter.com/electrobabe/status/1034134991846998017">Women && Code</a> in Vienna.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<ul>
<li>If you use React and any <code>className</code> helper I made an awesome Babel plugin for you: <a href="https://github.com/giuseppeg/babel-plugin-classnames">babel-plugin-classnames</a>.</li>
<li>I also developed a little tool to check the file size of your CSS bundle and what it would be like if styles were compiled to atomic CSS classes. Check out <a href="https://www.npmjs.com/package/atomic-css-stats">atomic-css-stats</a>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Giuseppe! I can see DSS solves a key pain point of CSS and I hope developers find it.</p>
<p>You can learn more at <a href="https://dss-lang.com">DSS homepage</a>. Check <a href="https://github.com/giuseppeg/dss">the project also on GitHub</a> and <a href="https://dss-lang.com/static/playground/">play with DSS online</a>.</p>
SurviveJS - Fall Eventsasurvivejsfallevents2018-09-04t00:00:00z2018-09-04T00:00:00Z<p>Summer is over and I've made travel plans for the Fall. More details below.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webexpo-21-23-09-2018" id="webexpo-21-23-09-2018"></a><span class="text">WebExpo - 21-23.09.2018</span><a class="header-anchor-select" href="https://survivejs.com/#webexpo-21-23-09-2018">#</a></h2>
<p><figure><img src="/91a5f9f88c032185e3c997f73dfb7550.png" alt="WebExpo 2018" class="" width="" height="" /><figcaption>WebExpo 2018</figcaption></figure></p>
<p><a href="blog/webexpo-2017">I went to WebExpo last year</a> for the first time. It's one of my favorite crossover conferences. It spans from development to business to design. They have the same spacious venue this year and it's always nice to visit Prague. <a href="https://www.webexpo.net/">Learn more about WebExpo</a> at their site.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you want to join me, use the code <strong>juho10</strong> to get 10% off when buying a ticket.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webcamp-zagreb-04-06-10-2018" id="webcamp-zagreb-04-06-10-2018"></a><span class="text">WebCamp Zagreb - 04-06.10.2018</span><a class="header-anchor-select" href="https://survivejs.com/#webcamp-zagreb-04-06-10-2018">#</a></h2>
<p>I will visit Zagreb for the first time in October when I go to <a href="https://2018.webcampzg.org/">WebCamp Zagreb</a>. The conference is aimed for both designers and developers so it should be highly interesting for me.</p>
<p>I'll discuss static sites and their potential in my talk. In addition I'll give a workshop about webpack.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#graphql-finland-18-19-10-2018" id="graphql-finland-18-19-10-2018"></a><span class="text">GraphQL Finland - 18-19.10.2018</span><a class="header-anchor-select" href="https://survivejs.com/#graphql-finland-18-19-10-2018">#</a></h2>
<p><figure><img src="/10d0ede8927df46c7469876ba46d9099.png" alt="GraphQL Finland 2018" class="" width="" height="" /><figcaption>GraphQL Finland 2018</figcaption></figure></p>
<p>To continue on the success of React Finland, we'll organize the first GraphQL event of the Nordics in the form of <a href="https://graphql-finland.fi/">GraphQL Finland</a>. The lineup looks promising and it's a great way for you to get into the topic and see how GraphQL is transforming the backend.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can get 10% off from the price if you use the code <strong>juho10</strong>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#reactiveconf-29-31-10-2018" id="reactiveconf-29-31-10-2018"></a><span class="text">ReactiveConf - 29-31.10.2018</span><a class="header-anchor-select" href="https://survivejs.com/#reactiveconf-29-31-10-2018">#</a></h2>
<p>I'll visit <a href="https://reactiveconf.com/">ReactiveConf</a> in Prague to see what they are up to this year. The lineup has many familiar names and a few new ones. It's a scouting trip for me as well as I want to make sure React Finland 2019 will be at least as good as the first one.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#jsconf-armenia-03-11-2018" id="jsconf-armenia-03-11-2018"></a><span class="text">JSConf Armenia - 03.11.2018</span><a class="header-anchor-select" href="https://survivejs.com/#jsconf-armenia-03-11-2018">#</a></h2>
<p>I'll visit <a href="https://jsconf.am/">JSConf Armenia</a> at the beginning of November. It's my first trip to the country. In my talk, I'll examine the past, present, and the future of React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I am a organizer at <a href="https://www.meetup.com/ReactVienna/">React Vienna</a> so that's one way to spot me. Let me know if you are coming and I'll give you a tour.</p>
Uppy - Painless Uploads for JavaScript - Interview with Artur Paikinauppypainlessuploadsforjavascriptinterviewwitharturpaikin2018-07-17t00:00:00z2018-07-17T00:00:00Z<p>Let's say you are building a CMS or a blog with an admin interface. It won't take long until you want to upload files to your service. There are standards for this, but eventually, you want to do something more complicated.</p>
<p>That's where solutions like Uppy by <a href="https://twitter.com/arturi">Artur Paikin</a> and the team come in.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/c32ae87863e9a773986f65f5d369e551?s=200" alt="Artur Paikin" class="author" width="100" height="100" />
</span>
I am a software engineer and interface designer from Moscow, living in New York City for the past three years. I run a small dev and design studio “Baguette” and work together with <a href="https://transloadit.com/">Transloadit</a> on <a href="https://uppy.io">uppy.io</a>, an open source JS file uploader.
</p>
<p>I’m passionate about <a href="http://arturpaikin.com/en/home-automation-experiments/">DIY home automation</a>, traveling, <a href="https://indieweb.org/">indie web</a> (RSS and standalone blogs forever!), alternative living spaces (camper vans, cabins, boats) and text adventure games (<a href="https://www.inklestudios.com/80days/">80 Days</a>, <a href="https://www.inklestudios.com/sorcery/">Sorcery!</a> and <a href="https://en.wikipedia.org/wiki/The_Secret_of_Monkey_Island">Secret of the Monkey Island</a> in particular).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_uppy_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_uppy_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Uppy</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_uppy_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://uppy.io">Uppy</a> is a simple file uploading widget/library for the browser. It’s modular, easy to use and lets you worry about more significant problems than building a file uploader.</p>
<p>I sometimes get asked why the world even needs anything beyond <code><input type="file"></code>, why bring JS into this. The truth is: for many cases <code><input type="file"></code> is fine.</p>
<p>Sometimes, however, you’d like to add a nice drag and drop surface with file previews and upload progress. Webcam support might be excellent to have. Picking files from your Dropbox without downloading to your mobile phone first can save a lot of bandwidth and battery life.</p>
<p>For large files, resumability is also essential: like <a href="https://tus.io">surviving wifi hiccups</a> or <a href="https://uppy.io/blog/2017/07/golden-retriever/">accidental navigate aways</a>, and not having to start the upload from scratch.</p>
<p>All those things can significantly improve the user experience when uploading is a central aspect of your web/app. And Uppy can be deployed with nothing but a JS tag, using an existing <code><form></code> for fallback, and your Apache/Nginx server.</p>
<p><figure><img src="/ea8d8dd2f92436e22eb139260eec14cc.png" alt="Uploading files" class="" width="" height="" /><figcaption>Uploading files</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_uppy_-work-" id="how-does-_uppy_-work-"></a><span class="text">How does <em>Uppy</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_uppy_-work-">#</a></h2>
<ol>
<li>Add Uppy to your website or app: include simple <code><script></code> and <code><style></code> tags with a CDN batteries-included bundle, or pick and choose exactly the plugins you need from npm (and build yourself with, e.g., Webpack).</li>
<li>Your users select files by drag and dropping, taking pictures with a camera, pasting any URL, picking from Instagram, Google Drive, etc.</li>
<li>Uppy displays file previews, lets you rename or edit metadata.</li>
<li>Finally, files are uploaded to a backend of your choosing: Apache, Nginx, IIS, tus, Node, Rails, direct S3, etc.</li>
<li>Uppy is processing-backend-aware. So you can optionally do video encoding, image watermarking, face detection, etc., and report the progress back to the user. Since this last step requires heavy-duty servers, you’ll likely be paying some fee if you want this. Someone needs to write the backend glue and scale the servers whether it is Transloadit or Linode/Hetzner/EC2/and your dev team.</li>
</ol>
<pre><code class="lang-html">// please replace `v0.26.0` with the latest version
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>link</span>
<span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>https://transloadit.edgly.net/releases/uppy/v0.26.0/dist/uppy.min.css<span class="token punctuation" >"</span></span>
<span class="token attr-name" >rel</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>stylesheet<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >id</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>choose-files<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>form</span> <span class="token attr-name" >action</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>/upload<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>form</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>script</span> <span class="token attr-name" >src</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>https://transloadit.edgly.net/releases/uppy/v0.26.0/dist/uppy.min.js<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token script language-javascript" ></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>script</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>script</span><span class="token punctuation" >></span></span><span class="token script language-javascript" >
<span class="token keyword keyword-const" >const</span> uppy <span class="token operator" >=</span> Uppy<span class="token punctuation" >.</span><span class="token function" >Core</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
uppy<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>Uppy<span class="token punctuation" >.</span>Dashboard<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
target<span class="token punctuation" >:</span> <span class="token string" >"#choose-files"</span><span class="token punctuation" >,</span>
inline<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
replaceTargetContent<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
uppy<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>Uppy<span class="token punctuation" >.</span>Webcam<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> target<span class="token punctuation" >:</span> Uppy<span class="token punctuation" >.</span>Dashboard <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
uppy<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>Uppy<span class="token punctuation" >.</span>XHRUpload<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
endpoint<span class="token punctuation" >:</span> <span class="token string" >"https://mywebsite.com/receive-file.php"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>script</span><span class="token punctuation" >></span></span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>Check out the <a href="https://codepen.io/uppy/pen/mKrzrM">live version on CodePen</a> and <a href="https://uppy.io/examples/dashboard/">more examples</a>.</blockquote><p>Everything is a plugin in Uppy. Start simple, add just what you need (or don’t): uploaders (”regular“, xhr, s3, tus), Redux integration, React components, progress bar, extracting values from the <code><form></code> element on a page. You name it — we’ve got a plugin for it (if not, send a PR or publish your own, we’ll happily link to it. ;-)</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> uppy <span class="token operator" >=</span> <span class="token function" >Uppy</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
restrictions<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
maxNumberOfFiles<span class="token punctuation" >:</span> <span class="token number" >3</span><span class="token punctuation" >,</span>
minNumberOfFiles<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation" >,</span>
allowedFileTypes<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
"image<span class="token comment" spellcheck="true" >/*" /* Mimetype */</span><span class="token punctuation" >,</span>
<span class="token punctuation" >,</span>
"video<span class="token comment" spellcheck="true" >/*" /* Mimetype */</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
uppy<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>Form<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
target<span class="token punctuation" >:</span> <span class="token string" >"#my-form"</span><span class="token punctuation" >,</span>
getMetaFromForm<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
addResultToForm<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
uppy<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>ReduxDevTools<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
uppy<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span>AwsS3<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
limit<span class="token punctuation" >:</span> <span class="token number" >2</span><span class="token punctuation" >,</span>
timeout<span class="token punctuation" >:</span> <span class="token function" >ms</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"1 minute"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
serverUrl<span class="token punctuation" >:</span> <span class="token string" >"https://uppy-server.myapp.com/"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_uppy_-differ-from-other-solutions-" id="how-does-_uppy_-differ-from-other-solutions-"></a><span class="text">How does <em>Uppy</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_uppy_-differ-from-other-solutions-">#</a></h2>
<p>Commercial offerings cost money and make it hard to switch. Uppy uses open standards and plugins can be written to interface with anything. We do offer a “hosted” option, but you can pack your things and move to your platform.</p>
<p>Besides commercial, here are a few great open source alternatives that come to mind:</p>
<ul>
<li><a href="https://fineuploader.com/">Fine Uploader</a> is a significant source of inspiration for us. It’s been around for a while and is a robust library with tons of features: drag-drop, file previews, validation, uploads to S3, etc.</li>
<li><a href="http://dropzonejs.com/">Dropzone.js</a> — nice UI, a lot of configuration options.</li>
<li><a href="https://react-dropzone.js.org/">react-dropzone</a> — similar to Dropzone, but React-specific.</li>
</ul>
<p>How Uppy is different:</p>
<ul>
<li>Unlike most of the solutions above, Uppy has remote provider support (remote URLs, Instagram, Dropbox, etc.). Other services that do offer it are usually commercial, not open source and sometimes hard to customize.</li>
<li>Webcam support.</li>
<li>We took a different approach with the UI that we feel could be a good fit for existing websites and applications.</li>
<li>Support as mentioned earlier for resumable file uploads via <a href="http://tus.io/">tus</a> protocol and <a href="https://uppy.io/docs/golden-retriever/">Golden Retriever</a> plugin that recovers uploads after browser crashes allow for a robust uploading experience.</li>
<li>Uppy is aware of encoding backends, so you can quickly add file processing, such as video transcoding or image watermarking, when needed.</li>
<li>Uppy supports React (or any other framework) and time traveling but does not require it. There are community offered Vue.js and Angular bindings, and we’re aiming to make those first-class citizens too.</li>
<li>You can supply your plugins for encryption, modification, meta editing, etc.</li>
</ul>
<p><figure><img src="/56fce6ae97b4f489bf8c73f504451750.png" alt="Dropping files" class="" width="" height="" /><figcaption>Dropping files</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_uppy_-" id="why-did-you-develop-_uppy_-"></a><span class="text">Why did you develop <em>Uppy</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_uppy_-">#</a></h2>
<p>When I started working with Transloadit, we wanted to build a new file uploader for their file processing and encoding services. They already had a jQuery SDK and were looking to modernize it. Then, after some initial prototypes and thinking, we’ve decided that instead of working on a proprietary SDK, we would build an open solution for everybody to use and hack. Transloadit support became an optional plugin.</p>
<p>I wanted a file uploader that I could use with my static blog generator to import photos from, say, Instagram and remote URLs. I wanted it to be an open source standalone solution, so Uppy fits well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We are preparing Uppy for a 1.0 release: stabilizing APIs, polishing docs. We’ve just completed conversion to a Lerna repo — meaning that all plugins are published as individual npm packages, but kept in a single GitHub repo — this way it’s easier to add new features in one PR, maintain issues and build tools.</p>
<p>Besides that, we are working on some basic React Native support, we’d like to release an Uppy WordPress plugin, add image cropping, and more options for file restrictions — our to-do list is massive, but contributors help a lot!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_uppy_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_uppy_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Uppy</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_uppy_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<ul>
<li>More developers and tools are becoming aware of bloat, working on reducing JS and CSS bundle sizes. React has recently gotten much more lightweight (Uppy uses excellent <a href="https://preactjs.com/">Preact</a> internally because it’s even lighter), <a href="https://svelte.technology/">Svelte</a> goes further and turns your templates into small, framework-less vanilla JS, which is very interesting. I try to utilize <a href="https://bundlephobia.com/">bundlephobia</a>, <a href="https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost">import-cost</a> and <a href="https://github.com/ai/size-limit">size-limit</a>.</li>
<li>Making things less complex for developers is a recent welcoming trend. <a href="http://browserify.org/">Browserify</a> was relatively simple from the beginning, and <a href="https://webpack.js.org/">Webpack</a> has simplified things by a lot lately (though I still spend a good chunk of my dev <a href="https://mobile.twitter.com/feross/status/1017946412766539776">time configuring it</a>, I do understand it’s a price of flexibility). I enjoyed <a href="https://parceljs.org/">Parcel</a>, I think I’d recommend it for new devs, because it’s just magical to run <code>parcel index.html</code> and see you app load in the browser with all the CSS/PostCSS/JS/Babel “just working”. Tools like <code>create-react-app</code> and <code>vue-cli</code> (which you can even optionally configure without “ejecting”) are excellent solutions to the “configuration fatigue” as well. I also really dig <a href="https://standardjs.com/">Standard JS</a> — I use it and stay productive, instead of arguing about code styles.</li>
<li>I think we’ll continue to see more PWAs and light websites replacing traditional mobile apps, where that makes sense.</li>
<li>Accessibility issues are being brought up and addressed by more developers and framework authors. React docs now have a <a href="https://reactjs.org/docs/accessibility.html">neat section on this topic</a>. I’m betting on this work to continue, because, as <a href="https://twitter.com/sarah_edo/status/846398983664734210">Sara Soueidan said</a>: “The web is accessible by default. You should try not to break it”.</li>
<li>I hope that regained interest in <a href="https://indieweb.org/">indie web</a>, publishing to your domain first, RSS and decentralized internet (different domains, but also <a href="https://datproject.org/">Dat</a>, <a href="https://beakerbrowser.com/">Beaker Browser</a> and <a href="https://ipfs.io/">IPFS</a> will stick and more people will see the benefit of not trusting all your digital life to a single third-party service. The web was all about the democratization of people and knowledge, and I feel these (and similar) technologies could help us keep those ideas alive.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Reading the previous SurviveJS interviews, this seems to come up a lot in our community: don’t get overwhelmed by new frameworks, libs, choices and build tools. I know it’s hard — I see a new CSS-in-JS solution I want to try every day on Twitter. :-)</p>
<p>In the long run, it’s more important to continue developing and publishing your work, than getting stuck mastering new tools. When you’d like to try a new idea, <a href="https://reactjs.org/docs/getting-started.html#try-react">try it the browser with a plain index.html or on CodePen</a>. Start simple and add things on top if needed.</p>
<p>Recently I’ve been seeing more developers who stick to plain CSS and JavaScript, without all the useful bloat we’ve added to it, and can’t help but long for that a little at times. So this is advice offered to me as much as the next person. :-)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://wiki.xxiivv.com/#home">Devine Lu Linvega</a> who lives and travels on a sailboat, while developing open source tools and games— <a href="https://louis.center/p2p-social-networking/">Rotonde</a>, a decentralized social network, <a href="https://wiki.xxiivv.com/#dotgrid">Dotgrid</a> a minimalist illustration tool featuring various line-types, line-styles and vector effects and <a href="https://wiki.xxiivv.com/#paradise">Paradise</a>, an interactive fiction novel game/playground.</li>
<li><a href="https://renee.kooi.me/">Renée Kooi</a>, my colleague who, besides Uppy, is working on some really cool stuff: tinyify (a Browserify plugin that runs various optimizations on JS bundles), <a href="https://github.com/browserify/common-shakeify">common-shakeify</a> (Browserify tree shaking), bankai (a dev server/JS+CSS compiler) and <a href="https://u-wave.net/">üWave</a>, the federated collaborative listening platform.</li>
<li><a href="https://taravancil.com/">Tara Vancil</a> and <a href="https://pfrazee.hashbase.io">Paul Frazee</a> — they are doing rad cool stuff with P2P web and <a href="https://beakerbrowser.com/">Beaker Browser</a>.</li>
<li><a href="https://nolanlawson.com/">Nolan Lawson</a>, besides working on improving the Microsoft Edge browser, is a big proponent of progressive web applications, and has created <a href="https://www.pokedex.org/">Pokedex</a> Pokemon database PWA with offline support and <a href="https://pinafore.social">Pinafore</a> a PWA for Mastodon, a federated alternative to Twitter, using <a href="https://svelte.technology/">Svelte</a> library that I mentioned above.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I’d like to thank our team! It’s a joy to work on a fantastic open source project with unbelievably talented people: <a href="http://github.com/kvz">Kevin</a> and <a href="https://github.com/tim-kos">Tim</a>, the founders of Transloadit, who inspired and sponsored the Uppy project:</p>
<ul>
<li><a href="https://github.com/hedgerh">Harry</a> who we worked with at the beginning of Uppy.</li>
<li><a href="https://renee.kooi.me/">Renée</a>, who — fun fact — I met via GitHub PRs and discussions, and who became an invaluable addition to the team.</li>
<li><a href="https://github.com/ifedapoolarewaju">Ife</a> who maintains Uppy Companion, a server component that enables picking files from Instagram, Google Drive or remote URLs.</li>
<li><a href="https://zaytsev.io/">Alex</a> who helps design our UI.</li>
<li><a href="http://github.com/Acconut">Marius</a> who’s made our tech so robust (as the driving force behind <a href="https://tus.io">tus.io</a>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Artur! It's great to see solutions that go beyond the standards.</p>
<p>To <a href="https://uppy.io/">learn more about Uppy, head to their homepage</a>, <a href="https://github.com/transloadit/uppy">check Uppy on GitHub</a> as well.</p>
GraphQL Finland - Learn GraphQL Up North - Interview with Mikhail Novikovagraphqlfinlandlearngraphqlupnorthinterviewwithmikhailnovikov2018-07-05t00:00:00z2018-07-05T00:00:00Z<p>Following the success of <a href="https://react-finland.fi">React Finland</a>, we decided to organize another event this year. GraphQL Finland has a different scope, and it's going to be the first Nordic GraphQL focused conference.</p>
<p>To tell you more about the conference, I am interviewing <a href="https://twitter.com/freiksenet">Mikhail Novikov</a>, one of the main organizers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/811bcaa26aa7e2af0587b9d170138ff0?s=200" alt="Mikhail Novikov" class="author" width="100" height="100" />
</span>
Hi! I'm Mikhail Novikov, known in the internets as <strong>freiksenet</strong>. I'm a co-founder of Reindex, the first GraphQL startup in the world and have been doing GraphQL consulting, training and open source work for the last couple of years.
</p>
<p>I've developed Apollo Launchpad, schema stitching in graphql-tools and worked with companies like Apollo and Expo. I'm also helping organize GraphQL Finland and React Finland here in Helsinki.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_graphql-finland_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_graphql-finland_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>GraphQL Finland</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_graphql-finland_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>GraphQL Finland is a community-organized non-profit conference about GraphQL. It's going to happen on 18th and 19th of October at Paasitorni Congress Hall in Helsinki, with workshops on the first day and talks on the second day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-_graphql-finland_-offer-" id="what-does-_graphql-finland_-offer-"></a><span class="text">What does <em>GraphQL Finland</em> offer?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-_graphql-finland_-offer-">#</a></h2>
<p>We have a great line-up of speakers, with keynotes done by people like Dan Schafer, one of the creators of GraphQL, and Adam Miskiewitz, who helped moved Airbnb to GraphQL.</p>
<p>The workshops are hosted by well-known members of the community, like Marc-Andre Giroux, Sara Vieira, and Nik Graf. It's an excellent opportunity to learn about GraphQL, if you are new to it, or to improve your knowledge of it if you are already familiar.</p>
<p>The event is also a great chance to meet other members of GraphQL community.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_graphql-finland_-differ-from-other-events-" id="how-does-_graphql-finland_-differ-from-other-events-"></a><span class="text">How does <em>GraphQL Finland</em> differ from other events?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_graphql-finland_-differ-from-other-events-">#</a></h2>
<p>It's a community organized conference. We are not affiliated with any GraphQL vendors, and we want to build an event that's inclusive to everyone interested in GraphQL. We also value diversity much and are offering a free "Let's Learn GraphQL" workshop to members of underrepresented groups. This ticket will also include a conference ticket.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://diversitytickets.org/events/184">Apply for a diversity ticket</a>. The trip is not included.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-arrange-_graphql-finland_-" id="why-did-you-decide-to-arrange-_graphql-finland_-"></a><span class="text">Why did you decide to arrange <em>GraphQL Finland</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-arrange-_graphql-finland_-">#</a></h2>
<p>I don't feel there are enough events focused on GraphQL. It's a rapidly growing technology, but we are very constrained by the fact that the community is often sharing the space with frontend and React at the conferences.</p>
<p>There should be a platform for people to talk about GraphQL and we wanted to make that platform as inclusive and community-oriented as possible. That's one of the main reasons why GraphQL Finland exists.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Assuming the GraphQL Finland goes excellently, we'll organize React Finland in 2019 next.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_graphql-finland_-" id="what-does-the-future-look-like-for-_graphql-finland_-"></a><span class="text">What does the future look like for <em>GraphQL Finland</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_graphql-finland_-">#</a></h2>
<p>I want it to become a yearly event. This, of course, requires more validation that the community is big enough in Finland and the international community wants to attend events here. In any case, I'll work on growing the community.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Always bet on React :P</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Adam Miskiewitz from Airbnb, about how they introduced GraphQL to their vast codebase.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Come to GraphQL Finland! It's going to be great, Finland is beautiful in October, and the conference is going to be genuinely fantastic. I'm looking forward to seeing everyone interested in GraphQL at the event.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Mikhail! I think we'll see in <a href="https://graphql-finland.fi/">GraphQL Finland</a>. Check also <a href="https://medium.com/graphql-finland">the conference blog</a>, <a href="https://twitter.com/GraphQLFinland">follow the Twitter account</a>, and <a href="https://graphql-finland.fi/#tickets">buy tickets</a>.</p>
Progressive Web Apps - The Why and How - Interview with Maciej Caputaaprogressivewebappsthewhyandhowinterviewwithmaciejcaputa2018-06-25t00:00:00z2018-06-25T00:00:00Z<p>Even though the web started from content, it has transformed into an application platform. Approaches like Progressive Web Apps are a clear sign of this.</p>
<p><a href="https://twitter.com/MaciekCaputa">Maciej Caputa</a> will explain the topic in more detail in this interview.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/26152f965d5974e7a30deaa5ab19641f?s=200&d=wavatar" alt="Maciej Caputa" class="author" width="100" height="100" />
</span>
I’m a frontend developer at Netguru – a cool software consultancy that provides design and development services for companies from all over the world. I have four years of experience in web development in various technologies.
</p>
<p>In Netguru, we change our main project every 6-9 months. This way of working gives me ample opportunities to gain experience quickly, code in different environments or tech stacks, and work with different users and clients’ needs.</p>
<p>I focus mostly on JS and React (and all their quirks and quarks), but I always keep in mind the importance of providing excellent user experience with modern and intuitive design. I think that the critical features of making the user happy are performance, interactions, and smooth animations.</p>
<p>I value inclusiveness, openness, and equality – and that’s probably the main reason, why the philosophy behind <a href="https://www.netguru.co/services/progressive-web-apps">Progressive Web Apps</a> is so important to me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_progressive-web-apps_-to-someone-who-has-never-heard-of-them-" id="how-would-you-describe-_progressive-web-apps_-to-someone-who-has-never-heard-of-them-"></a><span class="text">How would you describe <em>Progressive Web Apps</em> to someone who has never heard of them?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_progressive-web-apps_-to-someone-who-has-never-heard-of-them-">#</a></h2>
<p>A PWA is standard web application build with a focus on performance, responsiveness and native experience. Thanks to the manifest file and service workers, you can add the app to your home screen with one click, and then it behaves like a regular mobile app.</p>
<p>An app can offer a full-screen, native experience even when the user is offline. PWAs are capable of downloading data in the background, caching communication with the server, and support push notifications. At the same time, PWAs are lightweight, always up-to-date, and, in many cases, more performant than regular mobile and web applications.</p>
<p>In other words, a PWA looks like a native app, but under the hood, it is a regular website. Thanks to that you can quickly provide a native experience on mobile, which will undoubtedly increase user engagement.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-_progressive-web-apps_-work-" id="how-do-_progressive-web-apps_-work-"></a><span class="text">How do <em>Progressive Web Apps</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-_progressive-web-apps_-work-">#</a></h2>
<p>From the technical point of view, a PWA is a web application built with HTML and JavaScript, to which we add progressive features (mostly with manifest and service worker files). The implementation process of a PWA is no different from that of a regular web app.</p>
<p>A PWA lives on top of fullscreen browser view (without the browser’s address bar and navigation), and can provide the same or even better experience than a native app. It can perform background tasks, work offline, and support push notifications.</p>
<p>PWA strongly relies on caching – it is capable of caching web assets and requests on your device. Moreover, it can save user-generated data when the user is offline and push it to a server when the user becomes online again.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-_progressive-web-apps_-differ-from-other-solutions-" id="how-do-_progressive-web-apps_-differ-from-other-solutions-"></a><span class="text">How do <em>Progressive Web Apps</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-_progressive-web-apps_-differ-from-other-solutions-">#</a></h2>
<p>A Progressive Web App does not require downloading big packages of data to install; you don’t need to publish in the App Store or prompt the user for updates. At the same time, PWAs provide a native experience.</p>
<p>A PWA can share the codebase with your regular website, but it will engage users more than a traditional mobile/responsive website. It seems that users prefer to use applications instead of mobile sites on smartphones, but at the same time, they are not eager to install apps from the stores. PWAs solve that problem.</p>
<h4 class="header"><a class="header-anchor" href="https://survivejs.com/#what-other-solutions-are-there" id="what-other-solutions-are-there"></a><span class="text">What other solutions are there</span><a class="header-anchor-select" href="https://survivejs.com/#what-other-solutions-are-there">#</a></h4>
<p>If we consider a PWA as a replacement for a mobile app, then building a native app would be the other solution. We can do it in a standard native way (separate apps for iOS and Android) or use some tools that allow us to share the same codebase, but still get a native app (like React Native, Xamarin). The other option would be to create a hybrid app – an app build in HTML and JavaScript, working on top of a browser engine, such as PhoneGap, ionic, etc.</p>
<p>All the above solutions have different pros and cons, but what they have in common is that they need to be distributed via the App Store/Google Play Store, often requiring the user to download a large installation package.</p>
<p>Building apps this way, in most cases, means that you can’t share the codebase between mobile and web, and you will have to build two or even three separate apps (and also maintain them separately). It also requires paid developer accounts and using platform-related tools such as Xcode or Android Studio.</p>
<p>The other solution would be to use regular responsive/mobile websites, but in most cases, users prefer to use apps on mobile instead of sites in a browser.</p>
<p>Another buzzword promoted some time ago by Google are AMPs (Accelerated Mobile Pages). Their goal is similar to PWAs: to build performant and fast loading websites that provide a great experience on mobile. However, the main difference is that AMPs are focused on web pages that contain content and sell products, not on applications that offer features. On top of that, to build an AMP, you need to use a particular tool, which has some limitations.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_progressive-web-apps_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_progressive-web-apps_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Progressive Web Apps</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_progressive-web-apps_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p><a href="https://www.netguru.co/blog/10-popular-companies-that-do-progressive-web-apps">Looking at many success stories of PWA from big companies like Financial Times, Twitter, Tinder, Aliexpress and more</a>, I think that the popularity of Progressive Web Apps will be increasing dramatically. PWAs can significantly improve user experience and engagement, especially on mobile devices with slow or even no connection.</p>
<p>The support for PWA features is still growing. Lately, Apple introduced the support for service workers and manifest in their new iOS release. That’s a clear indication that something serious is going on. That said, the support is not perfect yet and still requires some tweaks to provide a fully native experience, for example, the splash screen is not generated from the manifest, as you can see in my <a href="https://www.netguru.co/codestories/few-tips-that-will-make-your-pwa-on-ios-feel-like-native">article</a>.</p>
<p>Some say that 2018 is the year of PWAs. I think that many people still aren’t aware of the possibilities and benefits that come with PWA. It’s our job as developers to choose the best tech stack and consult on the tools used for the product.</p>
<p>I imagine that in the future we will only build one, progressive, app, and it will work natively regardless of a device it is run on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Regardless of the seniority level, I would advise programmers to always keep in mind two simple rules:</p>
<ol>
<li><p>Always think about users’ needs and expectations. Remember that the solutions and tools you use as a frontend developer have a great impact on the intuitiveness and usability of the product you’re building.</p>
</li>
<li><p>Always use the best tool for the job, regardless of what is the hype at the moment.</p>
</li>
</ol>
<p>As soon as you start behaving like a sensible programmer – responsible not only for the code you write but also for the features you deliver – you will be able to add real value to the web world.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I am a fan of React, but I’m watching closely as the new star begins to shine brightly – and I mean Vue. I would suggest interviewing Michał Sajnóg (who has just joined Vue Core Team) about it! Vue and PWA are a match made in heaven. 💪 🌈 🦄</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>PWAs aren’t only a replacement of mobile apps. They also stand for the openness and inclusiveness of the web because they work independently from the device, platform, and connection, providing the best possible user experience on every device.</p>
<p>A lot of people still need to do with a poor Internet connection or slow devices. I think that PWAs will be a huge factor that would make the web more available to them, as they are so light on resources.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Maciej! I think PWAs are a great compromise and a particularly good idea to adopt for web developers. Browsers and devices are starting to get there, and although you cannot always match a native application, PWAs are the perfect fit for specific purposes.</p>
Proppy - Functional props composition for components - Interview with Fahad Ibnay Heylaalaproppyfunctionalpropscompositionforcomponentsinterviewwithfahadibnayheylaal2018-06-22t00:00:00z2018-06-22T00:00:00Z<p>You might be familiar with packages like <a href="https://www.npmjs.com/package/recompose">Recompose</a> that make it easier to compose components. Recompose is React-specific solution. What if there was something broader available?</p>
<p><a href="https://proppyjs.com/">Proppy</a> by <a href="https://twitter.com/fahad19">Fahad Ibnay Heylaal</a> is such a solution.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I interviewed Fahad earlier about <a href="https://survivejs.com/blog/frint-interview">FrintJS</a>, a framework designed to combine React with RxJS.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/19a3655e6ba9e5a496ee690ba03f2180?s=200" alt="Fahad Ibnay Heylaal" class="author" width="100" height="100" />
</span>
I am a software engineer, currently living and loving it in Amsterdam. For almost a decade I have been involved with open source activities, and passionate about developer tooling. Lately, I am focusing more on JavaScript both on the browser and the server-side.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_proppy_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_proppy_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Proppy</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_proppy_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://proppyjs.com">Proppy</a> is a tiny <code>1.5kB</code> library, which enables you to compose your props for UI components functionally. That's all that it does, nothing more.</p>
<p>It comes with additional integration packages for connecting it to other rendering libraries like React.js, Vue.js, and Preact. As well as packages for having interoperability with Redux and RxJS.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_proppy_-work-" id="how-does-_proppy_-work-"></a><span class="text">How does <em>Proppy</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_proppy_-work-">#</a></h2>
<p>The goal of this project is to lift the state of your UI components one level up and keep your components layer always stateless. Data can come from various sources (like Redux, RxJS, REST API, etc.) and can be composed together, and that composition can later be connected to your stateless component.</p>
<p><figure><img src="/3b632139f0af8693663e2a6c6bf0c9cf.gif" alt="Proppy flow" class="" width="951" height="" /><figcaption>Proppy flow</figcaption></figure></p>
<p>All the logic and behavior of your component can be expressed as props using the core <a href="https://proppyjs.com/docs/packages/proppy/"><code>proppy</code></a> package. Afterward, that composition can be connected to your rendering library of choice using the higher-order components that Proppy's integration packages provide.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_proppy_-differ-from-other-solutions-" id="how-does-_proppy_-differ-from-other-solutions-"></a><span class="text">How does <em>Proppy</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_proppy_-differ-from-other-solutions-">#</a></h2>
<p>It has been only a few days since the release, and I am already getting a lot of similar questions like how it differs from Redux and Recompose.</p>
<p>I will explain it briefly below:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#recompose" id="recompose"></a><span class="text">Recompose</span><a class="header-anchor-select" href="https://survivejs.com/#recompose">#</a></h3>
<p>Recompose has been the source of inspiration for this project. I liked how the package was composing props by just using React components in a very functional manner.</p>
<p>The primary difference between Proppy and Recompose is: Proppy is rendering library agnostic. Therefore, not tied to React.</p>
<p>Other key differences include:</p>
<ul>
<li>Proppy gives you access to application-wide dependencies anywhere in Components tree.</li>
<li>Proppy does not create one more Component in the tree per function's usage in the composition.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#redux" id="redux"></a><span class="text">Redux</span><a class="header-anchor-select" href="https://survivejs.com/#redux">#</a></h3>
<p>Redux, on the other hand, is used for application-wide state management. Not necessarily for individual components.</p>
<p>With the concept of <a href="https://proppyjs.com/docs/providers/">providers</a> in Proppy, you can consider your Redux store to be one of them. Other providers in your application could be configuration, theme name, etc.</p>
<p>Proppy itself is unopinionated about what library you use for your application's state management. There is a <a href="https://proppyjs.com/docs/packages/proppy-redux/"><code>proppy-redux</code></a> package for convenience in case you already are using Redux.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_proppy_-" id="why-did-you-develop-_proppy_-"></a><span class="text">Why did you develop <em>Proppy</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_proppy_-">#</a></h2>
<p>To be strictly honest, I submitted a talk proposal at <a href="https://amsterdamjs.com/">AmsterdamJS JSNation</a> conference, which was about embracing RxJS in React and Vue.js. Once my talk was accepted, I had to experiment and come up with some solution to demonstrate in my presentation.</p>
<p>A first feature that I had in my mind was to only support a "stream in" and "stream out" flow of props expressed via Observables which is done in <a href="https://proppyjs.com/docs/packages/proppy-rx/"><code>proppy-rx</code></a> package.</p>
<p>That experimentation ultimately ended up becoming Proppy.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>There is a sudden increase in interest in "Micro Frontend Architecture" lately. I think I would like to explore this a bit. I have done something similar in <a href="https://frint.js.org">FrintJS</a> before, but I think there is room for a more unopinionated and smaller library that others would be more interested in adopting.</p>
<p>Maybe I can utilize Proppy for this (since it already works with React, Vue, and Preact), and build something that supports the broader ecosystem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_proppy_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_proppy_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Proppy</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_proppy_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Proppy is still only a few weeks old. I will be writing a lot more documentation and share more examples so others can make better decisions regarding adopting this library in their projects. But it's nice to see other developers mentioning via GitHub issues that they have already chosen it in their production applications.</p>
<p>Regarding general trends, I suspect a large group of developers will embrace a new transpile-to-javascript language soon. A lot of us used CoffeeScript before, then Babel came up, and then TypeScript. I think the next big thing is going to be ReasonML, and I am excited about how the community responds to it over time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Don't get overwhelmed or distracted by every new framework or library (even <a href="https://proppyjs.com">Proppy</a> :D) that pops up every other day. Pick something, and stick to it until you feel at home. Knowing your tools inside out pays off more in the long run. Learn to understand when you want a new tool, and when you need one :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I am a big fan of Ives van Hoorne and everything that he is doing with CodeSandbox. I would love to know what more exciting things he is working on at the moment.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/codesandbox-interview">I interviewed Ives about CodeSandbox earlier</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I would like to thank you very much for arranging this interview, and help spread the word for <a href="https://proppyjs.com">Proppy</a>!</p>
<p>For the readers, I would highly recommend you to go through the documentation and playground if this interview has sparked interest in you at all :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Fahad! It's great how you ran with the idea and pushed it to a polished state.</p>
<p>To learn more about Proppy, consider the following resources:</p>
<ul>
<li><a href="https://proppyjs.com/docs/introduction/">Docs</a></li>
<li><a href="https://proppyjs.com/docs/api/">API</a></li>
<li><a href="https://proppyjs.com/docs/playground/">Playground</a></li>
<li><a href="https://github.com/fahad19/proppy">GitHub</a></li>
</ul>
SurviveJS - Summer Eventsasurvivejssummerevents2018-05-30t00:00:00z2018-05-30T00:00:00Z<p>Summer is a great time to travel and see new places. So far I've scheduled three events for the Summer although more may appear depending on the public interest.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#grazjs-06-07-06-2018" id="grazjs-06-07-06-2018"></a><span class="text">GrazJS - 06-07.06.2018</span><a class="header-anchor-select" href="https://survivejs.com/#grazjs-06-07-06-2018">#</a></h2>
<p>The first event where I'll take part this Summer is <a href="https://www.meetup.com/grazjs/events/249491912/">GrazJS meetup on 6th of June</a>. We'll do <a href="https://reactvienna-workshops-styria.now.sh/">workshops on 7th</a> so if you are interested in either ReasonML, design systems, or webpack, this is your chance to get a deep dive into the topic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#jimdo-dev-talks-28-06-2018" id="jimdo-dev-talks-28-06-2018"></a><span class="text">JIMDO Dev Talks - 28.06.2018</span><a class="header-anchor-select" href="https://survivejs.com/#jimdo-dev-talks-28-06-2018">#</a></h2>
<p>I will be going to Hamburg on 28th of June to participate in <a href="https://www.meetup.com/JIMDO-Dev-Talks/events/251172433/?eventId=251172433">JIMDO Dev Talks</a> event as a guest speaker.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#jscamp-barcelona-18-20-07-2018" id="jscamp-barcelona-18-20-07-2018"></a><span class="text">JSCamp Barcelona - 18-20.07.2018</span><a class="header-anchor-select" href="https://survivejs.com/#jscamp-barcelona-18-20-07-2018">#</a></h2>
<p>I will go to <a href="https://jscamp.tech/">JSCamp Barcelona</a> in July. You can <a href="https://ti.to/jscamp/jscamp-barcelona-2018/discount/SURVIVEJS">get -10% off if you use my promocode</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>The Summer is shaping up nicely and more events might come up. It's likely we'll organize local events especially in the context of <a href="https://www.meetup.com/ReactVienna/">React Vienna</a>.</p>
Fastpack - Pack JavaScript code fast and easy - Interview with Oleksiy Golovkoafastpackpackjavascriptcodefastandeasyinterviewwitholeksiygolovko2018-05-29t00:00:00z2018-05-29T00:00:00Z<p>Tools like browserify and webpack popularized the idea of bundling. The idea is to transform your web application into a format that can be distributed to browsers. Bundlers operate on module level and can combine the assets in various ways.</p>
<p><a href="http://fastpack.io/">Fastpack</a> by <a href="https://twitter.com/zindelzindel">Oleksiy Golovko</a> is a new bundler that emphasizes performance. Read on to learn how it achieves this goal.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/8aa7fdc0b430eeed5724622e86a40c12?s=200" alt="Oleksiy Golovko" class="author" width="100" height="100" />
</span>
I am a freelance Software Developer living in Prague, Czech Republic. I have been working with various web technologies as of 2004 (PHP at that time!). I love solving challenging problems and working on the development tools.</p>
<p>When not programming I read, play tennis/squash/badminton and spend time with my three kids and the beautiful wife. Also, I am passionate about tasting good beers – you cannot resist it here in the Czech Republic!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-fastpack-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-fastpack-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Fastpack</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-fastpack-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>Fastpack</em> is a Javascript bundler. It can bundle other assets as well using webpack's loaders.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-fastpack-work-" id="how-does-fastpack-work-"></a><span class="text">How does <em>Fastpack</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-fastpack-work-">#</a></h2>
<p><em>Fastpack</em> is written in OCaml and compiled into a binary executable. To start using it, you need to install it from npm: <code>npm install fpack</code>. If everything went fine, you should be able to run <code>node_modules/.bin/fpack --help</code>.</p>
<p>We are trying to maintain the minimum set of required configuration parameters. The only way to pass those is to submit them as command line arguments: entry points, output configuration, resolver settings and preprocessors.</p>
<p>Under the hood it works just like most bundlers do:</p>
<ol>
<li>Resolve dependencies.</li>
<li>Collect modules.</li>
<li>Optionally apply transformations.</li>
<li>Produce the output.</li>
</ol>
<p><em>Fastpack</em> uses the <a href="https://github.com/facebook/flow/">Flow</a> parser for JavaScript, so JSX and flow typings supported out if the box.</p>
<p>Consider the examples below to see how Fastpack can be used:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#build-development-mode-bundle" id="build-development-mode-bundle"></a><span class="text">Build development mode bundle</span><a class="header-anchor-select" href="https://survivejs.com/#build-development-mode-bundle">#</a></h3>
<pre><code class="lang-bash">$ fpack --dev -o dist ./lib/index.js
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#apply-transformations-to-all-javascript-files-in-the-lib-" id="apply-transformations-to-all-javascript-files-in-the-lib-"></a><span class="text">Apply transformations to all JavaScript files in the <code>lib/</code></span><a class="header-anchor-select" href="https://survivejs.com/#apply-transformations-to-all-javascript-files-in-the-lib-">#</a></h3>
<pre><code class="lang-bash">$ fpack --preprocess<span class="token operator" >=</span><span class="token string" >'^lib/.+js$'</span> --dev -o dist ./lib/index.js
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#use-babel-loader-for-transformations" id="use-babel-loader-for-transformations"></a><span class="text">Use <code>babel-loader</code> for transformations</span><a class="header-anchor-select" href="https://survivejs.com/#use-babel-loader-for-transformations">#</a></h3>
<pre><code class="lang-bash">$ fpack ./lib/index.js \
--dev \
-o dist \
--preprocess<span class="token operator" >=</span><span class="token string" >'^lib/.+js$:babel-loader?filename=.babelrc'</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can find more examples and the documentation on the <a href="http://fastpack.io">fastpack.io</a> site.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-fastpack-differ-from-other-solutions-" id="how-does-fastpack-differ-from-other-solutions-"></a><span class="text">How does <em>Fastpack</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-fastpack-differ-from-other-solutions-">#</a></h2>
<p>Well, it is faster :) Speaking seriously, we are aiming for three primary goals:</p>
<ol>
<li>Make bundling phase as fast as possible, ideally, disappearing.</li>
<li>Keep configuration approachable and straightforward.</li>
<li>Keep the <em>Fastpack</em>'s source code clean and logical, so that people can collaborate on it.</li>
</ol>
<p>Naturally, we keep in mind other success parameters, like bundle size, which is very important too. But that's the second tier goal for now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-fastpack-" id="why-did-you-develop-fastpack-"></a><span class="text">Why did you develop <em>Fastpack</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-fastpack-">#</a></h2>
<p>There were several reasons: First, I wanted to understand OCaml & ReasonML better. What do people do with it? What is the workflow? What are the hiccups? TodoMVC or even "Real World Example" didn't seem to be exciting use cases, so I decided to try something out of the compiler's side of things.</p>
<p>The second reason was the amount of the JavaScript code we had in my company. Our bundles are quite big and took a lot of time to rebuild. Of course, I could have configured webpack better, but I was never too successful in it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p><em>Fastpack</em> is young, and there is a long road behind us until it matures enough. Right now, we are considering several directions, which are:</p>
<ul>
<li>Further speed improvements - there are still optimizations which are possible on this front.</li>
<li>Improving the bundle size - more aggressive tree shaking using the control flow graph and elements of the symbolic computation.</li>
<li>Getting the feedback, polishing existing functionality, fixing bugs - e.g., the usual things.</li>
</ul>
<p>Overall, I am passionate about the development tools and would be happy to contribute to other related projects as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-fastpack-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-fastpack-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Fastpack</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-fastpack-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>As far as I can say, we would still need bundler in short/medium term. Hence, <em>Fastpack</em> may have its niche and its users. On the other hand, the HTTP/2 and supporting ECMAScript modules in browsers will likely eliminate a lot of bundler use cases in a long run.</p>
<p>The other (unrelated to Fastpack, or partially related because of the language) trend going on right now is the ReasonML. I think this is the future of the web development alongside the Elm and PureScript.</p>
<p>Of course, I am biased, so take it critically, but writing, debugging & maintaining the OCaml/ReasonML code is so much more comfortable, safer & more pleasant than any other dynamically-typed language I have experienced before.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I am not feeling in a position to be giving advice, but I think something trivial like "learn, practice and communicate" should always work. And yes, <strong>learn OCaml/ReasonML</strong> :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I would love to see an interview with Andrey Popp (@andreypopp), Patrick Stapfer (@ryyppy), Nik Graf (@nikgraf) and Vladimir Kurchatkin (@vkurchatkin) - really loved his talk on ReasonConf.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for the interview!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Oleksiy! Fastpack looks promising. I like the approach and now I'm tempted to try out the tool in a few projects of mine.</p>
<p>Learn more at <a href="http://fastpack.io/">Fastpack documentation</a> or <a href="https://github.com/fastpack/fastpack">Fastpack GitHub</a>.</p>
lint-staged - Run Linters on git Staged Files - Interview with Andrey Okonetchnikovalintstagedrunlintersongitstagedfilesinterviewwithandreyokonetchnikov2018-04-08t00:00:00z2018-04-08T00:00:00Z<p>Although <a href="https://survivejs.com/maintenance/code-quality/linting/">linting a project</a> is a good technique to adopt, it comes with a cost as you have to wait for the linter to complete its work.</p>
<p><a href="https://twitter.com/okonetchnikov">Andrey Okonetchnikov</a> figured out a way to solve the problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/69bb6b30cd7b682ba5d5a1f352e6862a?s=200" alt="Andrey Okonetchnikov" class="author" width="100" height="100" />
</span>
I’m a Front End Engineer and User Interaction Designer from Russia living in Vienna, Austria. I have been working with web technologies since 1999, and I love solving complex problems, no matter if it’s a design or a technical challenge. I’m passionate about UI and UX design, typography, music, photography, mountain biking, and coffee.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-lint-staged-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-lint-staged-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>lint-staged</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-lint-staged-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>lint-staged is a simple to use tool to enforce code quality in teams.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-lint-staged-" id="why-did-you-develop-lint-staged-"></a><span class="text">Why did you develop <em>lint-staged</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-lint-staged-">#</a></h2>
<p>I care a lot about code readability and maintainability. To keep my code in good shape I use linters and other code analysis tools that help me catch simple bugs earlier. While working with different teams I noticed that:</p>
<ol>
<li>Not everyone cares so much about code quality.</li>
<li>Not everyone has proper linter setup in their editors. </li>
</ol>
<p>As a result, even though some people were committed to using linters, the overall quality of the code was far from great, and it wasn’t improving. This kept me thinking about how to enhance the quality of code in teams without becoming a pain.</p>
<p>The idea behind of lint-staged is to make the setup process for all developers on the team as simple as possible. Instead of writing instructions on “how to setup XXX linter in YYY code editor” and hoping everyone will follow it, you can commit lint-staged configuration to the repository and next time anyone pulls the code from the remote server they will have the proper setup up and running.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-lint-staged-work-" id="how-does-lint-staged-work-"></a><span class="text">How does <em>lint-staged</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-lint-staged-work-">#</a></h2>
<p>Lint-staged is supposed to be used with git pre-commit hook. Pre-commit hook prevents developers from submitting their work to the repository if it’s not up to the project’s standard. Unfortunately, there are two problems with git hooks:</p>
<ol>
<li>They are hard to setup and manage across teams. The problem can be solved by using packages like <a href="https://www.npmjs.com/package/husky">husky</a> or <a href="https://www.npmjs.com/package/pre-commit">pre-commit</a>.</li>
<li>Running linters on pre-commit can be time-consuming since it will lint the whole repository on every commit.</li>
</ol>
<p>Lint-staged solves the second problem by only running linters on files that are “staged” for the commit. If you follow good commit practices, you might have edited ten files, but you’d like only two of them in the single commit.</p>
<p>In git, you select those two files by “staging” them using <code>git add …</code> command. When you then run <code>git commit</code>, lint-staged will only run linters on those two files keeping your work in progress unchecked! By doing so, lint-staged reduces the time needed to run linters but also makes sure that only relevant to commit changes are linted.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-lint-staged-differ-from-other-solutions-" id="how-does-lint-staged-differ-from-other-solutions-"></a><span class="text">How does <em>lint-staged</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-lint-staged-differ-from-other-solutions-">#</a></h2>
<p>There are not so many alternatives as far as I know. <a href="https://pre-commit.com">pre-commit</a>, which is written in Python, is the closest alternative and it has similar goals so you might want to take a look at it, too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I’m fascinated by code analysis tools and would like to work on tools that are the intersection of design and technology: an automated way for better web typography or static analysis tools for design systems and components libraries maintainers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-lint-staged-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-lint-staged-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>lint-staged</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-lint-staged-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope to crack the long-standing issue with <a href="https://github.com/okonet/lint-staged/issues/62">partially committed files</a> which I’ve been working on for more than a year now. So if you think you can help me, please feel free to join me!</p>
<p>As for general trends: I think JavaScript trend will keep growing and this will lead to:</p>
<ol>
<li>Better code analysis tools that optimize JavaScript code and reduce runtime payload will appear.</li>
<li>The search for more robust languages will continue. One of the candidates to become the type-safe JavaScript is <a href="https://reasonml.github.io">ReasonML</a> which makes me very excited. If you’re interested in this trend, you should attend <a href="https://www.reason-conf.com">ReasonConf</a> which I’m co-organizing.</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Don’t jump on the technology hype-trains—those come and go all the time. Instead, learn basics of the web platform: HTML, CSS, accessibility since they are the foundation of the open and accessible web. Take some time to learn basics of the graphic design, computer science, algorithms. Focus on creating and shipping products that are useful and user-friendly and not on the technology behind it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview, Andrey! I use lint-staged actively and it even made it to <a href="https://survivejs.com/maintenance/infrastructure/automation/">the maintenance book</a>. You can see how to set it up there.</p>
<p>To learn more about the tool, <a href="https://github.com/okonet/lint-staged">check lint-staged on GitHub</a>!</p>
"SurviveJS - Webpack" book updated to webpack 4aquotsurvivejswebpackquotbookupdatedtowebpack42018-03-19t00:00:00z2018-03-19T00:00:00Z<p>Quite a bit has happened in the world of webpack. Most notably, the <a href="https://medium.com/webpack/webpack-4-released-today-6cdb994702d4">webpack reached version 4</a> recently. The purpose of this release of the book is to update it to support webpack 4 while preparing towards the next paper edition.</p>
<p>Compared to <a href="https://survivejs.com/survivejs-webpack-and-maintenance">the previous release</a> this one is even lighter although it's more informative at places. Webpack became simpler and this meant the book could as well. Most notably <code>CommonsChunkPlugin</code> is gone now and the tool comes with better defaults.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>Somehow the December and the early part of the year just went by. Organizing <a href="https://react-finland.fi/">React Finland</a> took its toll and it's still an ongoing effort. On the plus side, doing this has taught me a lot so far.</p>
<p>I've also begun to generate some business in Vienna although it hasn't been particularly easy. There's likely more to come and these things tend to get easier over time.</p>
<p>After webpack 4 came out, I updated the book to it fairly quickly. I gave it some extra polish and now it's the time to release the improvements to the wider public. There's still some work left to be done and I can cover topics such as WebAssembly in future versions but overall it feels like the best version yet.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-3" id="book-improvements-2-3"></a><span class="text">Book Improvements - <code>2.3</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-3">#</a></h2>
<p>I released a series of silent releases as before. The chapter structure is intact but the contents have changed significantly at places as webpack 4 allowed simplifications. The grammar has been improved as well.</p>
<p>I've listed the main changes next:</p>
<ul>
<li><a href="https://survivejs.com/webpack/styling/eliminating-unused-css/">Eliminating Unused CSS</a> chapter is before <a href="https://survivejs.com/webpack/styling/autoprefixing/">Autoprefixing</a> now as this way it felt like it flows better.</li>
<li>The <a href="https://survivejs.com/webpack/appendices/comparison/">Comparison of Build Tools</a> appendix has been largely rewritten to reflect the current situation.</li>
<li>The <a href="https://survivejs.com/webpack/building/source-maps/">Source Maps</a> chapter has been tuned to take webpack 4 into account leading to simplifications.</li>
<li>The <a href="https://survivejs.com/webpack/building/bundle-splitting/">Bundle Splitting</a> chapter has been rewritten to take advantage of webpack 4 syntax. Much simpler now.</li>
<li>The <a href="https://survivejs.com/webpack/building/code-splitting/">Code Splitting</a> chapter doesn't contain the old syntax anymore. It's better to refer to webpack documentation for that.</li>
<li>The <a href="https://survivejs.com/webpack/developing/getting-started/">Getting Started</a> chapter has been rewritten so it's easier for people to go through.</li>
<li>The <a href="https://survivejs.com/webpack/loading/loader-definitions/">Loader Definitions</a> chapter has been expanded to contain more ideas.</li>
<li>The <a href="https://survivejs.com/webpack/loading/fonts/">Loading Fonts</a> chapter doesn't contain Font Awesome example anymore. Their documentation seems to cover usage well enough now. The change also simplified the remaining book.</li>
<li><code>webpack.NamedModulesPlugin</code> gets less attention now that webpack has <code>mode</code> and module ids are set in a better way without the user having to tune them.</li>
<li>The <a href="https://survivejs.com/webpack/optimizing/build-analysis/">Build Analysis</a> chapter has been expanded to contain more ideas.</li>
</ul>
<p>In total 242 commits went to the book since the last public release. You can find the <a href="https://github.com/survivejs/webpack-book/compare/v2.1.7...v2.3.0">changes at GitHub</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<p>You can find the book below:</p>
<ul>
<li><a href="https://survivejs.com/webpack/preface/">“SurviveJS — Webpack” - Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-webpack/">“SurviveJS — Webpack” - Leanpub edition (digital)</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. I support his work this way given mine builds on top of his.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Even though I have a list of improvements planned for the webpack book, it doesn't make sense to push it to paper until <a href="https://www.npmjs.com/package/mini-css-extract-plugin">mini-css-extract-plugin</a> and <a href="https://www.npmjs.com/package/@babel/core">Babel 7</a> have reached stable status. <em>mini-css-extract-plugin</em> replaces <em>extract-text-webpack-plugin</em> for majority of users but it still requires more work. It will simplify CSS configuration somewhat.</p>
<p>Most likely the next book release has to do with the <a href="https://survivejs.com/maintenance/">maintenance book</a>. There are those last bits of content that require work and the book needs structural editing as well. That said, it's already a useful one even its current state.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the webpack 4 version of the book!</p>
<p>Note that I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> if you want to bug me about webpack. You can also <a href="https://github.com/survivejs/ama/issues">ask questions at my AmA</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>There will be <a href="https://survivejs.com/blog/webpack-in-munich-may-2018/">webpack workshops in Munich early May 2018</a>!</blockquote>Webpack in Munich, May 2018awebpackinmunichmay20182018-03-17t00:00:00z2018-03-17T00:00:00Z<p>In addition to writing and consulting, I do occasional <a href="https://survivejs.com/training/">training</a>. Most often it's around <a href="https://survivejs.com/webpack/">my webpack book</a> and it supports different levels of sessions well. Workshops also improve the material so the work feeds back to the book and strengthens it.</p>
<p>To make it easier to get to these events, we'll arrange a series of public workshops at Munich, Germany.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#workshops-with-tobias-and-nikos" id="workshops-with-tobias-and-nikos"></a><span class="text">Workshops with Tobias and Nikos</span><a class="header-anchor-select" href="https://survivejs.com/#workshops-with-tobias-and-nikos">#</a></h2>
<p>It is particularly fun to run these workshops when Tobias Koppers, the author of the tool, is around. If there's something I cannot answer fully, there's someone who has an exhaustive answer in mind.</p>
<p>I've teamed up with Tobias for a session of workshops in Munich around early May. We'll have two levels of sessions - one for beginning and intermediate users of the tool and one for experts that have a specific problem in mind.</p>
<p>In addition, a London-based developer, Nikos Katsikanis of <a href="http://quantumjs.com/">QuantumJS</a>, has promised to hold a workshop under the topic of <strong>Secrets of World Class Developer Teams</strong>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#between-8th-and-10th-of-may-in-munich" id="between-8th-and-10th-of-may-in-munich"></a><span class="text">Between 8th and 10th of May in Munich</span><a class="header-anchor-select" href="https://survivejs.com/#between-8th-and-10th-of-may-in-munich">#</a></h2>
<p>The three workshops are held between 8th and 10th of May in Munich. There's limited capacity (up to ten, five for the masterclass) to make sure we can provide the maximum amount of value for each participant. The prices range from 250 to 500 euros (VAT included) per workshop.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-workshops" id="the-workshops"></a><span class="text">The Workshops</span><a class="header-anchor-select" href="https://survivejs.com/#the-workshops">#</a></h2>
<p>There are going to be three workshops: two about webpack and one about developing teams.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-the-good-parts-9-00-12-00" id="webpack-the-good-parts-9-00-12-00"></a><span class="text">Webpack - The Good Parts - 9:00-12:00</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-the-good-parts-9-00-12-00">#</a></h3>
<p>In this high-level overview you'll learn how to configure Webpack. Even if you know it already, there might be some surprises in store as you gain insight to the tool you otherwise might miss.</p>
<p>The topics covered include:</p>
<ul>
<li>Fundamental ideas of webpack</li>
<li>Development techniques</li>
<li>Build techniques</li>
<li>Asset management</li>
<li>Bundle/code splitting</li>
<li>Build analysis</li>
<li>Optimizing the build</li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://presentations.survivejs.com/webpack-the-good-parts/">Preview the workshop slides online!</a></blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#masterclass-with-tobias-13-00-16-00" id="masterclass-with-tobias-13-00-16-00"></a><span class="text">Masterclass with Tobias - 13:00-16:00</span><a class="header-anchor-select" href="https://survivejs.com/#masterclass-with-tobias-13-00-16-00">#</a></h3>
<p>Do you want to make most out of webpack or have a specific problem in mind to solve? Join us in this masterclass with Tobias where we will show you how to write loaders and plugins, discuss webpack internals in detail, and help you to solve your issues and speed up your build.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#secrets-of-world-class-developer-teams-13-00-17-00" id="secrets-of-world-class-developer-teams-13-00-17-00"></a><span class="text">Secrets of World Class Developer Teams - 13:00-17:00</span><a class="header-anchor-select" href="https://survivejs.com/#secrets-of-world-class-developer-teams-13-00-17-00">#</a></h3>
<p>In this seminar held by <a href="http://quantumjs.com/">Nikos Katsikanis</a>, you will get an overview of what it takes to build a successful software development team. You will examine patterns of behaviour, skills and traits. The seminar is highly interactive, and everyone is encouraged to share their knowledge in the break out sessions.</p>
<p>Nikos is an experienced JavaScript trainer and consultant. He has worked for over ten years in the industry and enjoys the working dynamics of different organisations and has a wealth of experience to pass on. His clients have included the likes of British Gas, Dixons Carphone and RES.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>It will be interesting to see how this works out! In addition to these Munich sessions, there will be webpack sessions as follows:</p>
<ul>
<li><a href="http://yglf.com.ua/">YGLF</a> - Kiev, late May.</li>
<li><a href="https://angularcamp.tech/">AngularCamp</a> - Barcelona, late July.</li>
<li><a href="https://reactdevsummit.com/">React Dev Summit</a> - online, late March, get -10% off with coupon <code>JUHO</code>, how original. Live stream is free!.</li>
</ul>
<p>In addition, it's likely I'll run workshops at Vienna later this year depending on demand and interest. In case you have any questions, leave a comment or contact me directly (see the footer).</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://ti.to/survivejs/webpack-in-munich-may-2018">Tickets are available through Tito</a>.</blockquote>Experiences on Concat 2018aexperiencesonconcat20182018-03-05t00:00:00z2018-03-05T00:00:00Z<p>I participated <a href="https://2018.conc.at/">Concat 2018</a> at Salzburg this year. I held <a href="https://survivejs.com/training/">a four-hour webpack workshop</a> with Tobias Koppers, the author of the tool, and visited the event itself. Overall, it was a great one-day dual-track conference, and I don't regret going.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-workshop-day" id="the-workshop-day"></a><span class="text">The Workshop Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-workshop-day">#</a></h2>
<p><figure><img src="/eec14a97cdb68835c85cf3820dcef409.jpg" alt="Train at Salzburg" class="" width="" height="" /><figcaption>Train at Salzburg</figcaption></figure></p>
<p>We held the four-hour workshop from 13:00 to 17:00. It was based on my slide set, <a href="https://presentations.survivejs.com/webpack-the-good-parts/">Webpack - The Good Parts</a>. I spent a good chunk of the preceding week updating my content to support webpack 4. Having Tobias around was great as he was able to go into more in-depth detail where needed and I also learned a few new things.</p>
<p>After the workshop and a brief break, we headed to the speaker's dinner. It was arranged in an Italian restaurant, de Cesare, and was high quality. I met several people including Rasmus Lerdorf, the creator of PHP. I understand the philosophy behind the language far better now and can appreciate the ecosystem for its achievements.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-conference-day" id="the-conference-day"></a><span class="text">The Conference Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-conference-day">#</a></h2>
<p><figure><img src="/f8f69f3c647a0a5d0eaea8b73410f860.jpg" alt="The Venue was modern" class="" width="" height="" /><figcaption>The Venue was modern</figcaption></figure></p>
<p>The conference started with breakfast although to save some time I ate one at my hotel. It is good to note the venue itself was about twenty minutes from the center of Salzburg as it was held at a local technical university. The place itself was amazing and had plenty of space available. The only significant restriction was that you couldn't take alcohol inside, but I didn't mind.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#daniel-clifford-on-optimizing-for-real-world" id="daniel-clifford-on-optimizing-for-real-world"></a><span class="text">Daniel Clifford on Optimizing for Real World</span><a class="header-anchor-select" href="https://survivejs.com/#daniel-clifford-on-optimizing-for-real-world">#</a></h3>
<p><figure><img src="/4ba4da6f0206edcd6956dc4b45df8837.jpg" alt="Daniel on optimizing for real world" class="" width="" height="" /><figcaption>Daniel on optimizing for real world</figcaption></figure></p>
<p>Daniel Clifford had the honor of opening the conference. I consider the keynote of a conference as the talk that sets the tone of the entire day. Daniel's talk was somewhat technical and expertly given. It reminded me of Benedikt Meurer's talks at <a href="https://survivejs.com/blog/agentconf-2018">AgentConf</a>.</p>
<p>It was nice to see and understand how the V8 team has managed to improve the performance of the JavaScript engine. That said, the talk felt too technical as the first talk to me. My personal preference is to have an inspirational, high-level talk in the beginning. The talk itself was great, but I feel it could have fit better before lunch.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#ivana-mcconnell-on-exclusionary-ux-and-how-to-avoid-it" id="ivana-mcconnell-on-exclusionary-ux-and-how-to-avoid-it"></a><span class="text">Ivana McConnell on Exclusionary UX and How to Avoid It</span><a class="header-anchor-select" href="https://survivejs.com/#ivana-mcconnell-on-exclusionary-ux-and-how-to-avoid-it">#</a></h3>
<p><figure><img src="/ed0e950b2ce8c2d65927a633fc82ceaf.jpg" alt="Ivana on exclusionary UX" class="" width="" height="" /><figcaption>Ivana on exclusionary UX</figcaption></figure></p>
<p>User eXperience (UX) is a relevant topic to web developers as when you design a user interface and its functionalities; you also have to consider different types of users. The talk contained theory and quotes behind the topic while there were also examples.</p>
<p>The talk didn't work that well timing-wise as it roughly 30 minutes instead of 20 minutes given to usual talks. A part of this had to do with technical difficulties that weren't due to the organizer. I feel the same message could have been gotten through by putting more emphasis on examples and then justifying the topic through that.</p>
<p>The topic fits the conference, but I feel the execution could have been stronger. But I think most of the audience got the point.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#cory-ann-joseph-on-poker-playing-ais" id="cory-ann-joseph-on-poker-playing-ais"></a><span class="text">Cory-Ann Joseph on Poker Playing AIs</span><a class="header-anchor-select" href="https://survivejs.com/#cory-ann-joseph-on-poker-playing-ais">#</a></h3>
<p><figure><img src="/8d7c0a26a6464932badb06810d7e70dd.jpg" alt="Cory-Ann on AI" class="" width="" height="" /><figcaption>Cory-Ann on AI</figcaption></figure></p>
<p>Cory-Ann Joseph's talk was built based on a narrative based on her career so far. The interesting fact is that she was a poker professional once. The central message of her talk was that entire industry can become disrupted fast by emerging technologies, such as Artificial Intelligence (AI).</p>
<p>I would have loved to see more examples of how to combine AI with design towards the end. I believe there's a lot of potential in AI aided design where an AI helps a human designer to generate more concepts, faster. I don't think fully generative designs are feasible yet, but if we can push even a part of the work to a machine, we'll get better results, cheaper.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#ola-gasidlo-on-how-to-make-browsers-compatible-with-the-web" id="ola-gasidlo-on-how-to-make-browsers-compatible-with-the-web"></a><span class="text">Ola Gasidlo on How to Make Browsers Compatible with the Web</span><a class="header-anchor-select" href="https://survivejs.com/#ola-gasidlo-on-how-to-make-browsers-compatible-with-the-web">#</a></h3>
<p><figure><img src="/4f7dcadbf043025b1e9494a0f17db615.jpg" alt="Ola on how to make browsers compatible with the web" class="" width="" height="" /><figcaption>Ola on how to make browsers compatible with the web</figcaption></figure></p>
<p>Ola Gasidlo's talk was on the second track, and by the time we arrived there, it was full. We had to stand, but it was still an excellent presentation. The talk discussed the history of the web and how we ended up with what we have right now. She also gave insight on how to get involved with its development.</p>
<p>There wasn't anything particularly surprising in the talk to me, but it was still an excellent recap. It would have been interesting to see Ola's projections for the future of the web.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#jenny-shen-on-designing-across-cultures" id="jenny-shen-on-designing-across-cultures"></a><span class="text">Jenny Shen on Designing Across Cultures</span><a class="header-anchor-select" href="https://survivejs.com/#jenny-shen-on-designing-across-cultures">#</a></h3>
<p><figure><img src="/df51814d4ecf1bb7d486b009590430e9.jpg" alt="Jenny on designing across cultures" class="" width="" height="" /><figcaption>Jenny on designing across cultures</figcaption></figure></p>
<p>Jenny Shen's talk on the second track was the highlight of the conference for me. I would have made it the keynote as the topic was relevant and the execution was top class. She discussed the cultural differences you encounter in design through her broad experience. As it happens, the way you design has to take the culture into account as otherwise, you'll end up with a solution that doesn't work well. Different cultures have different expectations.</p>
<p>Interestingly enough Jenny's talk complemented Ivana's one on exclusionary UX but a cultural level. It's not always about race or gender; it can be about culture as well.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#houssein-djirdeh-on-thinking-in-prpl" id="houssein-djirdeh-on-thinking-in-prpl"></a><span class="text">Houssein Djirdeh on Thinking in PRPL</span><a class="header-anchor-select" href="https://survivejs.com/#houssein-djirdeh-on-thinking-in-prpl">#</a></h3>
<p><figure><img src="/8d331f8135cfc6f75d05915deb559f22.jpg" alt="Houssein on PRPL" class="" width="" height="" /><figcaption>Houssein on PRPL</figcaption></figure></p>
<p>Houssein discussed <a href="https://developers.google.com/web/fundamentals/performance/prpl-pattern/">the popular PRPL (Push, Render, Pre-cache, Lazy-loader) pattern</a> made known by Google. Houssein's talk discussed various possibilities in detail, and it fit the conference well. It was right after lunch, so I was ready to focus on the talk and appreciate it fully.</p>
<p>I skipped the next two slots as there was something else to do and continued on Varun's presentation about animation.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#varun-vachhar-on-mathematics-of-animation" id="varun-vachhar-on-mathematics-of-animation"></a><span class="text">Varun Vachhar on Mathematics of Animation</span><a class="header-anchor-select" href="https://survivejs.com/#varun-vachhar-on-mathematics-of-animation">#</a></h3>
<p><figure><img src="/719319a5991c557c7a031812f95776bc.jpg" alt="Varun on mathematics of animation" class="" width="" height="" /><figcaption>Varun on mathematics of animation</figcaption></figure></p>
<p>Varun discussed the mathematics of animation through various examples. It brought back some memories from my university time. I wish they taught this way as the concepts become intuitive through animation and can be fun to implement this way even. Once you see the applications, you will pick up the ideas as well.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#max-stoiber-on-styled-components" id="max-stoiber-on-styled-components"></a><span class="text">Max Stoiber on Styled Components</span><a class="header-anchor-select" href="https://survivejs.com/#max-stoiber-on-styled-components">#</a></h3>
<p><figure><img src="/8b97f7edcc9f6bd14df9189fb13db480.jpg" alt="Max on Styled Components" class="" width="" height="" /><figcaption>Max on Styled Components</figcaption></figure></p>
<p>After a coffee break, Max gave an entertaining talk that explained why his Styled Components approach works the way it does. It was an excellent introduction to the topic although I felt it could have gone technically deeper.</p>
<p>I would have approached it by live coding a naïve version on stage. It's essential as few people know the related APIs and find them magical. The magic goes away when you see how it all goes together under the hood. It's a minor gripe, though, and this way the talk was to the point without veering too much from its topic.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#lightning-talks" id="lightning-talks"></a><span class="text">Lightning Talks</span><a class="header-anchor-select" href="https://survivejs.com/#lightning-talks">#</a></h3>
<p><figure><img src="/a5b3bb4522ae4456094b87c89de742d9.jpg" alt="Andrey wants you to come to React Vienna!" class="" width="" height="" /><figcaption>Andrey wants you to come to React Vienna!</figcaption></figure></p>
<p>The conference had roughly forty minutes for lightning talks. The audience could vote which ones should go on stage and then the presenters did their best. The topics were varied and included ideas related to accessibility, productivity, CSS techniques, and Git. They were entertaining overall, and I wish a couple had been longer as there was potential for something more in-depth. Short talks tend to be more challenging to deliver than long ones.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#sara-soueidan-on-svg" id="sara-soueidan-on-svg"></a><span class="text">Sara Soueidan on SVG</span><a class="header-anchor-select" href="https://survivejs.com/#sara-soueidan-on-svg">#</a></h3>
<p><figure><img src="/6f470b180d58c258ec0795071b1c5214.jpg" alt="Sara on SVG" class="" width="" height="" /><figcaption>Sara on SVG</figcaption></figure></p>
<p>The conference ended with Sara Soueidan's talk about SVG (Scalable Vector Graphics) and its capabilities. I knew you could do a lot with SVG, but I didn't think it's possible to do this much. She demonstrated how to implement its generative graphics and texturing capabilities for example.</p>
<p>I feel the talk was a little detail-heavy for the last presentation of a day and I would have been able to appreciate it more had it been earlier. I would have probably swapped her talk with Max's or had an inspirational, lighter talk at the end.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#afterparty" id="afterparty"></a><span class="text">Afterparty</span><a class="header-anchor-select" href="https://survivejs.com/#afterparty">#</a></h3>
<p><figure><img src="/8bec68fb03bdc4c12266c69fbf06769d.jpg" alt="DnB at afterparty" class="" width="" height="" /><figcaption>DnB at afterparty</figcaption></figure></p>
<p>After the last talk, there was still something to eat and drink outside. From there people headed to the afterparty held in Studio 68 and MARK Salzburg. Although the location was remote and little tricky to reach, it was a good choice. I saw both Rasmus and Tobias singing karaoke and even made a few friends, so it wasn't all that bad.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-good-the-bad-the-ugly" id="the-good-the-bad-the-ugly"></a><span class="text">The Good, The Bad, The Ugly</span><a class="header-anchor-select" href="https://survivejs.com/#the-good-the-bad-the-ugly">#</a></h2>
<p><figure><img src="/8526105c685e6b34603fb37a00ee9299.jpg" alt="The DJ was the only person dancing" class="" width="" height="" /><figcaption>The DJ was the only person dancing</figcaption></figure></p>
<p>I was positively surprised by Concat. The conference went without any significant hiccups. The content was solid although I might have gone with a different order. The food was excellent, and there was plenty of it. I have never seen a conference with this tasty food yet, and I have seen a lot of events!</p>
<p>Even though the conference venue was slightly remote, I can see why the organizers chose it. The space worked well, and there was enough of it. Compared to the other Austrian conferences (AgentConf, ScriptConf) I have seen this year, I would say Concat had the best space and food. AgentConf was on par when it came to the talks, and ScriptConf was solid as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/317b7bd9b4b19738e653323cf7db2f8d.jpg" alt="The organizers of Concat" class="" width="" height="" /><figcaption>The organizers of Concat</figcaption></figure></p>
<p><a href="https://2018.conc.at/">Concat</a> was a great find for me, and I hope more people will discover it. Salzburg itself is worth visiting, and a technical conference like this makes a possible trip even better. I wish I can participate again next year!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can find more of <a href="https://www.flickr.com/photos/bebraw/sets/72157692394539081">my Concat 2018 photos at Flickr</a>.</blockquote>Verdaccio - A lightweight npm proxy registry - Interview with Juan Picadoaverdaccioalightweightnpmproxyregistryinterviewwithjuanpicado2018-02-26t00:00:00z2018-02-26T00:00:00Z<p>If you develop JavaScript applications, you most likely use <a href="https://www.npmjs.com/">npm</a>, the most famous package manager available for JavaScript. At the time of writing, it hosts over 600 thousand packages, and the amount keeps rapidly increasing year by year.</p>
<p>That said, npm isn't perfect. What if it goes offline for a while or you want to use private packages at your company? npm provides several commercial options, but today we'll discuss an open source one, <a href="https://github.com/verdaccio/verdaccio">Verdaccio</a> by <a href="https://twitter.com/jotadeveloper">Juan Picado</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/fba48015a688c38cc84e5b55b07858c0?s=200" alt="Juan Picado" class="author" width="100" height="100" />
</span>
My name is Juan, and I’m super passionate about open source and always willing to contribute and to learn something new. I’ve worked with several languages on the client side, but my favorite by far is JavaScript. I started using Dojo Toolkit, and these days I code mostly using React, TypeScript, and Node.js.
</p>
<p>Currently, I work in Austria as a Software Engineer at Mobfox. I love meetups, books, sports, software conferences and I travel a lot.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-verdaccio-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-verdaccio-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Verdaccio</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-verdaccio-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Verdaccio is a lightweight private proxy registry with an entirely optional configuration that allows you to host private Node.js packages and compatible with all client package managers such npm, yarn or pnpm.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-verdaccio-work-" id="how-does-verdaccio-work-"></a><span class="text">How does <em>Verdaccio</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-verdaccio-work-">#</a></h2>
<p>Verdaccio emulates the main npmjs registry, its internals can be broken down into:</p>
<ul>
<li><strong>Web Interface</strong>: A simple interface to navigate your private packages.</li>
<li><strong>Private Storage</strong>: The main feature is hosting private packages. For instance, you might override packages from public registries. The default storage is file system based.</li>
<li><strong>Uplinks</strong>: References to other registries. Verdaccio can handle as many registries as you want to link. By default, it links to npm.</li>
<li><strong>Proxy and Cache</strong>: The most important part - it allows to selectively cache or route packages to other registries based on a match pattern.</li>
<li><strong>Plugin Support</strong>: For authentication, web middleware and soon storage.</li>
<li><strong>Authentication</strong>: By default, Verdaccio uses htpasswd basic authentication, but there are plugins for LDAP, Gitlab, MongoDB, Bitbucket and more.</li>
<li><strong>Packages Access</strong>: Restrict access to packages by peer groups, users or both, based on the auth plugin you want to use.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-verdaccio-differ-from-other-solutions-" id="how-does-verdaccio-differ-from-other-solutions-"></a><span class="text">How does <em>Verdaccio</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-verdaccio-differ-from-other-solutions-">#</a></h2>
<p>Other solutions very often either require a long list of prerequisites before the first usage, hardware requirements are high and of course, you usually have to pay to use them.</p>
<p>With Verdaccio, you instead start out small with a proper default configuration and can then scale or adapt if necessary. A configuration file is created when you install Verdaccio which you can then customize using plugins created by the community.</p>
<p>And even if Verdaccio by default is file system based, it’s a limitation easy to resolve using our ecosystem of plugins. You can evolve Verdaccio from a small and straightforward registry to an application scaled to fit large infrastructures using the right list of plugins.</p>
<p>Furthermore, we provide Docker and Kubernetes support that make things even easier for companies that use Verdaccio in their development workflows.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-verdaccio-" id="why-did-you-develop-verdaccio-"></a><span class="text">Why did you develop <em>Verdaccio</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-verdaccio-">#</a></h2>
<p>There is a <a href="https://github.com/rlidwka/sinopia/issues/376">long history</a> behind this project. Verdaccio is one of the multiple forks of sinopia, forked initially by Trent Earl and John Wilkinson after Sinopia was abandoned. I became a regular contributor, and after some months contributing, I got the project’s ownership and evolving Verdaccio into what the project it is today.</p>
<p>Among other things, we went from 200 stars on GitHub, 600 downloads per month on npm and 10k on Docker Hub to 2200 stars, 14k and 250k downloads. This rise in popularity would not have been possible without the help of many contributors and especially the core team composed of Meeeeow, Ayush Sharma, Breno Rodrigues and many others.</p>
<p>This project is significant for the community and me, and I firmly believe it has to exist as a free and straightforward solution to emulate an npm package system in your company or local environment, as well as it being open source.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>In one word – grow. We want to be the most important and most used open source registry, and for that, we have drawn a plan along last year to provide a good base. Throughout 2017 we managed to release several stable versions, ship new releases, improve Docker support, publish a new website with documentation and we have been working on the next major release v3 in parallel, currently in Alpha stage.</p>
<p>v3 will provide a bunch of exciting things:</p>
<ul>
<li><strong>Scale</strong>: Verdaccio v2 is file system based and that’s a problem if you want to scale, since Javascript is single thread and Node.js only uses one core for each process, a file system does not allow to scale properly. In v3, we are shipping the possibility to replace the default storage with a custom one, either in the cloud (Firebase, Google Cloud or Amazon S3) or any NoSQL database like CouchDB or MongoDB.</li>
<li><strong>Plugins</strong>: We have improved the plugin documentation to help developers to ship more and more integrations, and we've tried to make the development more accessible with a plugin generator, types definitions based on Flow and more.</li>
<li><strong>New Web UI</strong>: In the latest version of v2 we have been already shipped a new feature, a sidebar with a dependencies navigator. But we want more. We want to create a UI that allows users to update their profiles, tokens and even the update registry configuration. We would like to enable users to customize the theme as well which may be welcomed by companies that put a strong emphasis on consistency with their corporate identity.</li>
<li><strong>API</strong>: We will provide more support to the npm API, such tokens, deprecations or stars.</li>
</ul>
<p>v3 still <strong>will be entirely backward compatible with sinopia</strong>, we want their users to feel comfortable with moving to Verdaccio.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-verdaccio-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-verdaccio-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Verdaccio</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-verdaccio-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Node.js stopped to being a tool only for backend developers a long time ago. These days with Javascript bundlers such as Webpack, Rollup or Prepack, npm packages have become significant - more than 600k in the central registry and much more privately.</p>
<p>But not all is perfect, many incidents last years on central registry remind us we need a solution in case this happens again, and Verdaccio is the ideal tool for avoiding sudden development issues, missing packages and can also serve as an offline emergency solution.</p>
<p>Verdaccio has lately also been used for E2E testing of npm packages before publishing them to npm, as outlined by Strapi in a <a href="https://medium.com/@strapi/testing-your-npm-package-before-releasing-it-using-verdaccio-ngrok-28e2832c850a">medium post</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Contribute to open source (it will change your life), learn, read books, enjoy and be happy doing your work. Do not try to learn all fancy frameworks, focus on the JavaScript - which is beautiful and comfortable to learn. Teach others, share your knowledge and if you drink coffee while coding, be sure that is from Nicaragua, it's magic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I admire Kyle Simpson and Nicholas C. Zakas. They are great JavaScript teachers, writers, and excellent communicators; it would be great to have them here. Also, I’d like to read about Rebecca Turner (main npm contributor), Zoltan Kochan (pnpm core contributor) or Sebastian McKenzie (Yarn committer).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Juan! Verdaccio is a valuable service for any company developing JavaScript-based software seriously.</p>
<p>To learn more, <a href="http://www.verdaccio.org/">head to Verdaccio site</a> or <a href="https://github.com/verdaccio/verdaccio">check out Verdaccio on GitHub</a>.</p>
Parket - A state management library inspired by mobx-state-tree - Interview with Leah Ullmannaparketastatemanagementlibraryinspiredbymobxstatetreeinterviewwithleahullmann2018-02-16t00:00:00z2018-02-16T00:00:00Z<p>State management is one of those topics that divides opinions. So far we've seen a couple of options so far.</p>
<p>In this post, we'll cover Parket, a solution by <a href="https://twitter.com/hrmny_">Leah Ullmann</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/52401c37bc5c4d54a051c619767fdbf8?s=200" alt="Leah Ullmann" class="author" width="100" height="100" />
</span>
I'm a (mostly) self-taught developer, started with Java in school, but the two languages I use the most at the moment are Rust and JavaScript.
</p>
<p>My primary interests right now are web dev, devops, and game dev. I am currently working as a freelance full-stack developer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-parket-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-parket-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Parket</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-parket-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Parket is a state management library; a well-known example would be Redux. It's primarily inspired by mobx-state-tree, which I didn't use because of the large file size.</p>
<p>Parket lets you create models with a state, actions, and views; these can later be used by instantiating them and can be nested inside each other.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-parket-work-" id="how-does-parket-work-"></a><span class="text">How does <em>Parket</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-parket-work-">#</a></h2>
<p>Parket internally uses Proxies. Proxy is a newish feature which allows you to wrap objects and manage to get and set access to it; it's like adding a getter and setter to every property but also applies to new properties added.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-parket-differ-from-other-solutions-" id="how-does-parket-differ-from-other-solutions-"></a><span class="text">How does <em>Parket</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-parket-differ-from-other-solutions-">#</a></h2>
<p>A lot of state management libs seem to focus on immutability a lot; every state update has to return an immutable object. I manage mutability via the proxies so you can't set anything outside of actions, you also don't have to return anything or call <code>setState</code> and the likes, because it's listening to the state changes and sends events based on those.</p>
<p><strong>A basic example:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> model <span class="token keyword keyword-from" >from</span> <span class="token string" >"parket"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> Person <span class="token operator" >=</span> <span class="token function" >model</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Person"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
initial<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
firstname<span class="token punctuation" >:</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation" >,</span>
lastname<span class="token punctuation" >:</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
actions<span class="token punctuation" >:</span> state <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
<span class="token function" >setFirstName</span> <span class="token punctuation brackets-parentheses" >(</span>first<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
state<span class="token punctuation" >.</span>firstname <span class="token operator" >=</span> first<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token function" >setLastName</span> <span class="token punctuation brackets-parentheses" >(</span>last<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
state<span class="token punctuation" >.</span>lastname <span class="token operator" >=</span> last<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
views<span class="token punctuation" >:</span> state <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
fullname<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>state<span class="token punctuation" >.</span>firstname<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>state<span class="token punctuation" >.</span>lastname<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> instance <span class="token operator" >=</span> <span class="token function" >Person</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> firstname<span class="token punctuation" >:</span> <span class="token string" >"Tom"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>As you can see, the state gets passed to the actions, which just modify it without doing anything special.</p>
<p>The same thing happens with views, but that only read from the state, same as accessing it from the outside, the views get updates on every state change. Anyone familiar with mobx-state-tree will probably see the similarities.</p>
<p>You define a model for the state and can reuse it. This is useful mostly for nested models, i.e., todos in a todo list.</p>
<p>When instantiating the model, you can pass an object to get merged into the state. I might change this to pass it into the initial function because it can currently override nested objects.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I have also adapted the mobx-state-tree TodoMVC example to Parket, which you can find in the repo.</blockquote><p><strong>Asynchronous example:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> Async <span class="token operator" >=</span> <span class="token function" >model</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Async"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
initial<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
loading<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span>
result<span class="token punctuation" >:</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
actions<span class="token punctuation" >:</span> self <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-async" >async</span> <span class="token function" >doSomethingAsync</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
self<span class="token punctuation" >.</span>loading <span class="token operator" >=</span> <span class="token boolean" >true</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Be aware that you should handle errors ( /rejections )</span>
self<span class="token punctuation" >.</span>result <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> <span class="token function" >somethingAsync</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
self<span class="token punctuation" >.</span>loading <span class="token operator" >=</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>As you can see here, Parket doesn't care what your action does or instead what it is; it just listens to state changes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-parket-" id="why-did-you-develop-parket-"></a><span class="text">Why did you develop <em>Parket</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-parket-">#</a></h2>
<p>I found mobx-state-tree a while ago and immediately liked it. mobx-state-tree and the dependency to MobX make the file size big. Being in the Preact core team I obviously had to make something smaller, so after failing two times, Parket was born (~1.5kB).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm not sure yet, maybe another library when I get an idea, there inevitably will be something. Perhaps I'll go to university soon, so that might be fun.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-parket-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-parket-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Parket</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-parket-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I don't think I'm qualified to predict the future, but I'll try anyway.</p>
<p>The one thing I can see happening is more PWAs (progressive web-apps) will get to the market, and with new web features, they can become even more powerful. There are already some fantastic examples of Twitter Lite and the new Instagram PWA. You could use Parket in a PWA, so that's nice.</p>
<p>There will also always be new frameworks, some worth looking at, others not so much, but it's all in the name of progress.</p>
<p>I hope we'll get something innovative sometime soon, Jason (<code>@_developit</code>) talked about how visual programming could be used for the UI instead of the component based frameworks we use now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Go to a coding boot camp if you can, or some other place where you have a teacher you can ask when you have problems. Freecodecamp and the community around it are also great, but I only found that after I already knew most of what they teach.</p>
<p>Not specific to web, but: Find a problem and solve it, even if it has been solved before</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Maybe <a href="https://github.com/zouhir">zouhir</a> or <a href="https://github.com/lukeed">lukeed</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks to the Preact community for being so great, wouldn't be where I am today without them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Leah! It's always nice to see new approach to state management.</p>
<p>You can <a href="https://github.com/ForsakenHarmony/parket">find Parket in GitHub</a>.</p>
substyle - Build Styling Agnostic Components for React - Interview with Jan-Felix Schwarzasubstylebuildstylingagnosticcomponentsforreactinterviewwithjanfelixschwarz2018-02-08t00:00:00z2018-02-08T00:00:00Z<p>One of the tricky things about writing React components meant for public consumption is making them compatible with <a href="react/advanced-techniques/styling-react/">various styling approaches</a> used by the community. The problem exists because application styling isn't considered as a first-class citizen by React and it doesn't provide a strong opinion on how to solve it. As a result, the amount of available approaches has exploded.</p>
<p><a href="https://twitter.com/jfschwarz">Jan-Felix Schwarz</a> noticed the same problem. As a result <em>substyle</em> was born.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/043c2f73dd7c170c8e616a8d87471b14?s=200" alt="Jan-Felix Schwarz" class="author" width="100" height="100" />
</span>
I work as front-end tech lead at Signavio in Berlin. We are building products that help large businesses to understand and transform the ways they work. I've been doing JavaScript SPA development for the best part of the past decade, so I guess when React came out it was a defining moment in my professional life. :)
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_substyle_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_substyle_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>substyle</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_substyle_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>substyle</em> is a utility for authors of open source React component libraries. It tries to make it easier to build components in a way that allows users to customize styles of every single element rendered by a component. Users will be able to do that through CSS, CSS Modules, many css-in-js libraries, or using inline styles. This way, the component integrates well into applications using any styling approach, without forcing an opinion about tooling.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_substyle_-work-" id="how-does-_substyle_-work-"></a><span class="text">How does <em>substyle</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_substyle_-work-">#</a></h2>
<p><em>substyle</em> provides a higher-order component that preprocesses whichever props the user passes for styling purposes so that they become more comfortable to consume. It injects a single, special <code>style</code> prop, which is used in the wrapped component's render function to derive the right styling props to forward to each of the rendered elements.</p>
<p>For example, a universally stylable <code><Popover /></code> component could be written like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> substyle <span class="token keyword keyword-from" >from</span> <span class="token string" >"substyle"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> Popover <span class="token operator" >=</span> <span class="token function" >substyle</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> style<span class="token punctuation" >,</span> children <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div <span class="token punctuation brackets-braces" >{</span><span class="token operator" >...</span>style<span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
<span class="token operator" ><</span>button <span class="token punctuation brackets-braces" >{</span><span class="token operator" >...</span><span class="token function" >style</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"close"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>x<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span>children<span class="token punctuation brackets-braces" >}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Now, users of the <code><Popover /></code> component can pass their custom <code>className</code>, which will be used to derive classes for all the elements rendered by the component:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// JSX // Rendered HTML</span>
<span class="token operator" ><</span>Popover className<span class="token operator" >=</span><span class="token string" >"popover"</span><span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span><span class="token string" >" "</span><span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// <div class="popover"></span>
<span class="token operator" ><</span>span<span class="token operator" >></span>Hello world<span class="token operator" >!</span><span class="token operator" ><</span><span class="token operator" >/</span>span<span class="token operator" >></span> <span class="token comment" spellcheck="true" >//{" "}</span>
<span class="token operator" ><</span>button <span class="token keyword keyword-class" >class</span><span class="token operator" >=</span><span class="token string" >"popover__close"</span><span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>Popover<span class="token operator" >></span> <span class="token comment" spellcheck="true" >// x //{" "}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token comment" spellcheck="true" >// <span>Hello world!</span></span>
<span class="token comment" spellcheck="true" >//{" "}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
</code></pre>
<p>If they want to pass some custom inline styles, they can do so by supplying a nested <code>style</code> object:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// JSX // Rendered HTML</span>
<span class="token operator" ><</span>Popover style<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> <span class="token comment" spellcheck="true" >// <div style="background: white;"></span>
background<span class="token punctuation" >:</span> <span class="token string" >'white'</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// <button style="right: 0;">x</button></span>
close<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> right<span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// <span>Hello world!</span></span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span> <span class="token comment" spellcheck="true" >// </div></span>
<span class="token operator" ><</span>span<span class="token operator" >></span>Hello world<span class="token operator" >!</span><span class="token operator" ><</span><span class="token operator" >/</span>span<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Popover<span class="token operator" >></span>
</code></pre>
<p>If they use css modules or some css-in-js lib, they will want to pass the unique, auto-generated classes to assign to the elements. They can do so via the <code>classNames</code> prop that is handled by substyle:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// JSX // Rendered HTML</span>
<span class="token operator" ><</span>Popover classNames<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> <span class="token comment" spellcheck="true" >// <div class="1n3n1g"></span>
popover<span class="token punctuation" >:</span> <span class="token string" >'1n3n1g'</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// <button class="ew339k">x</button></span>
popover__close<span class="token punctuation" >:</span> <span class="token string" >'ew339k'</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// <span>Hello world!</span></span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span> <span class="token comment" spellcheck="true" >// </div></span>
<span class="token operator" ><</span>span<span class="token operator" >></span>Hello world<span class="token operator" >!</span><span class="token operator" ><</span><span class="token operator" >/</span>span<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Popover<span class="token operator" >></span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_substyle_-differ-from-other-solutions-" id="how-does-_substyle_-differ-from-other-solutions-"></a><span class="text">How does <em>substyle</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_substyle_-differ-from-other-solutions-">#</a></h2>
<p>I know of one other solution addressing the same problem called <a href="https://github.com/markdalgleish/react-themeable">react-themeable</a>. The general idea behind both, <em>react-themeable</em> and <em>substyle</em>, is the same. However, during the development of a component library at Signavio I had to solve some additional practical challenges:</p>
<ul>
<li>How to define default styles for components?</li>
<li>How to build composite components so that also all leaf elements of nested components can be styled by the user?</li>
<li>If, depending on the passed props, there are different variants of a component, how to allow the user to define custom styles specifically for a particular variant?</li>
</ul>
<p>Exploring solutions to these problems I finally ended up writing my utility.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_substyle_-" id="why-did-you-develop-_substyle_-"></a><span class="text">Why did you develop <em>substyle</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_substyle_-">#</a></h2>
<p>I got the initial idea for it while developing an open source <a href="https://github.com/effektif/react-mentions">React mentions input</a>. As I was aiming to let users style this input widget with css and inline styles, I had to add quite a bit of code to my components just for this purpose. To keep my code DRY and the render functions clean, I extracted this repetitive styling logic into a helper function.</p>
<p>Later I realized that I could quickly add support for styling through css modules and css-in-js libraries, just by changing this helper function and without having to touch any of the components. And this is basically how <em>substyle</em> came to be.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I hope that the idea of supporting universal styling takes hold in the React community and that we can establish some best practices for writing reusable components. It would make app developers' lives better as they would not have to study docs, examples, or source code of every single component library to find out how to override styles of particular elements. Instead, they could just use the same familiar styling API for any open source component.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_substyle_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_substyle_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>substyle</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_substyle_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p><em>substyle</em> is just my take on a universal styling API for React components and it demonstrates that it is quite easy to implement this. So I don't know if <em>substyle</em> as a library will have a future, but I hope that we will continue the discussion about the styling of reusable components.</p>
<p>For web development in general, I see much more fundamental trends: One hot topic is the shift from frameworks to compilers. I believe this idea has enormous potential and it's exciting to see projects like Prepack and svelte pushing forward this frontier.</p>
<p>Another development I expect for the next years is that the architectural boundary between client and server will become more and more blurry as server rendering and GraphQL APIs become the norm. We will be able to share much more code between front and back ends, up to a point, where this distinction is rendered useless.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Be more passionate about what you are building than how you are making it. Don't choose libraries and frameworks just because they are hyped, but because they promise to solve a particular problem that you are feeling.</p>
<p>I think this helps to embrace that there is so much choice in the JavaScript ecosystem, rather than feeling overwhelmed by it. Also, don't be intimidated by unfamiliar, complex-sounding jargon. Usually, it's just fancy names for simple concepts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I dig the stuff Brent Jackson (@jxnblk) is building. He's both, a great programmer and designer, and his work is right at the intersection of both disciplines.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jan-Felix! <em>substyle</em> looks like an excellent fit for anyone wanting to write robust React components that are easy to consume.</p>
<p>You can <a href="https://github.com/jfschwarz/substyle">find substyle on GitHub</a>. See also <a href="https://www.youtube.com/watch?v=CKPzyeX7nyA">Jan-Felix's presentation (16 mins) on the topic</a>.</p>
Experiences on AgentConf 2018aexperiencesonagentconf20182018-02-06t00:00:00z2018-02-06T00:00:00Z<p>I was invited to <a href="https://www.agent.sh/">AgentConf 2018</a> on its second iteration about a month ago as one of the organizers saw <a href="https://presentations.survivejs.com/the-whys-hows-and-whats-of-npm-packaging/">a presentation of mine about npm packaging</a>. I gained free entry to the conference against a lightning talk but more on that later.</p>
<p>The concept is simple. After two days of single track talks in Dornbirn, there are two days of skiing (alpine, not cross-country) in Lech. Skiing is optional, but at least for me, it was the highlight even if the talks were good quality. There were around 180 people in the main conference, and roughly 50 remained for skiing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-arrival-day" id="the-arrival-day"></a><span class="text">The Arrival Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-arrival-day">#</a></h2>
<p><figure><img src="/84ab9417246be62470d7107c3aebc256.jpg" alt="Dornbirn at night" class="" width="" height="" /><figcaption>Dornbirn at night</figcaption></figure></p>
<p>As a large part of the hotel capacity of Dornbirn was taken, I decided to stay at a local Airbnb with a friend that was going to the conference as well. We shared the costs and felt it was good value.</p>
<p>The train trip from Vienna took six and half hours, but given the quality of train service in Austria, the travel didn't feel cumbersome. The train network worked well, and the price level of the restaurant was reasonable at least compared to what I'm used to personally. The quality was excellent as well.</p>
<p>After we arrived at Dornbirn, we dropped our bits to Airbnb and headed to the center. From there we went to <a href="https://www.karren.at/panoramarestaurant/">Panoramarestaurant Karren</a> with a cable car for the speakers' dinner after a short trip by car.</p>
<p>It was a great way to start the conference, and I met several people that I knew online already. The food was amazing, and the views were great. Especially the mushroom soup (steinpilzsuppe) was a favorite of mine.</p>
<p>There was some complication on the way back, and after the cable car came back down, we ended up walking back to our Airbnb. It wasn't a long distance, and it didn't matter that much after a satisfying dinner.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-first-presentation-day" id="the-first-presentation-day"></a><span class="text">The First Presentation Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-first-presentation-day">#</a></h2>
<p><figure><img src="/0c75b235ecceaf50a66d196430d01ed1.jpg" alt="Breakfast at Spielboden kino" class="" width="" height="" /><figcaption>Breakfast at Spielboden kino</figcaption></figure></p>
<p>The first day started with an hour-long breakfast and registration at 8:00. That was early enough for me at least! The breakfast was disappointing, though, as there was only single kind of bread and something to drink with it. Fortunately, this was fixed on the second day.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#max-stoiber-on-open-source" id="max-stoiber-on-open-source"></a><span class="text">Max Stoiber on Open Source</span><a class="header-anchor-select" href="https://survivejs.com/#max-stoiber-on-open-source">#</a></h3>
<p><figure><img src="/3ce85eed6678d9bd9e7018627f7363db.jpg" alt="Max Stoiber on open source" class="" width="" height="" /><figcaption>Max Stoiber on open source</figcaption></figure></p>
<p>Max's presentation covered his successful career with open source so far. It was interesting for me to contrast it with <a href="https://survivejs.com/blog/scriptconf-2018/#evan-you-on-open-source">the one by Evan You on ScriptConf</a> as the take was somewhat different. Whereas Evan's presentation felt more grounded to the rough reality, Max's was more on the lighter, optimistic side.</p>
<p>The viewpoints complement each other. I think the key understanding is that open source is not an end itself but more of a means. The whole situation changed in two decades as first the industry resisted the idea and then ended up adopting it as a mainstream idea.</p>
<p>For me, there's not much left to sell in the idea, and I'm more interested in finding sustainable models as I feel that's where we still have work left to do.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#guillermo-rauch-and-leo-lamprecht-on-folding-space-and-time" id="guillermo-rauch-and-leo-lamprecht-on-folding-space-and-time"></a><span class="text">Guillermo Rauch and Leo Lamprecht on Folding Space and Time</span><a class="header-anchor-select" href="https://survivejs.com/#guillermo-rauch-and-leo-lamprecht-on-folding-space-and-time">#</a></h3>
<p><figure><img src="/125f7e6a0ba8032d57fc8834aaa0d89a.jpg" alt="Guillermo and Leo on folding space and time" class="" width="" height="" /><figcaption>Guillermo and Leo on folding space and time</figcaption></figure></p>
<p>Guillermo and Leo discussed how their company Zeit approaches scalability. Once you understand what takes time in your requests, you can start to think about where and how to perform the work.</p>
<p><a href="https://github.com/zeit/pkg">pkg</a> was one of the highlights of the presentation for me. As it happens, precompiling your code with Node.js can speed it up considerably. One benefit of doing this is that then you can run your application without having to install Node.js although you still have to compile somewhere.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#peggy-rayzis-on-apollo" id="peggy-rayzis-on-apollo"></a><span class="text">Peggy Rayzis on Apollo</span><a class="header-anchor-select" href="https://survivejs.com/#peggy-rayzis-on-apollo">#</a></h3>
<p><figure><img src="/c3740eaff7b7822b5072532c0ac36855.jpg" alt="Peggy on Apollo" class="" width="" height="" /><figcaption>Peggy on Apollo</figcaption></figure></p>
<p>After a coffee break, Peggy gave a talk on Apollo. I've seen Peggy present twice before. Even though there tend to be similar elements in her Apollo talks, you also learn new things as their GraphQL client keeps evolving.</p>
<p>It seems that at least in some cases you might be able to eschew state management solutions like Redux entirely by using something like <a href="https://www.npmjs.com/package/apollo-link-state">apollo-link-state</a> instead. It would not surprise me if this trend continued although you lose some control in the process.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#kaylie-alexa-kwon-on-yarn-workflow" id="kaylie-alexa-kwon-on-yarn-workflow"></a><span class="text">Kaylie Alexa Kwon on Yarn Workflow</span><a class="header-anchor-select" href="https://survivejs.com/#kaylie-alexa-kwon-on-yarn-workflow">#</a></h3>
<p><figure><img src="/537d9fe496cbcf91a54079d8312092dd.jpg" alt="Kaylie on Yarn" class="" width="" height="" /><figcaption>Kaylie on Yarn</figcaption></figure></p>
<p>Kaylie discussed <a href="https://yarnpkg.com/">Yarn</a> package manager and how they use it in their company. It was a good talk given it showed how she got involved with the project and also about the impact she has made on it so far as an outside contributor.</p>
<p>The important point of the talk for me is that you should find tools that fit your process. And if there's something missing, you should look into improving the tool. Yarn seems to be open to improvements as a project. The development has motivated npm to become better as well, so everybody has won.</p>
<p>After the talk, there was a lunch break although I don't remember what we had for lunch, but I am quite sure it had beans in it, but it wasn't a memorable one.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#carly-litchfield-on-testing" id="carly-litchfield-on-testing"></a><span class="text">Carly Litchfield on Testing</span><a class="header-anchor-select" href="https://survivejs.com/#carly-litchfield-on-testing">#</a></h3>
<p><figure><img src="/06d0b7116b55646fa839626d79624a32.jpg" alt="Carly on testing" class="" width="" height="" /><figcaption>Carly on testing</figcaption></figure></p>
<p>Although I missed the majority of Carly's talk, I did gain a few insights from it. I learned particularly of <a href="https://percy.io/">Percy</a>, a tool for visual regression testing. I was aware of the technique, but I didn't know there's such a good solution available yet.</p>
<p>Carly has made her <a href="https://github.com/cjlitch/screenshot-test-app">demo application</a> and <a href="https://github.com/cjlitch/screenshot-test-app/blob/master/Make%20backend%20devs%20jealous%20of%20your%20test%20suite.pdf">presentation slides</a> available.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#andrey-okonetchnikov-on-linting" id="andrey-okonetchnikov-on-linting"></a><span class="text">Andrey Okonetchnikov on Linting</span><a class="header-anchor-select" href="https://survivejs.com/#andrey-okonetchnikov-on-linting">#</a></h3>
<p><figure><img src="/ce6a5c8297fde5691cd839ecd3650746.jpg" alt="Andrey on linting" class="" width="" height="" /><figcaption>Andrey on linting</figcaption></figure></p>
<p>Andrey discussed his story with <a href="https://www.npmjs.com/package/lint-staged">lint-staged</a> so far. The plan was to get a particular feature done by the presentation, but no matter how hard we tried, there was always some edge case we couldn't manage to resolve. Alas, development has to continue.</p>
<p><em>lint-staged</em> is interesting because it allows you to run commands on the files that are <strong>only</strong> in the staging mode of Git. Doing this can save a considerable amount of computation and make development flow smoother.</p>
<p>The beautiful thing is that although the tool has been written using JavaScript, you can run the tool against any other language since it operates on a command level.</p>
<p>Since I know the tool already and helped Andrey with the slides, there wasn't anything new in the presentation for me. But I'm sure people that don't know it yet, gained a lot from the talk and it was pleasant to follow.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#javi-velasco-on-agnostic-component-design-for-react" id="javi-velasco-on-agnostic-component-design-for-react"></a><span class="text">Javi Velasco on Agnostic Component Design for React</span><a class="header-anchor-select" href="https://survivejs.com/#javi-velasco-on-agnostic-component-design-for-react">#</a></h3>
<p><figure><img src="/5f083f1b11de5c3370b95cb6f977c43a.jpg" alt="Javi on React components" class="" width="" height="" /><figcaption>Javi on React components</figcaption></figure></p>
<p>Javi discussed his journey with <a href="http://react-toolbox.io/">React Toolbox</a>. It is an implementation of Google Material Design for React, and he is currently working on the next major version. I know from experience API design is hard to get right, so it was a fitting talk. I had seen it before in ReactiveConf, though, so there weren't many new insights for me.</p>
<p>When it comes to APIs, the key point for me is figuring out the right coupling and responsibilities for each part of the API. An API should be solid on a conceptual level so that it's easy to explain.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#lightning-talks" id="lightning-talks"></a><span class="text">Lightning Talks</span><a class="header-anchor-select" href="https://survivejs.com/#lightning-talks">#</a></h3>
<p><figure><img src="/e5c7ee9018fc2199ef3de638f85b42b0.jpg" alt="Benedikt on strange features of JavaScript" class="" width="" height="" /><figcaption>Benedikt on strange features of JavaScript</figcaption></figure></p>
<p>The lightning talks were the part where I got my ten minutes of fame or so. I was supposed to go first, but due to some misunderstanding, a local team went on the stage instead. I didn't follow their twenty-minute presentation too closely, but I did learn that if you wrap a web application in a desktop shell and it looks roughly the same, the enterprise clients won't care.</p>
<p><a href="https://drive.google.com/open?id=1dYwzzByKugHIrfA48cdhV0N-b2S2Ms_Ojd8I4ux_QRg">My presentation</a> was about static sites. I built my first one over twenty years ago and decided to revisit that era while discussing why static sites and static site generators are so relevant these days. See the resulting site at <a href="https://juhoshomepage.com/">juhoshomepage.com</a>. Creating an expanded version of this talk would be fun.</p>
<p>After me, Patrick Stapfer discussed ReasonML and how he uses CSS Modules with it. I was still too excited about my time on the stage, so I don't remember much else.</p>
<p>Finally, Benedikt Meurer discussed strange features of JavaScript. The core point was to avoid using <code>with</code> anywhere ever as it's a horrible feature. Incidentally, it's disabled in the strict mode. The problem is that you cannot remove features from the language as that would break the internet. Therefore it can only gain features.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#dinner-and-afterparty" id="dinner-and-afterparty"></a><span class="text">Dinner and Afterparty</span><a class="header-anchor-select" href="https://survivejs.com/#dinner-and-afterparty">#</a></h3>
<p>The dinner and afterparty were organized at the venue. The venue itself was an old cinema and fit the event quite well although the atrium was a little narrow and forced people to two floors. Apart from that, it seemed to work nicely, and usually, there was enough space.</p>
<p>I don't have much to say for the dinner, but I'm sure it was something in an Italian style. The afterparty felt weak, so I decided to join other speakers at the center of the city in a cozy little restaurant. I'm not a great fan of afterparties, so not much was lost.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-second-presentation-day" id="the-second-presentation-day"></a><span class="text">The Second Presentation Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-second-presentation-day">#</a></h2>
<p><figure><img src="/880d24387366d787cf0cc932a8897eb4.jpg" alt="Spielboden kino" class="" width="" height="" /><figcaption>Spielboden kino</figcaption></figure></p>
<p>The second day of presentations started with breakfast as well. This time around there was more variety to choose from although this time around I was better prepared by bringing something to eat myself.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#sara-vieira-on-depression" id="sara-vieira-on-depression"></a><span class="text">Sara Vieira on Depression</span><a class="header-anchor-select" href="https://survivejs.com/#sara-vieira-on-depression">#</a></h3>
<p><figure><img src="/7be5660424eef2511d8346afaee8c826.jpg" alt="Sara on depression" class="" width="" height="" /><figcaption>Sara on depression</figcaption></figure></p>
<p>The first presentation of the day was about depression by the famous Sara Vieira. I know her personally, so it was interesting for me to hear how she ended up where she is right now and the effort it took.</p>
<p>It was an interesting choice for a keynote although the topic itself was highly important. People tend not to discuss mental health in public, so it was a good opening.</p>
<p>Given it's a massive topic and demands discussion, I would have left it at the end of the first presentation day to give people space. I feel it took some attention away from the following one although maybe that's just me.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#nacho-martin-on-integrating-redux-with-a-server" id="nacho-martin-on-integrating-redux-with-a-server"></a><span class="text">Nacho Martin on Integrating Redux with a Server</span><a class="header-anchor-select" href="https://survivejs.com/#nacho-martin-on-integrating-redux-with-a-server">#</a></h3>
<p><figure><img src="/88537c6318ecb71de5fdf3d8244cbd57.jpg" alt="Nacho on integrating Redux with a server" class="" width="" height="" /><figcaption>Nacho on integrating Redux with a server</figcaption></figure></p>
<p>Nacho Martin, an internet acquaintance of mine, discussed how they are using Redux and integrating it with their Elixir server. The key insight for me was that if you consider what your real problem is, then it's easier to solve it. In their case, they had a problem with duplicating logic over both server and client. If I understood right, the way to solve this was to simplify the state management and push a large part of this to the server.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#benedikt-meurer-on-turbofan" id="benedikt-meurer-on-turbofan"></a><span class="text">Benedikt Meurer on TurboFan</span><a class="header-anchor-select" href="https://survivejs.com/#benedikt-meurer-on-turbofan">#</a></h3>
<p><figure><img src="/6dc7e207f8eaefd815bc7453cf3093dd.jpg" alt="Benedikt on TurboFan" class="" width="" height="" /><figcaption>Benedikt on TurboFan</figcaption></figure></p>
<p>After a coffee break, Benedikt discussed V8's new engine, TurboFan. The talk made me appreciate all the work Google puts into it. JavaScript isn't a straightforward language to optimize yet they keep finding ways to achieve that, and there's more in store.</p>
<p>One of the learnings for me was that it's better to write close to standard instead of trying to optimize code yourself. The interpreter can optimize the execution likely better than you can.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#michel-weststrate-on-reactivity" id="michel-weststrate-on-reactivity"></a><span class="text">Michel Weststrate on Reactivity</span><a class="header-anchor-select" href="https://survivejs.com/#michel-weststrate-on-reactivity">#</a></h3>
<p><figure><img src="/4455dc03ff28e5681d889e2ec2d9eda0.jpg" alt="Michel on reactivity" class="" width="" height="" /><figcaption>Michel on reactivity</figcaption></figure></p>
<p>Michel gave a skiing themed variant on his MobX talk. It was an excellent introduction to the topic, and I'm sure it inspired people to try it. A solid talk.</p>
<p>This time around, the lunch was a burger. Both meat and vegetarian options were provided. Also, there was dessert for speakers at least. The lunch was much better than on the first day.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#emil-sj-lander-on-yoga" id="emil-sj-lander-on-yoga"></a><span class="text">Emil Sjölander on Yoga</span><a class="header-anchor-select" href="https://survivejs.com/#emil-sj-lander-on-yoga">#</a></h3>
<p><figure><img src="/a713f308cd9568f84e8cd94526bb071a.jpg" alt="Emil on Yoga" class="" width="" height="" /><figcaption>Emil on Yoga</figcaption></figure></p>
<p>Emil discussed <a href="https://facebook.github.io/yoga/">Yoga</a>, a cross-platform layout engine. I didn't get much out of the talk, but that might have been due to the excellent lunch, not the presentation.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#kristijan-ristovski-on-state-management" id="kristijan-ristovski-on-state-management"></a><span class="text">Kristijan Ristovski on State Management</span><a class="header-anchor-select" href="https://survivejs.com/#kristijan-ristovski-on-state-management">#</a></h3>
<p><figure><img src="/253ad2f9c06ee86f7984b3fae91236db.jpg" alt="Kristijan on state management" class="" width="" height="" /><figcaption>Kristijan on state management</figcaption></figure></p>
<p>Kristijan, also known as kitze by the community, discussed the concept of rock stars, trends, and following them. The points he made were fair. Instead of going with the popular option, it makes sense to consider your options and constraints, and only then make a decision. Going against the mainstream is an option too. Most importantly you should focus on providing value. Wrong thing done right is still the wrong thing.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#sia-karamalegos-on-react-performance" id="sia-karamalegos-on-react-performance"></a><span class="text">Sia Karamalegos on React Performance</span><a class="header-anchor-select" href="https://survivejs.com/#sia-karamalegos-on-react-performance">#</a></h3>
<p><figure><img src="/bd4a57c20ea30829b08c1c101a4bde2e.jpg" alt="Sia on React performance" class="" width="" height="" /><figcaption>Sia on React performance</figcaption></figure></p>
<p>Sia discussed React performance and provided multiple viewpoints on the topic. It was a good overview and you can <a href="https://speakerdeck.com/siakaramalegos/lightning-fast-react-apps">check out the slides online</a> for the primary ideas. The topic is ideal for a small workshop.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#asim-hussain-on-bots" id="asim-hussain-on-bots"></a><span class="text">Asim Hussain on Bots</span><a class="header-anchor-select" href="https://survivejs.com/#asim-hussain-on-bots">#</a></h3>
<p><figure><img src="/7d6ca58ef06eaa7a4e0116f5fa4e8e68.jpg" alt="Asim on bots" class="" width="" height="" /><figcaption>Asim on bots</figcaption></figure></p>
<p>Asim gave the last presentation of the conference about bots. The point was simple. A certain famous American president writes tweets where <a href="https://en.wikipedia.org/wiki/Sentiment_analysis">sentiment analysis</a> can be applied. Given he is an influential figure, the argument is that this affects economics. If you created a bot that uses the technique and then trades, you would be able to make money.</p>
<p>Asim did simulated trades based on this. Although the bot wasn't a great success, it still proved the point. Asim's talk helped to show how emerging techniques will change computing in the coming years and it was an elegant way to end the spoken part of the conference.</p>
<p>After Asim's talk, we headed to Lech for skiing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-first-skiing-day" id="the-first-skiing-day"></a><span class="text">The First Skiing Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-first-skiing-day">#</a></h2>
<p><figure><img src="/30743677eee7fe496de2ad78577d9423.jpg" alt="Lech in the morning" class="" width="" height="" /><figcaption>Lech in the morning</figcaption></figure></p>
<p>Given I hadn't been skiing in twenty years (just cross-country), I decided to play it safe and go with the beginner group. It didn't take long for my skiing instincts to kick in, though, and it began to feel comfortable by the end of the day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-second-skiing-day" id="the-second-skiing-day"></a><span class="text">The Second Skiing Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-second-skiing-day">#</a></h2>
<p><figure><img src="/d645f7a7a1e5bd8e20d72dc0a2bd03c5.jpg" alt="Before the epic ride" class="" width="" height="" /><figcaption>Before the epic ride</figcaption></figure></p>
<p>I decided to tackle the most prominent hill near the starting point in the second morning. The conditions weren't as sunny as during the first day, but they were still quite good. The ride was epic, and after that, I headed back to a smaller one to chill out before heading for lunch with other attendees.</p>
<p>Lech proved to be surprisingly expensive (2-3x Vienna), so therefore it's not the best place for a cost-conscious person. It was still nice to visit and experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-good-the-bad-the-ugly" id="the-good-the-bad-the-ugly"></a><span class="text">The Good, The Bad, The Ugly</span><a class="header-anchor-select" href="https://survivejs.com/#the-good-the-bad-the-ugly">#</a></h2>
<p><figure><img src="/c01d92466f18104ef85162cfe8b6330a.jpg" alt="Lech in sunset" class="" width="" height="" /><figcaption>Lech in sunset</figcaption></figure></p>
<p>Overall, AgentConf was great, and I enjoyed it a lot. Skiing was the highlight for me although I'll prepare better next year so I can spend more time on the more challenging slopes. I was physically fit for it, but it takes a certain amount of adaptation to get most out of skiing.</p>
<p>The presentations had high quality although I might have used a different order. I wish the second day had lightning talks as well and I would have loved to see panels in the program. One of the neat things AgentConf did was that they got Christoph Nakazawa to host them. If the audience was feeling shy, he had a few questions in store. I think it improved the quality of the conference a lot.</p>
<p>When you visit a lot of conferences, it's easier to see what's missing. Compared to ScriptConf, I noticed I was missing an MC although Christoph compensated for this well. Still, having strong audio in place seems to help with the ambiance a lot which was interesting for me to notice.</p>
<p>Food was excellent especially for the speakers' dinner and the second day. For some reason, the first day felt weaker when it came to this although I didn't have to go hungry.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/d9e8c00e530aa8f3710986e0d4b8d448.jpg" alt="The organizers of AgentConf" class="" width="" height="" /><figcaption>The organizers of AgentConf</figcaption></figure></p>
<p>I might go to <a href="https://www.agent.sh/">AgentConf</a> again next year, and it was one of the better technical conferences I've ever been. There are always little details you can do better, but the primary offering is solid and good value.</p>
<p>I spent more money on the trip than I would have liked as I didn't expect Lech to be so expensive. For me, even a less fancy place to ski would have been more than enough especially given I'm far from the level in which I can enjoy the most challenging slopes.</p>
<p>If you want to go to a good conference and enjoy skiing, AgentConf is a great choice. I like the idea of combining high quality technical content with leisure and I wish more conferences followed this route.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can find more of <a href="https://www.flickr.com/photos/bebraw/sets/72157691195161201/">my AgentConf 2018 photos at Flickr</a>. See also <a href="https://www.flickr.com/photos/142568661@N06/">the official photos</a>.</blockquote>Experiences on ScriptConf 2018aexperiencesonscriptconf20182018-02-01t00:00:00z2018-02-01T00:00:00Z<p>One of the benefits of living in Vienna is that it's easy to reach central Europe and its conferences. Given Linz is close to Vienna (about 90 minutes by train), I decided to visit <a href="https://scriptconf.org/">ScriptConf</a>.</p>
<p>ScriptConf is a JavaScript themed single-track conference, and the promise was great talks and great food. That was an offer I couldn't resist, and as a result, I found myself in Linz for a day. It's likely I'll visit again as the city was enjoyable and it felt like it has more to offer.</p>
<p>The conference was split into two days. The first day was for workshops and the second day for the presentations. I participated only in the latter day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-beginning-of-the-presentation-day" id="the-beginning-of-the-presentation-day"></a><span class="text">The Beginning of the Presentation Day</span><a class="header-anchor-select" href="https://survivejs.com/#the-beginning-of-the-presentation-day">#</a></h2>
<p><figure><img src="/2bf14385f82219355c95e252593b286d.jpg" alt="The beginning of the conference" class="" width="" height="" /><figcaption>The beginning of the conference</figcaption></figure></p>
<p>The curious thing about ScriptConf was that the official program started at 13:00. There was an hour for registration before that. I came from Vienna on the morning train, and that left me time to explore Linz and make some friends. I met a couple of other developers going to the conference before registering and we had a chance to get some beverages and breakfast to eat.</p>
<p>In retrospect, I should have eaten a proper lunch before the event given the first official coffee at three o'clock didn't have anything salty in it. As a result, we left the conference venue and found <a href="https://en.wikipedia.org/wiki/Bosna_(sausage%29">bosnas</a> for ourselves. It was a new experience for me, but I'm glad we made this move as I needed the salty bit although the cakes provided by the conference were tasty as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#evan-you-on-open-source" id="evan-you-on-open-source"></a><span class="text">Evan You on Open Source</span><a class="header-anchor-select" href="https://survivejs.com/#evan-you-on-open-source">#</a></h2>
<p><figure><img src="/f24c966638d4d0642ce0d1e1eeda0969.jpg" alt="Evan You" class="" width="" height="" /><figcaption>Evan You</figcaption></figure></p>
<p>The day itself began with a presentation by <a href="https://twitter.com/youyuxi">Evan You</a>, the author of the popular <a href="https://vuejs.org/">Vue.js</a> UI framework. It was about his journey into open source, and I think it was a fitting way to start the day. I could recognize many of his struggles and especially his version of hype cycle for open source development resonated with me.</p>
<p>Each project has its momentum that it either sustains or loses. More importantly, there's the personal side. As a project gains popularity, it has to deal with the pressures caused by this reputation.</p>
<p>For some reason, the entire day was riddled with small technical problems, and this caused the schedule to slip at times. It wasn't a big problem but something a little annoying especially given the day started so late.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#marcy-sutton-on-accessibility" id="marcy-sutton-on-accessibility"></a><span class="text">Marcy Sutton on Accessibility</span><a class="header-anchor-select" href="https://survivejs.com/#marcy-sutton-on-accessibility">#</a></h2>
<p><figure><img src="/0d48da009b6c993a597bfb3dc1f88363.jpg" alt="Marcy Sutton" class="" width="" height="" /><figcaption>Marcy Sutton</figcaption></figure></p>
<p>The day continued with <a href="https://twitter.com/marcysutton">Marcy Sutton</a>'s talk on accessibility. I feel this is an important topic that needs more attention from the web development community. Often it's an afterthought if it's given any thought at all. I became aware of <a href="https://axe-core.org/">aXe tools</a>, and I'll use the Chrome plugin in the future.</p>
<p>I feel the talk would work exceptionally well in a workshop format as then you get to test the tools and see their impact on accessibility.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#simona-cotin-on-serverless" id="simona-cotin-on-serverless"></a><span class="text">Simona Cotin on Serverless</span><a class="header-anchor-select" href="https://survivejs.com/#simona-cotin-on-serverless">#</a></h2>
<p><figure><img src="/a09d4f04833f1e5562fa3bc4ede47f1b.jpg" alt="scriptconf-2018" class="" width="" height="" /><figcaption>scriptconf-2018</figcaption></figure></p>
<p><a href="https://twitter.com/simona_cotin">Simona Cotin</a> discussed the phenomenon of Serverless applications. It was an excellent overview of the topic although I'm not that interested in Azure myself. Perhaps something more platform-agnostic would have fit the conference better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#michaela-lehr-on-augmented-reality" id="michaela-lehr-on-augmented-reality"></a><span class="text">Michaela Lehr on Augmented Reality</span><a class="header-anchor-select" href="https://survivejs.com/#michaela-lehr-on-augmented-reality">#</a></h2>
<p><figure><img src="/d569389956e1f0c7fbf86aa4a20e316f.jpg" alt="Michaela Lehr" class="" width="" height="" /><figcaption>Michaela Lehr</figcaption></figure></p>
<p><a href="https://twitter.com/FischaelaMeer">Michaela Lehr</a> covered the rise of Augmented Reality (AR) and related technologies (Virtual Reality (VR), Mixed Reality (MR)). The beautiful thing about the talk was that it gave a good idea of the potential and future. It will still take years before we see real mainstream adoption. Now is the time to experiment.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#andr-staltz-on-cycle-js" id="andr-staltz-on-cycle-js"></a><span class="text">André Staltz on Cycle.js</span><a class="header-anchor-select" href="https://survivejs.com/#andr-staltz-on-cycle-js">#</a></h2>
<p><figure><img src="/f0f4477c0dd5b80579001c63675f8463.jpg" alt="André Staltz" class="" width="" height="" /><figcaption>André Staltz</figcaption></figure></p>
<p><a href="https://twitter.com/andrestaltz">André Staltz</a> approached his <a href="https://cycle.js.org/">Cycle.js framework</a> from a refreshing angle of paper coding. Instead of focusing on code, he focused on graphs to get to the concepts behind Cycle.js. Although Cycle.js was already familiar to me, the talk drove down the key ideas even further and explained the recent improvements which allow you to treat your applications as fractals - applications of applications.</p>
<p>The dinner provided after André's talk was adequate compared to some other technical conferences although it didn't reach the advertised level at least for me. But then, you don't go to these events to enjoy the local food. That's why restaurants exist.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#phil-hawksworth-on-next-wave-infrastructure" id="phil-hawksworth-on-next-wave-infrastructure"></a><span class="text">Phil Hawksworth on Next Wave Infrastructure</span><a class="header-anchor-select" href="https://survivejs.com/#phil-hawksworth-on-next-wave-infrastructure">#</a></h2>
<p><figure><img src="/aba784c925c20c8ccbce0a6938d19c32.jpg" alt="Phil Hawksworth" class="" width="" height="" /><figcaption>Phil Hawksworth</figcaption></figure></p>
<p>Although the talk had a dry premise, <a href="https://twitter.com/philhawksworth">Phil Hawksworth</a>'s talk was one of the better ones of the conference. It made me even more convinced that static sites enhanced the right way is an excellent way to develop websites. The technology is maturing, and it provides even more benefits than I knew.</p>
<p>The ability to treat each Git commit as deployment is a simple yet powerful idea as it allows quick visual inspections during the development process. The fact that you can complement a static site with dynamic elements takes them closer to the CMS space, and you could claim that there's a significant overlap between the two. It's no wonder we have the category of static site CMS's these days as a result.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#charlie-gerard-on-mind-control" id="charlie-gerard-on-mind-control"></a><span class="text">Charlie Gerard on Mind Control</span><a class="header-anchor-select" href="https://survivejs.com/#charlie-gerard-on-mind-control">#</a></h2>
<p><figure><img src="/ea5f704a081f4f22ce001c5b4acc184b.jpg" alt="Charlie Gerard" class="" width="" height="" /><figcaption>Charlie Gerard</figcaption></figure></p>
<p><a href="https://twitter.com/devdevcharlie">Charlie Gerard</a> discussed how to control JavaScript using your mind. That is, how to achieve this using a specific device. She showed how she acquired equipment and developed a Node.js API for it. The presentation was made even better by live demonstrations that drove down the points.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-good-the-bad-the-ugly" id="the-good-the-bad-the-ugly"></a><span class="text">The Good, The Bad, The Ugly</span><a class="header-anchor-select" href="https://survivejs.com/#the-good-the-bad-the-ugly">#</a></h2>
<p><figure><img src="/35a989d528f28020cd2b6698f067c8b2.jpg" alt="The MC" class="" width="" height="" /><figcaption>The MC</figcaption></figure></p>
<p>Overall, the second iteration of ScriptConf was a cool conference. Especially having an MC on the stage was a good idea and that's something I hope other conferences will copy as it improves the atmosphere surprisingly much.</p>
<p>The format of long presentations along the day felt a bit much at times. I would have appreciated lightning talks in between to get access to more ideas. The problem was made even worse by the late start time and technical delays.</p>
<p>Although the primary space of the conference was roomy, the place where you registered and ate felt too small. One way to solve this would have been to use the area on both sides of the venue to split the problem. The need for space might be a cultural issue, though, as I'm used to having room.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><figure><img src="/f6f2f71ff2942bfdb591e4e86b4bcb57.jpg" alt="Linz at night" class="" width="" height="" /><figcaption>Linz at night</figcaption></figure></p>
<p>I am happy I went to <a href="https://scriptconf.org/">ScriptConf</a>, and I feel it was good value. I spent approximately 200 euros for the entire trip, and if nothing else, I got exposed to new ideas and people. I might do this again next year.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can find more of <a href="https://www.flickr.com/photos/bebraw/sets/72157669068490399">my ScriptConf 2018 photos at Flickr</a>.</blockquote><blockquote class="tip"><i class="icon-attention-circled"></i>See also <a href="https://www.storyblok.com/tp/all-you-need-to-know-script18-scriptconf">All you need to know: Script18 #scriptconf</a> and <a href="https://www.wolfgang-ziegler.com/blog/script18">Script18 - Impressions and Recap</a> for other reports.</blockquote>Illuminate - Syntax highlighter for Node - Interview with Vivek Bansalailluminatesyntaxhighlighterfornodeinterviewwithvivekbansal2018-01-30t00:00:00z2018-01-30T00:00:00Z<p>One of the core features of this site is custom syntax highlighting. I had to figure out ways to deal with custom syntax provided by Leanpub. Initially, I implemented a solution based on <a href="http://prismjs.com/">PrismJS</a>, but I wasn't entirely happy with it, and the frustration led me to look into alternatives. That's how I found <a href="https://github.com/vkbansal/illuminate-js/">Illuminate</a> by <a href="https://twitter.com/_vkbansal">Vivek Bansal</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://secure.gravatar.com/avatar/57d10b8c8d537e8517f6a3c324679da5?s=200" alt="Vivek Bansal" class="author" width="100" height="100" />
</span>
My name is Vivek Kumar Bansal, and I work as a UI Engineer at <a href="https://flipkart.com">Flipkart, India</a>. I started as a PHP developer and later switched to JavaScript/NodeJs full-time and I have nearly five years of professional experience. I firmly believe in open source philosophy and try to contribute to open source projects regularly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-illuminate-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-illuminate-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Illuminate</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-illuminate-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Illuminate is a syntax highlighter which can be used to highlight code snippets in HTML files. It is based on already popular syntax highlighter <a href="http://prismjs.com/">PrismJS</a>. It can be easily integrated with tools like <a href="https://github.com/markdown-it/markdown-it">markdown-it</a>. It can also be used with <a href="https://facebook.github.io/react/">ReactJS</a> via <a href="https://www.npmjs.com/package/react-illuminate">react-illuminate</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-illuminate-work-" id="how-does-illuminate-work-"></a><span class="text">How does <em>Illuminate</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-illuminate-work-">#</a></h2>
<p>Similar to PrismJS, It works by creating a <strong>Token</strong> tree, by matching the code string to a given set of Regular Expressions, called a <strong>Language definition</strong>. Later, The Token tree is again converted to a string by wrapping the code in <code>span</code> tags and add appropriate class names.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-illuminate-differ-from-other-solutions-" id="how-does-illuminate-differ-from-other-solutions-"></a><span class="text">How does <em>Illuminate</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-illuminate-differ-from-other-solutions-">#</a></h2>
<p>Illuminate was re-written from the ground up in ES6, so that it can be used in NodeJS and browser with the help of tools webpack, rollup, etc., With <a href="https://www.npmjs.com/package/react-illuminate">react-illuminate</a>, it can also be used with ReactJS in the "react way", without using <code>dangerouslySetInnerHTML</code>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-illuminate-" id="why-did-you-develop-illuminate-"></a><span class="text">Why did you develop <em>Illuminate</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-illuminate-">#</a></h2>
<p>While working on <a href="https://vkbansal.me">my website</a>, which is statically generated, I wanted something that can be used with <a href="https://github.com/markdown-it/markdown-it">markdown-it</a> on NodeJS. I was already familiar with PrismJS and its inner workings. I had proposed the change in PrismJS itself, but the maintainers were not interested in it. Hence, I started working on my alternative.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Make it stable and add support for other frameworks/tools like Gatsby, Vue, etc.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-illuminate-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-illuminate-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Illuminate</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-illuminate-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I believe that compile-to-javascript languages like TypeScript, ReasonML, Flow, etc., will see broad adoption. Type safety will become the first-class citizen of the web world.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Do not limit yourselves to a particular framework/paradigm. Keep pushing your limits.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Vivek! I have been happy with Illuminate so far and hope others find it useful as well. It's a great little project that deserves kudos.</p>
<p>See <a href="https://github.com/vkbansal/illuminate-js/">Illuminate on GitHub</a>.</p>
Logux - Replace AJAX-REST - Interview with Andrey Sitnikaloguxreplaceajaxrestinterviewwithandreysitnik2018-01-26t00:00:00z2018-01-26T00:00:00Z<p>When you build a web application, you often have to communicate with a backend. It's not uncommon to do this using AJAX against a RESTful API.</p>
<p>Logux by <a href="https://twitter.com/sitnikcode">Andrey Sitnik</a> is one possible alternative.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/cd32d17c95d3bfb352504c36462b98bd?s=200" alt="Andrey Sitnik" class="author" width="100" height="100" />
</span>
I was born in Vladivostok, a Russian city near Japan and China. I spent childhood in Yemen, Arabic country where my grandparents work.</p>
<p>Now I am a digital nomad and lead front-end developer at <a href="https://evilmartians.com/">Evil Martians</a>. Most of the readers will know me because of my open source projects: <a href="https://www.npmjs.com/package/autoprefixer">autoprefixer</a> and <a href="https://www.npmjs.com/package/postcss">PostCSS</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-logux-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-logux-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Logux</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-logux-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Logux is a JS library and Node.js server to replace AJAX requests. It synchronizes Redux/Vuex actions between clients and server (each, Redux actions on the server 😆) and between clients.</p>
<p>In Logux you don’t need to write Redux Saga, calling <code>fetch()</code>, show loader during a request, handling network errors and worry, that you don’t support offline-first and push updates. In Logux you use <code>dispatch.sync(action)</code> instead of <code>dispatch(action)</code> and Logux will send this action to a server and other clients.</p>
<p>At least, we want to have simple API in Logux. In fact, it is still experiment (current version is just 0.2). I was inspired by ideas of CRDT and distributing computing. Right now we still need to understand how to present this remarkable thought in a better way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-logux-work-" id="how-does-logux-work-"></a><span class="text">How does <em>Logux</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-logux-work-">#</a></h2>
<p>Logux core is a JS library to synchronize actions log between two machines (there is no client and servers in Logux protocol, it is peer-to-peer protocol). By default, it uses WebSockets to maintain a connection (you can change connection mechanism), and it can store actions in different stores (memory, IndexedDB).</p>
<p>This core also takes care of an essential thing in distribution systems: the time. For example, Alice did not have Internet for 30 minutes (NY metro doesn’t have the network in trains). But good applications allow changing documents in offline so she can change document and get a connection only 30 minutes later.</p>
<p>30 minutes is an extended period, and other clients can alter the same document during this time. Because of this, we have to merge changes and fix conflicts. Don’t forget that Alice’s phone could have wrong time to make things worse. Yep, a distributed system can sometimes be complicated.</p>
<p>Logux core will mark every action with particular time mark to handle the problem. Also, it will calculate the time difference between client and server so it will be sure what action was the last.</p>
<p>On top of this core, we have few packages with an end-user facing API:</p>
<ul>
<li><a href="https://github.com/logux/logux-redux">Logux Redux</a> wraps all Logux Core magic to Redux-compatible API. At any moment Logux Server could send action and put it inside your history (for example, Alice finally got WiFi and sent her changes from the metro ride). Logux Redux will undo all Bob’s newest actions, add that Alice action “from the past” and replay all Bob’s actions again. Or in any moment server could send “undo” action (for example, you changed your login in offline, but this login was taken, and renaming could not be applied anymore) and Logux Redux will remove this action from history.</li>
<li><a href="https://github.com/nikolay-govorov/logux-vuex">Logux Vuex</a> does the same for Vue and Vuex.</li>
<li><a href="https://logux.github.io/logux-status/">Logux Status</a> contains widgets and UX best practice to show current synchronization process to the client. With Logux you can implement Optimistic UI. It updates UI immediately after “Save” button click. If a user doesn‘t have connection Logux Status will show the widget with “Your changes were not saved on the server, connect to the Internet to save them.”</li>
<li><a href="https://github.com/logux/logux-server">Logux Server</a> is a Node.js framework, but <a href="https://github.com/logux/logux-protocol">Logux protocol</a> is open. Logux server will be similar to most of Node.js web servers. But instead of REST, URLs and forms, you will have Redux/Vuex actions. And some of this actions came from the past. You need to check action’s created time.</li>
</ul>
<p>Right now, our primary challenge is to provide better API to clean log. I told you about a shiny utopia about adding actions to the log. But we also need to clean old actions, which are not actual anymore. For example, if you renamed user from <code>Old name</code> to <code>New name</code> and saved this changes on the server, you don’t need old action with <code>Old name</code> anymore.</p>
<p>Current cleaning API is decent, but we could do better by focusing more on modern developers. Not only on distributed system scientists.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-logux-differ-from-other-solutions-" id="how-does-logux-differ-from-other-solutions-"></a><span class="text">How does <em>Logux</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-logux-differ-from-other-solutions-">#</a></h2>
<p>It is easy to compare Logux with AJAX 😋. With Logux you don’t need to handle network errors (Logux Status will show error widget, Logux Redux will save action until a user gets a good connection). Don’t need to make loaders during saving the changes (You can update UI right after “Save” button click).</p>
<p>In many cases, we need Redux Saga for AJAX. In Logux you just dispatch action and Logux will take care of sending to the server and show synchronization process to the user.</p>
<p>But with less code, you will get more features. You will get push updates out-of-box. When one client dispatch action (like user renaming), a server will resend this action to other clients (Logux uses channels and subscriptions to control who is allowed to receive actions).</p>
<p>Also, you will get basic offline-first support. New actions will be applied immediately to client UI, but then they will wait for Internet connection in IndexedDB. Of course, for good offline-first support, you need to take care of merging conflicts (when two users changed the same document). And Logux cannot fix all conflicts for you because it depends on business logic. But Logux will help you here by taking care of distributed time and Redux state time-traveling.</p>
<p>Of course, there is no sense you use Logux in simple web pages. With 2-3 requests, it is better to use AJAX. And of course, AJAX is still better for some unusual cases, like sending big files. But, I think, in big applications, AJAX is not a competitor for Logux.</p>
<p>It is more interesting to compare Logux with some modern solutions. For example, GraphQL and Apollo. Having these technologies with many great ideas inside is great. GraphQL is more focused on requesting the data, though. Mutation doesn’t have correct distributed time marks. Optimistic UI and subscriptions still need more code.</p>
<p>In contrast in Logux by default, your React components will be subscribed to data updates. Optimistic UI is out of the box. CRDT could be implemented much simpler.</p>
<p>On the other hand, GraphQL works better with PHP, Ruby or Python, because it does not require a WebSocket connection. Also, Apollo is much stable and ready-for-production solution. Right now I don’t recommend Logux for big projects. GraphQL will be much better for them. I am making Logux for future beyond GraphQL.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-logux-" id="why-did-you-develop-logux-"></a><span class="text">Why did you develop <em>Logux</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-logux-">#</a></h2>
<p>I was tired to write 50+ lines of code to save simple React form 😧.</p>
<p>But also I believe in the better world. In the world when all web applications will have push updates and offline support. Wireless connection is always unstable. Especially for next billion of the users. I was tired of pressing Reload button on any network problem during AJAX request.</p>
<p>We have lousy networking in applications, not because developers are lazy. My forms were bad too 😅.</p>
<p>So my dream was to have less code with better networking. When I saw talk about <a href="https://github.com/gritzko/swarm">Swarm.js</a>, I was so excited how simple and powerful is the idea of CRDT. But it was not so easy to combine CRDT with Redux because Redux and Swarm.js have separated actions logs. And when we drink with Dan Abramov in the bar, the simple idea was created. Logux idea is to use one actions log for everything: Redux, CRDT, networking.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>First, I need to write good docs and guides for Logux 0.2.</p>
<p>Next, I will think about Logux 0.3: more syntax sugar for log cleaning, improve API according to practical experience and user feedback.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-logux-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-logux-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Logux</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-logux-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think GraphQL, Apollo, Firebase, gun.js show the simple trend: next revolution will be not on the client or the server. Next revolution will be in client-server communications.</p>
<p>We have so many great things to client-side development but right now when you need to write AJAX request you are going to the old jQuery-like world.</p>
<p>With PWA we will have more mobile web applications. But mobile users expect better networking from your web app. Push updates and offline support are standard in iOS/Android world. If we want to compete with native applications, we should make our web application smarter.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Software development should make people happy, not solving tasks. If you are making a tool, think about DX, not only about features. If you are making an app, the user experience is more critical than framework and technologies.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://github.com/andreypopp">Andrey Popp</a> is one of the most underestimated React developers.</li>
<li><a href="https://github.com/gritzko">Victor Grishenko</a> is one of the best-distributed system scientists. His <a href="https://github.com/gritzko/swarm">Swarm.js</a> was the main inspiration for Logux.</li>
<li><a href="https://github.com/tonsky">Nikita Prokopov</a> is other great distributed systems engineer.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Andrey! You might be right in that we'll see improvements next when it comes to server communication.</p>
<p>If you want to learn more about Logux, consider the following resources:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=mv--1vRvCys&t=417s">Andrey's talk about Logux with code examples</a></li>
<li><a href="https://github.com/logux/logux-redux">Logux Redux</a></li>
<li><a href="https://github.com/logux/logux-server/">Logux Server</a></li>
<li><a href="https://twitter.com/logux_io">@logux_io on Twitter</a></li>
</ul>
Fastify - Fast and low overhead web framework for Node.js - Interview with Tomas Della Vedovaafastifyfastandlowoverheadwebframeworkfornodejsinterviewwithtomasdellavedova2018-01-17t00:00:00z2018-01-17T00:00:00Z<p>Servers, servers, servers. I've written a lot of Node.js servers since I began using it. Initially, I went through the API it provides but after a while most of the community settled on using <a href="https://expressjs.com/">Express</a>.</p>
<p>In this interview you'll learn about an alternative by <a href="https://twitter.com/delvedor">Tomas Della Vedova</a>. Fastify has been designed performance in mind.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/1db56707b818ace550da1123a8ad1304?s=200" alt="Tomas Della Vedova" class="author" width="100" height="100" />
</span>
I am an enthusiastic software engineer, who spends most of his time programming in JavaScript and Node.js. I am constantly forward the enrichment of my knowledge and the exploration of new technologies. Moreover, I truly believe in the open source philosophy, and I will always be passionate about technology, design, and cinema.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-fastify-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-fastify-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Fastify</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-fastify-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/fastify/fastify">Fastify</a> is an opinionated web framework for Node.js; it focuses on performance and low overhead. The architectural pattern that we used to build it enables microservice ready applications.</p>
<p>The core is small and it <a href="https://github.com/fastify/fastify/blob/master/docs/Ecosystem.md">exposes powerful APIs to extend it</a> with all the functionalities that are needed.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-fastify-work-" id="how-does-fastify-work-"></a><span class="text">How does <em>Fastify</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-fastify-work-">#</a></h2>
<p>Fastify is the handler function that you pass to the HTTP core module, nothing more.</p>
<p>We started building it from scratch, adding one feature at a time. For every new feature, we worked a lot on the optimization and lowering the overhead of the feature, trying to reach the "almost zero" overhead.</p>
<p>Fastify supports our of the box Hooks, express style middlewares, decorators, HTTP2 and async-await.</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> fastify <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fastify"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
fastify<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token string" >"/"</span><span class="token punctuation" >,</span> <span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span>request<span class="token punctuation" >,</span> reply<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> hello<span class="token punctuation" >:</span> <span class="token string" >"world"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
fastify<span class="token punctuation" >.</span><span class="token function" >listen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >3000</span><span class="token punctuation" >,</span> <span class="token keyword keyword-function" >function</span> <span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-throw" >throw</span> err<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
fastify<span class="token punctuation" >.</span>log<span class="token punctuation" >.</span><span class="token function" >info</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token template-string" ><span class="token string" >`Server listening on </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>fastify<span class="token punctuation" >.</span>server<span class="token punctuation" >.</span><span class="token function" >address</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>port<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>We have extracted from Fastify all the code that could be separated from the framework itself and used in other situations, for example in our <a href="https://github.com/delvedor/find-my-way">router</a>, the <a href="https://github.com/fastify/fast-json-stringify">serialization library</a> and the <a href="https://github.com/fastify/middie">middleware engine</a>. We released them as separate libraries that don't need Fastify as a dependency, so you can use them in your current framework as well, or even build one just for your needs!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-fastify-differ-from-other-solutions-" id="how-does-fastify-differ-from-other-solutions-"></a><span class="text">How does <em>Fastify</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-fastify-differ-from-other-solutions-">#</a></h2>
<p>Given one of the core goals of the project is performance, we do not land any feature if the implementation isn't well optimized and the cost that we pay is as low as possible.</p>
<p>Fastify has a robust plugin system, it guarantees the load (and close) order of the plugins and creates a zero cost encapsulation to help the users maintain a clean and ordered code. It will also help the user to write decoupled code and use a different version of the same plugin (or maybe with different configurations) in a different subsystem of the application. A similar approach with Express would cause the performance to drop significantly for each nesting level.</p>
<p>Furthermore, the plugin model is based on <a href="https://stackoverflow.com/questions/1312259/what-is-the-re-entrant-lock-and-concept-in-general">reentrant</a> locks and given it's graph-based, Fastify handles asynchronous code correctly while guaranteeing the loading order and the close order of the plugins.</p>
<p>The plugin system creates a direct acyclic graph, and in this way, it is impossible to create cross dependencies, and you can use a different version of the same plugin in different parts of your application.</p>
<p><figure><img src="/9f7ecd003147aad41c8b8c236c703db4.png" alt="Directed acyclic graph" class="" width="" height="" /><figcaption>Directed acyclic graph</figcaption></figure></p>
<p>Thanks to this architecture it is easy to split your application in multiple microservices because we'll help you with the creation of a system where the separation of concerns and cohesion are two essential keys of your application.</p>
<p><figure><img src="/6758771bb4590b09ac0780ceb3c51da9.png" alt="Directed acyclic graph services" class="" width="" height="" /><figcaption>Directed acyclic graph services</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-fastify-" id="why-did-you-develop-fastify-"></a><span class="text">Why did you develop <em>Fastify</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-fastify-">#</a></h2>
<p>Almost one year and a half ago me and <a href="https://twitter.com/matteocollina">Matteo</a>, the coauthor of Fastify, started working on a nice project, <a href="https://github.com/fastify/fast-json-stringify">fast-json-stringify</a>. By doing different performances analysis we discovered that serialize JSON is very expensive, so we asked ourself, can we make it faster? We worked for 1-2 months, and we built <code>fast-json-stringify</code>, which is 2x-3x times faster than the native method (spoiler alert, we use <a href="http://json-schema.org/">JSON Schema</a>).</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> FJS <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fast-json-stringify"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> stringify <span class="token operator" >=</span> <span class="token function" >FJS</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> <span class="token string" >"object"</span><span class="token punctuation" >,</span>
properties<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
user<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"string"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"integer"</span> <span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >stringify</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> user<span class="token punctuation" >:</span> <span class="token string" >"tomas"</span><span class="token punctuation" >,</span> age<span class="token punctuation" >:</span> <span class="token number" >24</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>We were pleased with the results, so we started optimizing other parts that usually are pretty expensive. Routing, hooks, middlewares and so on.</p>
<p>After some time we put all together, and Fastify was born. We wanted to challenge ourselves to build an extremely fast web framework, with the goal to get very close to the performances of a plain node HTTP server.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Currently, we are close to the version 1.0.0. We are focusing on fixing the last bugs, and we are listening to feedback from our early adopters. In this way, we can try to meet their needs and handle breaking changes. We are also updating the API plugin to allow the users to declare their dependencies and provide better support for async-await.</p>
<p>An example of how <em>async-await</em> works in Fastify:</p>
<p><strong>server.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >build</span> <span class="token punctuation brackets-parentheses" >(</span>opts<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> fastify <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fastify"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>opts<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
fastify<span class="token punctuation" >.</span><span class="token function" >register</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fastify-helmet"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
fastify<span class="token punctuation" >.</span><span class="token function" >register</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fastify-mongodb"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
url<span class="token punctuation" >:</span> <span class="token string" >"mongodb://mongo/db"</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
fastify<span class="token punctuation" >.</span><span class="token function" >register</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'./lib'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> prefix<span class="token punctuation" >:</span> <span class="token string" >"/v1"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> fastify<span class="token punctuation" >.</span><span class="token function" >ready</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> fastify<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><strong>lib/index.js</strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >plugin</span> <span class="token punctuation brackets-parentheses" >(</span>fastify<span class="token punctuation" >,</span> opts<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> db <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> fastify<span class="token punctuation" >.</span>mongo<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> collection <span class="token operator" >=</span> db<span class="token punctuation" >.</span><span class="token function" >collection</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"users"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// you can reach this route with `/v1/user/:id`</span>
fastify<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"/user/:id"</span><span class="token punctuation" >,</span> <span class="token keyword keyword-async" >async</span> <span class="token punctuation brackets-parentheses" >(</span>request<span class="token punctuation" >,</span> reply<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-try" >try</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token keyword keyword-await" >await</span> collection<span class="token punctuation" >.</span><span class="token function" >findOne</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
id<span class="token punctuation" >:</span> request<span class="token punctuation" >.</span>params<span class="token punctuation" >.</span>id
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-catch" >catch</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token class-name" >err</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
reg<span class="token punctuation" >.</span>log<span class="token punctuation" >.</span><span class="token function" >error</span><span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Error</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Something went wrong"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> plugin<span class="token punctuation" >;</span>
</code></pre>
<p>We want our community to continue to grow, so every time a plugin creator sends it work to us, before adding it to our "official" <a href="https://github.com/fastify/fastify/blob/master/docs/Ecosystem.md">plugin list</a> we help them to improve their code (if needed), and enforce a correct use of our API.</p>
<p>We are also constantly updating the documentation with all the hardest parts or our architectural decisions. For example, we wrote the <a href="https://github.com/fastify/fastify/blob/master/docs/Plugins-Guide.md">hitchhiker's guide to plugins</a> to help users understand the architecture of the framework and how to use correctly the APIs that we expose, and we have just updated our <a href="https://github.com/fastify/fastify/blob/master/docs/Getting-Started.md">getting started guide</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-fastify-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-fastify-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Fastify</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-fastify-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope it looks shiny!</p>
<p>Joke apart, one of our core design decision, is that Fastify should provide a lightweight and small core that is easy to extend with plugins. Probably most of the work we'll do in the future will be in this direction while exposing new (and low overhead) APIs to the plugins creators and help them to create valuable plugins.</p>
<p>Regarding the future of web development I think that progressive web apps, AI and internet of things will play a important role. This is why with Fastify we created a "batteries not included" framework, we want to help developers build the applications they need by using the code they need.</p>
<p>I hope that the open source world will continue to grow massively as its doing right now, and that developers and companies will continue to release their work, in a way that everybody will continue to grow as a group, where we all help each other make valuable code to help people.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Try. The better way to learn new things is to try them.</p>
<p>A book or a workshop can help until a certain point, but if you want to really understand how something works, just write it. Get your hands dirty.</p>
<p>If you have some problem with a library or have a question on how approach to a pattern or technology, ask.
But remember to be always kind with others, we are all human beings and the way we interact each other is important.</p>
<p>If you open an issue be kind, thank for the work that has been done, explain your problem and if you can, propose a solution. It will be appreciated.</p>
<p>Contribute to open source, even with small things. The open source world is amazing and as much you give as much you get.</p>
<p>It's hard to measure how much the open source world gave to me; it helped me to be a better developer and a better person.</p>
<p>Do not be discouraged by others experienced developers, everyone has been young and everyone will help you, as well as you will help other young developers in the future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/yoshuawuyts">Yoshua Wuyts</a>, creator of <a href="https://github.com/choojs/choo">Choo</a> and many other cool things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Tomas! Fastify looks like something I should try on my servers.</p>
<p>You can <a href="https://www.fastify.io/">learn more from Fastify site</a> or <a href="https://github.com/fastify/fastify">Fastify GitHub</a>.</p>
BEM - Methodology to enable reuse in front-end development - Interview with Sergey Berezhnoyabemmethodologytoenablereuseinfrontenddevelopmentinterviewwithsergeyberezhnoy2018-01-12t00:00:00z2018-01-12T00:00:00Z<p>Developing large scale applications requires a certain amount of discipline. Sometimes it is enforced by the environment; sometimes you have to apply it yourself through conventions. Likely both are needed to some extent. As applications grow in complexity, the need for clear architecture grows unless you want to end up with a <a href="http://www.laputan.org/mud/">big ball of mud</a> or a similar disaster.</p>
<p>To learn more about the topic, I am interviewing <a href="https://twitter.com/veged">Sergey Berezhnoy</a>, one of the authors of <a href="https://en.bem.info/">BEM</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/69aab18f21bd89606bf19a11c4989bb4?s=200" alt="Sergey Berezhnoy" class="author" width="100" height="100" />
</span>
I am a web developer in <a href="https://yandex.com/company/">Yandex</a> since 2005, and I participate in the development of such Yandex services like Search, Mail, Blog Search, Yandex blogging platform, Video and Images searches. Along with service development created internal tools for web development. I am one of the co-authors of BEM.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_bem_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_bem_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>BEM</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_bem_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>BEM is an architecture pattern allowing to achieve flexible and maintainable code. It's a way to make your code self-descriptive and predictable keeping everything consistent and familiar to all the developers on a project.</p>
<p>And all you need to achieve this for literally any interface is just a few concepts:</p>
<ol>
<li><a href="https://en.bem.info/methodology/key-concepts/#block">Blocks</a> to split an interface into components</li>
<li><a href="https://en.bem.info/methodology/key-concepts/#element">Elements</a> to split complex blocks into parts</li>
<li><a href="https://en.bem.info/methodology/key-concepts/#modifier">Modifiers</a> to express state</li>
<li><a href="https://en.bem.info/methodology/key-concepts/#mix">Mixes</a> to have different blocks or elements on the same DOM node</li>
<li><a href="https://en.bem.info/methodology/redefinition-levels/">Redefinition levels</a> to build a project layer by layer avoiding copy/paste.</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_bem_-work-" id="how-does-_bem_-work-"></a><span class="text">How does <em>BEM</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_bem_-work-">#</a></h2>
<p>The idea behind BEM is similar to Web Components or any other component approach to web development.</p>
<p>Grasping sizeable complex system at once is hard. Developers may split it into simple reusable blocks which are easy to use and maintain. And then they can be used as Lego bricks to build anything.</p>
<p>BEM provides best practices for that as well as ready-made <a href="https://en.bem.info/toolbox/">tools</a> and <a href="https://en.bem.info/platform/libs/bem-components/6.0.0/">block libraries</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_bem_-differ-from-the-other-solutions-" id="how-does-_bem_-differ-from-the-other-solutions-"></a><span class="text">How does <em>BEM</em> differ from the other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_bem_-differ-from-the-other-solutions-">#</a></h2>
<p>First, BEM is just a concept (similar to OOP).</p>
<p>The main power of BEM is that it works for any tech (HTML, CSS, JS, tests, documentation, etc.) and everything can be described with just a few simple concepts.</p>
<p>BEM can be implemented in many different ways on any programming language.</p>
<p>Of course, we have <a href="https://en.bem.info/platform/">our own</a>, and as we love JavaScript, it's JS based.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_bem_-" id="why-did-you-develop-_bem_-"></a><span class="text">Why did you develop <em>BEM</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_bem_-">#</a></h2>
<p>Initially, we faced a few problems:</p>
<ol>
<li>Avoiding copy/paste on different projects with the same design style guide</li>
<li>Keeping large projects maintainable</li>
<li>Having unified structure on different projects to make it familiar to developers</li>
</ol>
<p>So BEM was started to solve these problems but eventually became much more powerful.</p>
<p>For all the steps of BEM evolution see <a href="https://en.bem.info/methodology/history/">The history of BEM</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll continue to popularize BEM methodology and develop examples of implementations in different techs. Here's one of them for React:</p>
<ul>
<li><a href="https://github.com/bem/bem-react-core">bem-react-core</a></li>
<li><a href="https://github.com/bem/bem-react-components">bem-react-components</a></li>
<li><a href="https://github.com/bem/create-bem-react-app">create-bem-react-app</a></li>
</ul>
<p>There's also a <a href="https://skillsmatter.com/skillscasts/10327-bem-the-unknown">video</a> from FullStackConf where we talked about all the features of BEM.</p>
<p>Everything about interaction design in large teams is also important for me. As the department of search interfaces development continues to grow, we want to get benefits from the fact that so many cool people gathered in one place. It's a pity though such insights are hard to open source.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_bem_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_bem_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>BEM</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_bem_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I'm sure that the component approach will continue to evolve. For example, nowadays in React the same ideas we used in our code several years ago are implemented. I hope that other concepts of the BEM methodology will be more widely known because ultimately it will make it easier to do web interfaces and it is beneficial to all of us as users.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Be always open to learning something new. On the other hand, do not reinvent the wheel but improve it — do not hurry to create your solution, take your time to find existing once and improve.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Sergey! Conventions have power!</p>
<p>To learn more about BEM, visit <a href="https://en.bem.info/">bem.info</a>.</p>
SurviveJS - Summary of 2017asurvivejssummaryof20172017-12-31t00:00:00z2017-12-31T00:00:00Z<p>It was quite a year for me. You could say a life-changing one even. I visited at least ten countries in Europe, and most of them were new acquaintances to me. I traveled more in one year than in my entire life before. I made more friends in one year than the years before. I found a new place to live. I began learning a new language, German, and I am starting to get the hang of it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#publishing" id="publishing"></a><span class="text">Publishing</span><a class="header-anchor-select" href="https://survivejs.com/#publishing">#</a></h2>
<p>As if that wasn't enough, I also published a new paper book, <a href="https://www.amazon.com/dp/9526868803">SurviveJS - Webpack</a>, and I am progressing on <a href="https://survivejs.com/maintenance/">a new one about maintenance</a> with the assistance of <a href="http://sapegin.me/">Artem Sapegin</a>. I know I have to revise <a href="https://survivejs.com/react">the entire React book</a> but that has to happen after the maintenance one is out of the oven.</p>
<p>This blog grew by about sixty posts, most of which were interviews. It is merely humbling to see the amount of variety in the community. If you know good topics to cover in interviews, get in touch.</p>
<p>The site received well needed technical tweaks as a part of its technical debt was paid away. There's still some work left, but now it's faster and easier to perform the needed improvements to serve the community better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#public-appearances" id="public-appearances"></a><span class="text">Public Appearances</span><a class="header-anchor-select" href="https://survivejs.com/#public-appearances">#</a></h2>
<p>I gave multiple public appearances across Europe in various meetups and conferences. It all started by coincidence as <a href="https://survivejs.com/blog/euro-tour-2017/">ReactiveConf invited me to tour with them about webpack</a>. It was during this trip when I discovered Vienna and its welcoming community. <a href="https://medium.com/@bebraw/how-a-month-in-vienna-changed-the-way-i-think-about-life-ba87da8c28a9">I spent a life-changing Summer</a> there and it still keeps changing as I am shaping my new life in the city.</p>
<p>One of the more interesting sessions for me personally was the one about how I grew bootstrapped this little business for myself. You can <a href="https://presentations.survivejs.com/bootstrapping-a-personal-lifestyle-business/">find the slides online</a>. It's a topic I would like to revisit at a better time. Personal development itself is something I should study in greater detail.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#business" id="business"></a><span class="text">Business</span><a class="header-anchor-select" href="https://survivejs.com/#business">#</a></h2>
<p>Business-wise the year wasn't as good one as the first one but the advances on the personal side more than made up for that. I think I've finally found a business model that makes sense to me. I realized that I should do a mix of consulting/training and writing. I can use the consulting income to allow me to write while writing allows me to get those consulting clients. What's missing is stronger integration between these two.</p>
<p>While doing my webpack workshops, I realized it's convenient to build them on top of the book. I need to be more intentional about this, though and modularize all the content so that it works for multiple purposes like this. The webpack book and the maintenance book are quite close to this goal. The point is that done right; this would allow me to provide an online course offering to support the model.</p>
<p>My most immediate goal is to get <a href="https://survivejs.com/maintenance/">the maintenance book</a> out there so people find it. Content-wise it's beginning to look good, but I require more feedback to push it further. I have some idea how to improve it, but feedback allows me and Artem to go faster.</p>
<p>Even if the business goes wrong, it's not like I will run out of things to do. There's a fantastic amount of content to develop and refine. This work alone will keep me busy for months assuming there's no other work to be done.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#finnish-code-ambassador-of-2017" id="finnish-code-ambassador-of-2017"></a><span class="text">Finnish Code Ambassador of 2017</span><a class="header-anchor-select" href="https://survivejs.com/#finnish-code-ambassador-of-2017">#</a></h2>
<p>One of the highlights of the year was the fact that <a href="https://survivejs.com/blog/blue-arrow-awards-winner-2017/">I was chosen as the Finnish Code Ambassador of 2017</a>. It was my first major award, and I feel a large part of that belongs to the community that allows me to work this way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#react-finland-24-26-4-2018-helsinki" id="react-finland-24-26-4-2018-helsinki"></a><span class="text">React Finland - 24-26.4.2018, Helsinki</span><a class="header-anchor-select" href="https://survivejs.com/#react-finland-24-26-4-2018-helsinki">#</a></h2>
<p>I began to organize <a href="https://react-finland.fi/">React Finland</a>, the first major React conference in Finland, with a group of friends. It started as a joke but became something quite serious fast. So far organizing it has been a definite challenge, and I've been picking up a lot of new skills while using older ones gained during the past few years. I have a feeling the event will be one of the highlights of the next year for me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>2017 was a memorable year in many ways. It was the most intense and tiring year I've gone through. I went far beyond my comfort zone, but I suppose that's necessary if you want to progress in life. The year opened a lot of new possibilities, and although there are challenges ahead, I have a good feeling about 2018.</p>
controllerim - MobX Inspired State Management for React - Interview with Nir Yosefacontrollerimmobxinspiredstatemanagementforreactinterviewwithniryosef2017-12-27t00:00:00z2017-12-27T00:00:00Z<p>When you are writing applications, eventually you have to decide how to manage state. You can get far with React <code>setState</code> and lift the state in the component hierarchy as you go. Eventually that might become cumbersome and you realize using a state manager might save time and effort. This is the reason why solutions like Redux, MobX, and Cerebral are popular in the community.</p>
<p>To provide another point of view, you will hear this time from Nir Yosef, the author of <a href="https://github.com/Niryo/controllerim">controllerim</a>. It's a solution that builds on top of MobX and has been designed testability in mind.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>My name is Nir, and I am a front-end developer at Wix.com, with over two years of experience in React and MobX, and now gaining some experience with React Native and Android.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_controllerim_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_controllerim_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>controllerim</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_controllerim_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Controllerim is a state management library. It gives you the ability to create logic controllers for you React components, and makes your components automatically reactive to any change in the controllers. All of this is done with almost zero boilerplate.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_controllerim_-work-" id="how-does-_controllerim_-work-"></a><span class="text">How does <em>controllerim</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_controllerim_-work-">#</a></h2>
<p>Controllerim uses MobX Observables behind the scenes, so all the optimizations of MobX in term of performance are also relevant for Controllerim.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_controllerim_-differ-from-other-solutions-like-redux-and-mobx-" id="how-does-_controllerim_-differ-from-other-solutions-like-redux-and-mobx-"></a><span class="text">How does <em>controllerim</em> differ from other solutions (like Redux and MobX)?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_controllerim_-differ-from-other-solutions-like-redux-and-mobx-">#</a></h2>
<p>Controllerim brings back the idea of the well know Controller, the C of MVC, and abandon the singleton Stores concept that Redux (using Flux terminology) gave birth to.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_controllerim_-" id="why-did-you-develop-_controllerim_-"></a><span class="text">Why did you develop <em>controllerim</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_controllerim_-">#</a></h2>
<p>When I first came across React, I almost immediately came across Redux. Its seems like Redux was the only way to do React. Everyone was talking about it, so I decided to give it a try.</p>
<p>After reading some tutorials, I was quite amazed by its complexity. All the different terms (thunk, reducers, selectors, map dispatch to props, etc.) weren’t so clear to me, and it seems like a considerable amount of boilerplate. Something just felt wrong. It seems like a strange way to implement the good old MVC. I think <a href="https://staltz.com/nothing-new-in-react-and-flux-except-one-thing.html">the article by André Staltz says it all</a>.</p>
<p>After some playing around with dummy project, trying to crack this Redux thing, I came across MobX and dumped Redux for good.</p>
<p>MobX was much clearer and straightforward.</p>
<p>I used MobX for over a year with my team, and it was pretty good, but some problems immediately came up:</p>
<ol>
<li>MobX Observables are not vanilla JavaScript objects. They are full of other junk, and we soon started to insert <code>mobx.toJs()</code> conversions all over the place.</li>
<li>MobX doesn’t tell you how to structure your code, so we took the concept of singletons stores from Redux. Very soon we started to wonder how we should pass the stores around, how we should test components? Should we mock all the stores? Who needs to clean the stores when a component enters the screen? We tried to use <code>mobx.inject</code> and <code>mobx.provide</code> but those didn't play well with our tests.</li>
</ol>
<p>So MobX wasn’t perfect after all. At this point, I again started to wonder what happens to the good old MVC, Why things are getting so much more complicated on the web? And then I decided to write down all the pain points of our current architecture:</p>
<ol>
<li>We have to get rid of the <code>toJS</code> thing. I want everything to be a plain JavaScript object.</li>
<li>We have to get rid of the singletons stores, and we must bind the stores life cycle to the components' life cycle.</li>
<li>We must find a way to share data from one store to another, but I wanted to make it strict- it will be only possible to fetch data from stores that are higher in the hierarchy chain of the app, while <code>AppStore</code> will be the root.</li>
<li>Everything <strong>MUST</strong> be testable.</li>
</ol>
<p>After writing it down, I found out that I don’t have a Store anymore. I have a Controller. The good old Controller. I knew I was on the right track. The API was just written itself down. I just needed to figure out the way to make it happen, and it wasn’t so hard. The final result was Controllerim.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you wonder about the name, I tried to name it “Controllers” but it was already taken. I tried React-controllers, but it was also taken. In Hebrew, the ‘im’ suffix is the plural suffix for the word controller, so I just named it Controllerim. :)</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#so-how-does-controllerim-look-" id="so-how-does-controllerim-look-"></a><span class="text">So how does controllerim look?</span><a class="header-anchor-select" href="https://survivejs.com/#so-how-does-controllerim-look-">#</a></h2>
<p>Let's say we have <code>App</code> component as the root of our web app, and that we have <code>Child</code> component deeply nested in the app.</p>
<p>Every data that we will put on the AppController will be available to all other components in the app for as long as the app is alive, so let's create an <code>AppController</code> and put some application data on it:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-class" >class</span> <span class="token class-name" >AppController</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Controller</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >constructor</span><span class="token punctuation brackets-parentheses" >(</span>componentInstance<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-super" >super</span><span class="token punctuation brackets-parentheses" >(</span>componentInstance<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> userName<span class="token punctuation" >:</span> <span class="token string" >"Bob"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >getUserName</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>userName<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >setUserName</span><span class="token punctuation brackets-parentheses" >(</span>name<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>userName <span class="token operator" >=</span> name<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>So a controller is just an ES2015 class that extends <code>Controller</code> and has some state and getters and setters methods.</p>
<p>Now let's connect the controller to the <code>App</code> component:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-class" >class</span> <span class="token class-name" >App</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >componentWillMount</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>controller <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >AppController</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-this" >this</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div<span class="token operator" >></span>
<span class="token operator" ><</span>h1<span class="token operator" >></span>Welcome <span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>controller<span class="token punctuation" >.</span><span class="token function" >getUserName</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >!</span><span class="token operator" ><</span><span class="token operator" >/</span>h1<span class="token operator" >></span>
<span class="token operator" ><</span>compA <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span>compB <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token function" >observer</span><span class="token punctuation brackets-parentheses" >(</span>app<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Easy right? We just need to init the controller in <code>componentWillMount</code>, and we need to make sure that we wrap the component with <code>observer</code>, and that's it! Every change in the controller will be reflected by the view.</p>
<p>Now, let's say that <code>Child</code> is some deeply nested component and that it should allow us to preview and edit the <code>userName</code> when we click on a save button:</p>
<p>Let's start with creating <code>ChildController</code>:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-class" >class</span> <span class="token class-name" >ChildController</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Controller</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >constructor</span><span class="token punctuation brackets-parentheses" >(</span>componentInstance<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-super" >super</span><span class="token punctuation brackets-parentheses" >(</span>componentInstance<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> input<span class="token punctuation" >:</span> <span class="token string" >""</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >getInput</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>input<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >setInput</span><span class="token punctuation brackets-parentheses" >(</span>value<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>input <span class="token operator" >=</span> value<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >saveInput</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >getParentController</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"AppController"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >setUserName</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>input
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>The only new thing here is the call to <code>getParentController()</code>. Controllerim allows you to get any <code>Parent</code> controller, not only a direct parent, so we just save the <code>userName</code>, and because everything is reactive, this change will be reflected in all the views that make use of <code>userName</code> prop from <code>App</code>. Let's finish by creating <code>Child</code>:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-class" >class</span> <span class="token class-name" >Child</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >React<span class="token punctuation" >.</span>Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >componentWillMount</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>controller <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >ChildController</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-this" >this</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div<span class="token operator" >></span>
<span class="token operator" ><</span>input
value<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>controller<span class="token punctuation" >.</span><span class="token function" >getInput</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
onChange<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>controller<span class="token punctuation" >.</span><span class="token function" >setInput</span><span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>controller<span class="token punctuation" >.</span><span class="token function" >saveInput</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Save
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>And that's it! Simple isn't it?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-do-people-think-about-controllerim-" id="what-do-people-think-about-controllerim-"></a><span class="text">What do people think about Controllerim?</span><a class="header-anchor-select" href="https://survivejs.com/#what-do-people-think-about-controllerim-">#</a></h2>
<p>It depends. The ones that are already familiar with MobX are very supportive. The Redux people are more suspicious and begin to recycle arguments they heard about MobX, so I think it would be nice to tackle down the two most frequently recycled arguments once and for all:</p>
<ul>
<li><em>It’s magic, and we don’t like magic</em>: Controllerim is <strong>NOT</strong> magic. Controllerim works just like React native components’ state - when you touch a setter on the controller, Controllerim triggers a force update of your component. So where does MobX enter the picture? Controllerim utilizes MobX to make better updates decisions. Thanks to MobX, Instead of re-rendering on every setter, Controllerim will trigger a re-render only when needed.</li>
<li><em>But what if you need some data to be accessed from everywhere? You have to use singletons</em>: No, you don’t. If you need some data to be available for all the components in your app, then this data is application data, just put it in your AppController (The root controller of your app), and it will be available to all other components for as long as your app lives.</li>
<li><em>It looks just like React’s state, so why not just using it</em>: Controllerim looks like React’s native state by design. The problem with the native state is that it’s hard to share between different components and it’s awkward to test. Controllerim solves those problems, and it even gives you a more comfortable way to manipulate the state: instead of <code>this.setState({some: {nested:{prop: true }}})</code>, you can just write <code>this.state.some.nested.prop = true</code>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Use Controllerim all over the place to make it battle tested. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_controllerim_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_controllerim_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>controllerim</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_controllerim_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think that Controllerim has the potential to be the best Redux alternative out there. In general, I think that React is here to stay, and the next giant step will be in the field of CSS.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>If something doesn't feel right, don’t be fooled by its popularity.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You should interview someone from the CSS community. This field in the web development needs a little push.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Nir! Controllerim looks like a great abstraction over MobX and I hope people find it. The code feels almost amazingly simple.</p>
<p><a href="https://github.com/Niryo/controllerim">Learn more about Controllerim on GitHub</a>.</p>
React Finland - Your Chance to Learn React Up North - Interview with Juho Vepsäläinenareactfinlandyourchancetolearnreactupnorthinterviewwithjuhovepsalainen2017-12-23t00:00:00z2017-12-23T00:00:00Z<p>There are <a href="https://reactjs.org/community/conferences.html">a lot of React conferences</a> these days. React has become one of the most popular web technologies during the past few years so this is understandable.</p>
<p>Given I, <a href="https://twitter.com/bebraw">Juho Vepsäläinen</a>, am one of the organizers of <a href="https://react-finland.fi/">React Finland</a> (24-26.4.2018, Helsinki), I thought it would be a good idea to provide an inside view on the event.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/b26ec3c2769168c2cbc64cc3df9cdd9c?s=200" alt="Juho Vepsäläinen" class="author" width="100" height="100" />
</span>
I maintain this site as my business. I consider myself as a consultant these days although I do development every once in a while. My perspective has changed completely over the past few years as I have had to move into business. It hasn't been easy, but on the plus side, this process has been changing my life in ways I couldn't have imagined before. And I have a feeling it continues to do so.
</p>
<p>These days I consult companies ranging from small startups to big enterprises like eBay or Kapsch. I can provide perspective on how to improve their current workflow, especially on the technical side. I train people as needed. This process, in turn, helps me to develop the book offerings you can find on this site. The writing brings in the consulting clients and so far it has been working fine.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-finland-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-finland-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>React Finland</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-finland-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://react-finland.fi/">React Finland</a> brings together developers from both east and west. It is held late April (24-26.4) 2018 and contains a wide range of topics related to React. It is perhaps the northernmost React conference in the world and a perfect excuse to visit Finland, the most boring country in the world.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-react-finland-offer-" id="what-does-react-finland-offer-"></a><span class="text">What does <em>React Finland</em> offer?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-react-finland-offer-">#</a></h2>
<p>We settled on a three-day program early on. To keep the difficulty manageable, we decided to go with one day for workshops and then two days for presentations in a single track format. The schedule has ample amount of time per presenter and allows flexibility so we can have panels and lightning talks as a part of the days.</p>
<p>We have a wide range of speakers on topics related to React. Most of the topics are technical, and we cover ideas from state management, styling, testing, React Native, React VR, and also upcoming technologies such as Reason. I feel we have a good program that can serve people with various amounts of React experience.</p>
<p>Especially the workshop day should be exciting. The state management workshop by Michel Weststrate is a real masterclass as it takes the whole day. Rest of the sessions are up to four hours, and you will have time to participate in two sessions depending on your interest. We split the workshop profit with the speakers as we know organizing and coming up with the material is hard work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-react-finland-differ-from-other-events-" id="how-does-react-finland-differ-from-other-events-"></a><span class="text">How does <em>React Finland</em> differ from other events?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-react-finland-differ-from-other-events-">#</a></h2>
<p>Given the conference is held in late April, the weather isn't our selling point. It's still Spring and chilly, but that's not the point. Finland is one of those countries most people know but have never visited. The idea is to provide an excellent excuse to visit this boring country in the north so you have stories to tell and can confirm the country indeed exists. You will learn something about sauna, sisu, and salmiakki.</p>
<p>I am happy with the program and the speakers we managed to attract. I feel both the local and international audience will be able to get a lot out of the event. It can become a meeting point between the east and the west thanks to the location that's relatively easy to reach from both directions. Finland has always been between the east and the west given it's a buffer country by its past.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-arrange-react-finland-" id="why-did-you-decide-to-arrange-react-finland-"></a><span class="text">Why did you decide to arrange <em>React Finland</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-arrange-react-finland-">#</a></h2>
<p>It was around August of this year (2017) that we joked about organizing a React conference in Finland at <a href="https://koodiklinikka.fi/">Koodiklinikka</a>, the most popular development Slack of Finland. As it happens, the joke is becoming a reality. It didn't take long for me to realize that a conference would be feasible especially given there hasn't been an international React conference in Finland, and there's definite demand for one.</p>
<p>As a result, we set up an association (harder than it sounds), set up a team, used our contacts to reach out to speakers, and developed website and technology required. It has taken a lot of effort so far, and the fact that this is volunteer based makes it a notch harder. Finding the time and motivation to do even boring tasks is the hardest part, but it's required as, without a certain amount of work, there can be no conference.</p>
<p>React Conference is <a href="https://medium.com/react-finland/from-devs-to-devs-a807f8d41949">a conference from developers to developers</a>. Organizing a conference this way comes with different pressures than a commercial one. There are always particular struggles you have to go through, but so far we've managed well.</p>
<p>For me, this was <a href="https://medium.com/react-finland/conference-dos-and-donts-56973b82229a">a chance to learn from conferences I had been to</a> and try to avoid the mistakes they have made. I feel the most significant thing we can do better is to serve our speakers better by connecting them with the local community and generating business to them. It's only fair to reward them as they are one of the critical parts that make the event work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We recently announced that <a href="https://medium.com/react-finland/ticket-sales-open-27th-of-december-c7a3c0c26068">ticket sales will go live on 27th of December</a>. That is your chance to get an early bird ticket at an affordable price (250€ for two days, 150€ for a half-day workshop). Our goal is to sell close 300 tickets. Most likely a majority of them will be sold to local developers, but we welcome international audience as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Be prepared to learn and change your mind a lot. Keep an eye on the hype. You don't have to be the first always. Focus on delivering value to your business, and the rest will follow.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I know who I'm going to interview next, but I'll keep that as a secret.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>A lot of technical development has gone into the conference. Check out <a href="https://github.com/ReactFinland/site">the site repository</a>, <a href="https://github.com/ReactFinland/content-2018">the content repository</a>, <a href="https://github.com/ReactFinland/graphql-api">the GraphQL API</a>, and <a href="https://github.com/ReactFinland/react-finland-app">the mobile app</a> for example. Organizing this conference taught me how to develop small conference sites effectively, and I found a nice model for doing this. That might be worth a blog post of its own.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I have a feeling React Finland will be a good conference. That said, it's important we'll attract the right people there, and this is where you come in! Going to the event might be one of the better excuses to visit Finland.</p>
<p>You can <a href="https://react-finland.fi/">learn more about the event</a> at its site. <a href="http://eepurl.com/dfbVAX">Subscribe to the mailing list</a> or <a href="https://twitter.com/ReactFinland">follow @ReactFinland</a> on Twitter to stay in the loop.</p>
redux-saga-test-plan - Test Redux Saga with an easy plan - Interview with Jeremy Fairbankareduxsagatestplantestreduxsagawithaneasyplaninterviewwithjeremyfairbank2017-12-20t00:00:00z2017-12-20T00:00:00Z<p>Redux Saga is famous for being easy to test but what if it could be even more comfortable. <em>redux-saga-test-plan</em> by <a href="https://twitter.com/elpapapollo">Jeremy Fairbank</a> was designed precisely for this purpose.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/94bd558238b69c45d3d3e15797ae94f7?s=200" alt="Jeremy Fairbank" class="author" width="100" height="100" />
</span>
I'm a software engineer and consultant with <a href="https://testdouble.com/">Test Double</a>. We believe that software is broken, and we're here to fix it. Our mission is to improve how the world builds software.
</p>
<p>I've been doing front-end development for almost ten years now and enjoy the paradigms that React and Redux helped introduce to the front-end world. I've created a few open source projects that work well with the React and Redux ecosystem such as <a href="https://github.com/jfairbank/revalidate">revalidate</a>, <a href="https://github.com/jfairbank/redux-saga-router">redux-saga-router</a>, and, the topic of this interview, <a href="https://github.com/jfairbank/redux-saga-test-plan"><em>redux-saga-test-plan</em></a>.</p>
<p>I'm a huge fan of functional programming and Elm. In fact, I'm currently writing a book on Elm with <a href="https://pragprog.com/">The Pragmatic Programmers</a> called <em>Programming Elm: Build Safe and Maintainable Front-End Applications</em>. The book is over halfway complete and should be available sometime in Spring 2018.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_redux-saga-test-plan_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_redux-saga-test-plan_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>redux-saga-test-plan</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_redux-saga-test-plan_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://redux-saga-test-plan.jeremyfairbank.com/"><em>redux-saga-test-plan</em></a> is a library for easily testing <a href="https://redux-saga.js.org/">redux-saga</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you're unfamiliar with redux-saga, check out <a href="https://survivejs.com/blog/redux-saga-interview/">the redux-saga interview</a> with creator Yassine Elouafi.</blockquote><p><em>redux-saga-test-plan</em> removes the headache of manually testing saga generator functions that couple your tests to their implementations. It offers a declarative, chainable API for testing that your saga yields certain effects without worrying about other effects or the order effects were yielded. It also runs your saga with redux-saga's runtime so that you can write integration tests, or you can use <em>redux-saga-test-plan's</em> built-in effect mocking to write unit tests too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_redux-saga-test-plan_-work-" id="how-does-_redux-saga-test-plan_-work-"></a><span class="text">How does <em>redux-saga-test-plan</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_redux-saga-test-plan_-work-">#</a></h2>
<p>Let's look at some example sagas to see how <em>redux-saga-test-plan</em> makes it easy to test them.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#simple-api-saga" id="simple-api-saga"></a><span class="text">Simple API Saga</span><a class="header-anchor-select" href="https://survivejs.com/#simple-api-saga">#</a></h3>
<p>Given this simple saga for fetching an array of users:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> call<span class="token punctuation" >,</span> put <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga/effects"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >fetchUsersSaga</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can test it with <em>redux-saga-test-plan</em> like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> expectSaga <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga-test-plan"</span><span class="token punctuation" >;</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fetches users"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Jeremy"</span><span class="token punctuation" >,</span> <span class="token string" >"Tucker"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> api <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
getUsers<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> users<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >expectSaga</span><span class="token punctuation brackets-parentheses" >(</span>fetchUsersSaga<span class="token punctuation" >,</span> api<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >run</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>The <code>expectSaga</code> function accepts a saga as an argument as well as any additional arguments for the saga itself. Here, we pass in the <code>fetchUsersSaga</code> and inject a mock <code>api</code> to fake the API response.</p>
<p><code>expectSaga</code> returns a chainable API with lots of useful methods. The <code>put</code> method is an assertion that the saga will eventually yield a <code>put</code> effect with the given <code>FETCH_USERS_SUCCESS</code> action.</p>
<p>The <code>run</code> method starts the saga. <em>redux-saga-test-plan</em> uses redux-saga's <code>runSaga</code> function to run the saga like it would be run in your application. <code>expectSaga</code> tracks any effects your saga yields, so you can assert them like we do with <code>put</code> here.</p>
<p>Sagas are inherently asynchronous, so <em>redux-saga-test-plan</em> returns a promise from the <code>run</code> method. You need that promise to know when the test is complete. In this example, we're using Jest so that we can return the promise directly to it.</p>
<p>Because <em>redux-saga-test-plan</em> runs asynchronously, it times out your saga after a set amount of time. You can <a href="http://redux-saga-test-plan.jeremyfairbank.com/integration-testing/timeout.html#adjusting-timeout">configure the timeout length</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#built-in-mocking" id="built-in-mocking"></a><span class="text">Built-in Mocking</span><a class="header-anchor-select" href="https://survivejs.com/#built-in-mocking">#</a></h3>
<p>If you don't inject dependencies like the <code>api</code> object, you can use <code>expectSaga</code>'s built-in mocking mechanism called <em>providers</em>. Let's say you import <code>api</code> from another file and use it like this instead:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> call<span class="token punctuation" >,</span> put <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga/effects"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> api <span class="token keyword keyword-from" >from</span> <span class="token string" >"./api"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >fetchUsersSaga</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can mock it with the <code>provide</code> method like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> expectSaga <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga-test-plan"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> api <span class="token keyword keyword-from" >from</span> <span class="token string" >"./api"</span><span class="token punctuation" >;</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fetches users"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Jeremy"</span><span class="token punctuation" >,</span> <span class="token string" >"Tucker"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >expectSaga</span><span class="token punctuation brackets-parentheses" >(</span>fetchUsersSaga<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >provide</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >[</span><span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> users<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >run</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>The <code>provide</code> method takes an array of matcher-value pairs. Each matcher-value pair is an array with an effect to match and a fake value to return. <em>redux-saga-test-plan</em> will intercept effects that match and return the fake value instead of letting redux-saga handle the effect. In this example, we match any <code>call</code> effects to <code>api.getUsers</code> and return a fake array of users instead.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#dispatching-effects-and-forked-sagas" id="dispatching-effects-and-forked-sagas"></a><span class="text">Dispatching Effects and Forked Sagas</span><a class="header-anchor-select" href="https://survivejs.com/#dispatching-effects-and-forked-sagas">#</a></h3>
<p><em>redux-saga-test-plan</em> can handle more complex saga relationships like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> call<span class="token punctuation" >,</span> put<span class="token punctuation" >,</span> takeLatest <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga/effects"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> api <span class="token keyword keyword-from" >from</span> <span class="token string" >"./api"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >fetchUserSaga</span><span class="token punctuation brackets-parentheses" >(</span>action<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> id <span class="token operator" >=</span> action<span class="token punctuation" >.</span>payload<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> user <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUser<span class="token punctuation" >,</span> id<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USER_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> user <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >watchFetchUserSaga</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >takeLatest</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"FETCH_USER_REQUEST"</span><span class="token punctuation" >,</span> fetchUserSaga<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>In this example, <code>watchFetchUserSaga</code> uses <code>takeLatest</code> to handle the latest <code>FETCH_USER_REQUEST</code> action. If something dispatches <code>FETCH_USER_REQUEST</code>, then redux-saga forks <code>fetchUserSaga</code> to handle the action and fetch a user by id from the action's <code>payload</code>. You can test these sagas with <em>redux-saga-test-plan</em> like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> expectSaga <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga-test-plan"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> api <span class="token keyword keyword-from" >from</span> <span class="token string" >"./api"</span><span class="token punctuation" >;</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fetches a user"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> id <span class="token operator" >=</span> <span class="token number" >42</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> user <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> id<span class="token punctuation" >,</span> name<span class="token punctuation" >:</span> <span class="token string" >"Jeremy"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >expectSaga</span><span class="token punctuation brackets-parentheses" >(</span>watchFetchUserSaga<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >provide</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >[</span><span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUser<span class="token punctuation" >,</span> id<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> user<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USER_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> user <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >dispatch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USER_REQUEST"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> id <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >silentRun</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p><em>redux-saga-test-plan</em> captures effects from forked sagas too. Notice that we call <code>expectSaga</code> with <code>watchFetchUserSaga</code> but still test the behavior of <code>fetchUserSaga</code> with the <code>put</code> assertion.</p>
<p>We use the <code>dispatch</code> method to dispatch a <code>FETCH_USER_REQUEST</code> action with a <code>payload</code> id of <code>42</code> to <code>watchFetchUserSaga</code>. redux-saga then forks and runs <code>fetchUserSaga</code>.</p>
<p><code>takeLatest</code> runs in a loop so that <em>redux-saga-test-plan</em> will time out the saga with a warning message. You can safely silence the warning with the alternative <code>silentRun</code> method since we expect a timeout here.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#error-handling" id="error-handling"></a><span class="text">Error Handling</span><a class="header-anchor-select" href="https://survivejs.com/#error-handling">#</a></h3>
<p>You can use providers to test your saga's error handling too. Take this new version of <code>fetchUsersSaga</code> that uses a <code>try-catch</code> block:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >fetchUsersSaga</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-try" >try</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-catch" >catch</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token class-name" >e</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_FAIL"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> e <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can import <code>throwError</code> from <code>redux-saga-test-plan/providers</code> to simulate an error in the <code>provide</code> method:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> expectSaga <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga-test-plan"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> throwError <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga-test-plan/providers"</span><span class="token punctuation" >;</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"handles errors"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> error <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Error</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Whoops"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >expectSaga</span><span class="token punctuation brackets-parentheses" >(</span>fetchUsersSaga<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >provide</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >[</span><span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> <span class="token function" >throwError</span><span class="token punctuation brackets-parentheses" >(</span>error<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_FAIL"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> error <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >run</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#redux-state" id="redux-state"></a><span class="text">Redux State</span><a class="header-anchor-select" href="https://survivejs.com/#redux-state">#</a></h3>
<p>You can also test your Redux reducers alongside your sagas. Take this reducer for updating the array of users in the store state:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> INITIAL_STATE <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> users<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >reducer</span><span class="token punctuation brackets-parentheses" >(</span>state <span class="token operator" >=</span> INITIAL_STATE<span class="token punctuation" >,</span> action<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>action<span class="token punctuation" >.</span>type<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span> <span class="token operator" >...</span>state<span class="token punctuation" >,</span> users<span class="token punctuation" >:</span> action<span class="token punctuation" >.</span>payload <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-default" >default</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> state<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can use the <code>withReducer</code> method to hook up your reducer and then assert the final state with <code>hasFinalState</code>:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> expectSaga <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-saga-test-plan"</span><span class="token punctuation" >;</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fetches the users into the store state"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Jeremy"</span><span class="token punctuation" >,</span> <span class="token string" >"Tucker"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >expectSaga</span><span class="token punctuation brackets-parentheses" >(</span>fetchUsersSaga<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >withReducer</span><span class="token punctuation brackets-parentheses" >(</span>reducer<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >provide</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >[</span><span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> users<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >hasFinalState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >run</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#available-effect-assertions" id="available-effect-assertions"></a><span class="text">Available Effect Assertions</span><a class="header-anchor-select" href="https://survivejs.com/#available-effect-assertions">#</a></h3>
<p>Here are the other effect assertions available for testing.</p>
<ul>
<li><code>take(pattern)</code></li>
<li><code>take.maybe(pattern)</code></li>
<li><code>put(action)</code></li>
<li><code>put.resolve(action)</code></li>
<li><code>call(fn, ...args)</code></li>
<li><code>call([context, fn], ...args)</code></li>
<li><code>apply(context, fn, args)</code></li>
<li><code>cps(fn, ...args)</code></li>
<li><code>cps([context, fn], ...args)</code></li>
<li><code>fork(fn, ...args)</code></li>
<li><code>fork([context, fn], ...args)</code></li>
<li><code>spawn(fn, ...args)</code></li>
<li><code>spawn([context, fn], ...args)</code></li>
<li><code>join(task)</code></li>
<li><code>select(selector, ...args)</code></li>
<li><code>actionChannel(pattern, [buffer])</code></li>
<li><code>race(effects)</code></li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#other-features" id="other-features"></a><span class="text">Other Features</span><a class="header-anchor-select" href="https://survivejs.com/#other-features">#</a></h3>
<ul>
<li><a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/snapshot-testing.html">Snapshot testing</a></li>
<li><a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/partial-matching.html">Partial assertions</a></li>
<li><a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/partial-matching.html">Negated assertions</a></li>
<li><a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/return-value.html">Assert a saga's return value</a></li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_redux-saga-test-plan_-differ-from-other-solutions-" id="how-does-_redux-saga-test-plan_-differ-from-other-solutions-"></a><span class="text">How does <em>redux-saga-test-plan</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_redux-saga-test-plan_-differ-from-other-solutions-">#</a></h2>
<ul>
<li>Only test the effects you're interested in with <code>expectSaga</code>. You don't have to manually iterate through your saga's yielded effects, which decouples your test from the implementation.</li>
<li>A declarative, chainable API with less setup for testing sagas. Other options that I've seen use imperative APIs with more setup steps and only let you test certain effects.</li>
<li>One of the few saga testing libraries that lets you also test your Redux reducers.</li>
<li>Test forked sagas many layers deep.</li>
<li>Built-in mocking with <a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/mocking/static-providers.html">static</a> and <a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/mocking/dynamic-providers.html">dynamic</a> providers.</li>
<li><a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/partial-matching.html">Negated assertions</a>. You can test that your saga did <strong>not</strong> yield a particular effect.</li>
<li><a href="https://redux-saga-test-plan.jeremyfairbank.com/integration-testing/partial-matching.html">Partial assertions</a>. For example, you can test that your saga <code>put</code> a particular <code>type</code> of action without worrying about the action payload.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_redux-saga-test-plan_-" id="why-did-you-develop-_redux-saga-test-plan_-"></a><span class="text">Why did you develop <em>redux-saga-test-plan</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_redux-saga-test-plan_-">#</a></h2>
<p>I grew tired of manually testing sagas by iterating through yielded effects like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >fetchUsersSaga</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"fetches users"</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> users <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"Jeremy"</span><span class="token punctuation" >,</span> <span class="token string" >"Tucker"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> iter <span class="token operator" >=</span> <span class="token function" >fetchUsersSaga</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>iter<span class="token punctuation" >.</span><span class="token function" >next</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>value<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >toEqual</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>api<span class="token punctuation" >.</span>getUsers<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>iter<span class="token punctuation" >.</span><span class="token function" >next</span><span class="token punctuation brackets-parentheses" >(</span>users<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>value<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >toEqual</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >"FETCH_USERS_SUCCESS"</span><span class="token punctuation" >,</span> payload<span class="token punctuation" >:</span> users <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>These tests took long to write and coupled the test to the implementation. One small change in the order of effects would break a test even if the change didn't change the saga's overall behavior. Ironically, I created a <a href="https://redux-saga-test-plan.jeremyfairbank.com/unit-testing/">testSaga API</a> that took some of that boilerplate away but still coupled tests to their implementation.</p>
<p>I finally set out to create a more user-friendly API that removed most of the boilerplate and let you focus on testing the behavior you were most interested, and this is how <code>expectSaga</code> was born.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Writing my Elm book is currently consuming a lot of my time, so I've had to take a short break from <em>redux-saga-test-plan</em>. However, the next big plan is to support redux-saga v1, which adds support for effect middlewares. Effect middlewares let you intercept effects to return a mock value. I hope to simplify <code>expectSaga</code>'s implementation of providers with effect middlewares.</p>
<p>There's a nice backlog of issues for other cool features like new helpful assertions and integrating with a full Redux store too.</p>
<p>Contributors are welcome!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_redux-saga-test-plan_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_redux-saga-test-plan_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>redux-saga-test-plan</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_redux-saga-test-plan_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I'm not entirely sure because it depends on the life of redux-saga. <a href="https://github.com/Andarist">Mateusz Burzyński</a> and all the contributors have been doing a great job maintaining it. It's a great sign that they're working toward v1. But front-end development can move and change so fast. For example, we've seen a massive rise in the popularity of <a href="https://github.com/ReactiveX/rxjs">RxJS</a> and <a href="https://github.com/redux-observable/redux-observable">redux-observable</a>.</p>
<p>As long as there is broad support for redux-saga in front-end applications, I think <em>redux-saga-test-plan</em> will stick around and fill a much-needed testing niche. Testing saga generators is hard, so <em>redux-saga-test-plan</em> will hopefully continue to make it easy. That being said, I don't always get to use redux-saga with my client projects, so I could use the support of other contributors to make <em>redux-saga-test-plan</em> the best it can be for testing.</p>
<p>As far as trends, I think front-end development is heading toward better maintainability and safety with static typing. Elm, TypeScript, and Flow are making it easier to build robust front-end applications. Static types can catch so many simple bugs and mistakes to help you refactor code more confidently.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>You don't need to keep up with every new library and framework coming out. Focus on a stack that you like and build fantastic software. Don't let others make you feel like you're not a real developer because you're not up-to-date with the latest JavaScript framework. What's most important is understanding the language you're working with and how to stick to good software engineering practices. Find a mentor that's empathetic and eager to help you.</p>
<p>Also, ask to speak at a meetup or submit to a conference. You'd be surprised how many people sometimes aren't experts on the topics they share (I've been there for sure). You can share the pain points you experienced learning a technology and offer your unique perspective on what you love about it. Then, you can inspire and empower other newcomers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I might be a little biased because I work for Test Double, but you should interview <a href="https://twitter.com/searls">Justin Searls</a>. He speaks a lot about testing, and his insight is something the JavaScript world would greatly benefit from. He maintains our awesome test double library <a href="https://github.com/testdouble/testdouble.js">testdouble.js</a>, which has transformed how I think about mocking in tests.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jeremy! <em>redux-saga-test-plan</em> seems to complement <em>redux-saga</em> well.</p>
<p>You can learn more from <a href="http://redux-saga-test-plan.jeremyfairbank.com/">the redux-saga-test-plan site</a> and <a href="https://github.com/jfairbank/redux-saga-test-plan">redux-saga-test-plan GitHub page</a>.</p>
Redux Form - The best way to manage your form state in Redux - Interview with Erik Rasmussenareduxformthebestwaytomanageyourformstateinreduxinterviewwitherikrasmussen2017-12-11t00:00:00z2017-12-11T00:00:00Z<p>Forms are a frequent topic in web development as we saw in <a href="https://survivejs.com/blog/a-plus-interview">the earlier interview about a-plus-forms</a>. This time around, I'm interviewing <a href="https://twitter.com/erikras">Erik Rasmussen</a> about a popular option, Redux Form.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Erik has published a library agnostic successor to Redux Form. See <a href="https://github.com/final-form/final-form">Final Form</a> to learn more.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/7e86f7e41168df55b65e30cdda423e10?s=200" alt="Erik Rasmussen" class="author" width="100" height="100" />
</span>
I'm originally from North Carolina, but I hadn't lived in the US since late 2001, when I moved to Birmingham, England. I was there for four and a half years, and now I live in northern Spain with my Spanish wife and two bilingual kids. I'm a transatlantic telecommuter, working from home in Spain for my employer in the US.
</p>
<p>I began using React immediately after it was open sourced in 2013, building side projects and ran into all of the state management problems that Flux was introduced to solve. I was active on the Reactiflux Slack channel as Redux was taking shape before its announcement in 2015, back when what is now called <em>reducers</em> were still called <em>stores</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_redux-form_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_redux-form_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Redux Form</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_redux-form_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Web forms have a <em>lot</em> of state involved with them. It might seem like all you have to keep track of is the value of each field, but there is <em>so</em> much more. For example:</p>
<ul>
<li>Which field currently has focus?</li>
<li>Are all the fields valid?</li>
<li>Which fields have errors?</li>
<li>Are we currently submitting the form?</li>
<li>Are we currently doing some sort of async validation as the user is filling out the form?</li>
<li>Which fields has the user <em>visited</em> (focused on)?</li>
<li>Which fields has the user <em>touched</em> (focused on and then left)?</li>
</ul>
<p><em>Redux Form</em> manages <em>all</em> of that state for you, providing each field with what it needs to render: its <code>value</code> and <code>onChange</code>, <code>onBlur</code>, <code>onFocus</code>, etc. props.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_redux-form_-work-" id="how-does-_redux-form_-work-"></a><span class="text">How does <em>Redux Form</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_redux-form_-work-">#</a></h2>
<p>React prefers unidirectional data flow where a container component holds state and passes down the state and callbacks for its children to modify the state. Redux fits this model like a glove, keeping state globally and allowing mutations through dispatched actions. <em>Redux Form</em> dispatches actions for every event in your form, and updates the global state accordingly, rerendering <em>only</em> the components that need to be rerendered.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_redux-form_-differ-from-other-solutions-" id="how-does-_redux-form_-differ-from-other-solutions-"></a><span class="text">How does <em>Redux Form</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_redux-form_-differ-from-other-solutions-">#</a></h2>
<p>The most significant difference is that it uses Redux. Some other solutions also use Redux, but many do not. Like everything in engineering, this has its pros and cons. The main two benefits are: you can watch all of your state mutations go by in Redux Dev Tools and that you can listen to Redux Form actions in other reducers of your application, e.g., potentially updating some canonical local record when your form submission has succeeded.</p>
<p>The primary drawback is that you might not be using Redux at all in your application, but to use <em>Redux Form</em> as your form solution, you will be forced to use it. However, Redux is so prevalent in the React community, the chance that you are already using it to manage state is pretty good.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_redux-form_-" id="why-did-you-develop-_redux-form_-"></a><span class="text">Why did you develop <em>Redux Form</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_redux-form_-">#</a></h2>
<p>Well, I was building an app that had several long forms. I asked Dan Abramov in the Reactiflux Slack channel, "Redux isn't fast enough so that I could dispatch an action on <em>every single keypress</em> in a form, right?" He responded something along the lines of, "I don't see why not? Try it!" And <em>Redux Form</em> was born.</p>
<p>I had published a few tiny niche libraries before but had never been The Maintainer of an open source project. The community was very supportive, and I worked hard with them to sculpt <em>Redux Form</em> into what it is today. It has been a lot of work, but also fun and rewarding.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Taking into account all that I have learned in maintaining <em>Redux Form</em>, I have recently created and released what I think might be the next generation of form state management. The solution does not depend on Redux or even React. It is a library that could potentially also be used by our brethren in the Angular, Ember, Preact, and Vue communities.</p>
<p>The library is called <a href="https://github.com/erikras/final-form#-final-form">🏁 Final Form</a>, and it's based on the <a href="https://en.wikipedia.org/wiki/Observer_pattern">Observer pattern</a>, where different form elements on the page <em>subscribe</em> to different parts of the form state, and only update themselves when they need to. I would encourage your readers to check it out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_redux-form_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_redux-form_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Redux Form</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_redux-form_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The npm download charts for React, Redux, and <em>Redux Form</em> look very similar: <strong>GROWTH</strong>. 📈</p>
<p>According to the npm download stats for October 2017, 46% of projects using React are using <em>react-redux</em>, and 24% of those are using Redux Form. That's <strong>11.2% of React projects that are using <em>Redux Form</em></strong>. There are <a href="https://www.npmjs.com/browse/depended/redux-form"><strong><em>1.6 million</em></strong> projects</a> on npm that depend on <em>Redux Form</em>. <em>Redux Form</em> is here to stay.</p>
<p>As for web development in general, I think the declarative "UI as a function of State" paradigm that React has popularized is here to stay. From what I can tell, most of the frontline battles being fought today are attempting to drive a stake into the heart of CSS once and for all. Web Components and WebAssembly seem like promising future tech but aren't worth learning yet unless you lust for the bleeding edge.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>As the author of <a href="https://github.com/erikras/react-redux-universal-hot-example">react-redux-universal-hot-example</a>, one of the more popular early React, Redux, Webpack, Hot Reloading, Server-side Rendering boilerplate repositories, I have a pretty solid understanding of the immense learning curve just to get a React app off the ground.</p>
<p>Luckily, it's not 2015 anymore, and now we have projects like <a href="https://github.com/facebookincubator/create-react-app">Create React App</a> and <a href="https://github.com/zeit/next.js">Next.js</a> that make it orders of magnitude easier to get started with React.</p>
<p>I'm also old enough to remember the barbaric days of programming without StackOverflow, but now it's <em>exceedingly</em> rare that programmers, even expert ones, run into a problem that someone has not already asked about, and gotten an answer for, on StackOverflow.</p>
<p>You just have to build something and ask questions when you run into problems, which you will. But the thrill of solving them and getting your thing to work, even if it's just a silly spinning "Hello World" text, is the fire that keeps us all going.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think the person I'd most like to see gain exposure from a site like this is <a href="https://twitter.com/coderberry">Eric Berry</a>, the creator of <a href="https://codesponsor.io">Code Sponsor</a>, he's valiantly attempting to do the impossible: make open source sustainable and avoid developer burnout.</p>
<p>How much money would companies have to invest to update their code base if the sole developer of a popular OSS library were to quit and walk away? Thousands upon thousands of dollars worldwide.</p>
<p>And how much are they paying to use these libraries? Zero.</p>
<p>Donate buttons aren't worth the pixels they're rendered with. There are <em>some</em> efforts, like OpenCollective, which are beginning to address this problem, but it's still a huge problem.</p>
<p>It never occurred to me that having such a popular library could be monetized through tasteful, subtle ads on the documentation pages.</p>
<p>How many hours a day do we coders spend looking at documentation pages? And how valuable are our eyes to get ads in front of?</p>
<p>If you have a product that plugs into the production stack at any place or even a product that you want to advertise to people with healthy salaries, library documentation is a great place to advertise. Anyone with an open source library with even a few dozen monthly downloads should look into CodeSponsor. <code>$3/month > $0/month</code>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Erik! If you are using Redux, it's hard to avoid using Redux Form. It's so handy.</p>
<p>To learn more, <a href="https://redux-form.com/">check out Redux Form site</a> and <a href="https://github.com/erikras/redux-form">Redux Form GitHub page</a>.</p>
Redux Zero - Single Store, No Reducers - Interview with Matheus Limaareduxzerosinglestorenoreducersinterviewwithmatheuslima2017-12-04t00:00:00z2017-12-04T00:00:00Z<p>Although using Redux is straight-forward once you understand the approach and its nuances, after a while it gets repetitive. It's easy to end up with a lot of "boilerplate" code that wires all the logic together. For this reason, multiple solutions addressing the issue have appeared.</p>
<p>In this interview, we'll learn about <a href="https://github.com/concretesolutions/redux-zero">Redux Zero</a> by <a href="https://twitter.com/matheusml">Matheus Lima</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/kea-interview/">See also the Kea interview</a> for another approach and <a href="https://survivejs.com/blog/redux-interview">the original Redux interview</a> to learn more about the approach from its creator.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><figure><img src="/28e8097c124eb53f98ca4bbae484ce4a.jpg" alt="Matheus Lima" class="author" width="100" height="100" /><figcaption>Matheus Lima</figcaption></figure></p>
<p>I am Matheus Lima, a JavaScript lead developer at Concrete Solutions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_redux-zero_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_redux-zero_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Redux Zero</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_redux-zero_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Redux Zero is a library which offers a simple way to handle state in modern applications. It's lightweight, easy to learn and already works with React, React Native, Preact and Svelte. We have plans to add Angular and Vue.js bindings as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_redux-zero_-work-" id="how-does-_redux-zero_-work-"></a><span class="text">How does <em>Redux Zero</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_redux-zero_-work-">#</a></h2>
<p>It's simple.</p>
<p>First, create a store. The application state will live here:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> createStore <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-zero"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> initialState <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> count<span class="token punctuation" >:</span> <span class="token number" >1</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> store <span class="token operator" >=</span> <span class="token function" >createStore</span><span class="token punctuation brackets-parentheses" >(</span>initialState<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> store<span class="token punctuation" >;</span>
</code></pre>
<p>Then, create some actions to change the state of your store:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >actions</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>store<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
increment<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> count<span class="token punctuation" >:</span> state<span class="token punctuation" >.</span>count <span class="token operator" >+</span> <span class="token number" >1</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
decrement<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> count<span class="token punctuation" >:</span> state<span class="token punctuation" >.</span>count <span class="token operator" >-</span> <span class="token number" >1</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Since the actions are bound to the store, they are just pure functions.</p>
<p>Now create your component. With <em>Redux Zero</em> your component can focus 100% on the UI and just call the actions to update the state:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> connect <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-zero/react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> actions <span class="token keyword keyword-from" >from</span> <span class="token string" >"./actions"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >mapToProps</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> count <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> count <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token function" >connect</span><span class="token punctuation brackets-parentheses" >(</span>
mapToProps<span class="token punctuation" >,</span>
actions
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> count<span class="token punctuation" >,</span> increment<span class="token punctuation" >,</span> decrement <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h1</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span>count<span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h1</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>decrement<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>decrement<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>increment<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>increment<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Last but not least, plug the whole thing in your index file:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> render <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react-dom"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Provider <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"redux-zero/react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> store <span class="token keyword keyword-from" >from</span> <span class="token string" >"./store"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> Counter <span class="token keyword keyword-from" >from</span> <span class="token string" >"./Counter"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >App</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Provider</span> <span class="token attr-name" >store</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>store<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Counter</span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Provider</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>App</span> <span class="token punctuation" >/></span></span><span class="token punctuation" >,</span> document<span class="token punctuation" >.</span><span class="token function" >getElementById</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"root"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_redux-zero_-differ-from-other-solutions-" id="how-does-_redux-zero_-differ-from-other-solutions-"></a><span class="text">How does <em>Redux Zero</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_redux-zero_-differ-from-other-solutions-">#</a></h2>
<p><em>Redux</em> is great, but in some cases, it's way too much. Maybe you don’t want to add all of that boilerplate to your project. Or perhaps the learning curve is too steep, and you just want something simpler to work with.</p>
<p><em>Redux Zero</em>, on the other hand, is very simple. You don't have to learn about dispatchers and reducers (that's why the name is <em>Redux Zero</em> - because there are zero reducers).</p>
<p>With <em>Redux Zero</em> you just have a store and some actions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_redux-zero_-" id="why-did-you-develop-_redux-zero_-"></a><span class="text">Why did you develop <em>Redux Zero</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_redux-zero_-">#</a></h2>
<p>One of our developers here at <a href="https://concrete.com.br/">Concrete</a>, <a href="https://twitter.com/miguel_albernaz">Miguel Albernaz</a>, was using <a href="https://gist.github.com/developit/55c48d294abab13a146eac236bae3219">this gist</a> as a state management solution instead of Redux. The project was going so well that I decided to extract the code, modify it a little bit and open source it to give back to the community.</p>
<p>What I did not expect was this huge success in less than a month.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Right now we have three things in mind:</p>
<ul>
<li>Improve the documentation</li>
<li>Add a middleware</li>
<li>Add Angular and Vue.js bindings (<a href="https://github.com/concretesolutions/redux-zero/issues">we need your help</a>).</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_redux-zero_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_redux-zero_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Redux Zero</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_redux-zero_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>This is a really hard question. Everything is moving so fast in web development that's hard to make predictions. That said, I think that web components and state management tools are here to stay.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Study the basics. React, and Angular are probably going to die, but JavaScript and CSS won't.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/_developit">Jason Miller</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Try to be kind to open source maintainers. Most of them are not getting paid to develop the tools that you're using for free.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Matheus! Redux Zero is one of the lightest state management solutions I've seen so far.</p>
<p><a href="https://github.com/concretesolutions/redux-zero">Check out Redux Zero in GitHub</a> or <a href="https://medium.com/@matheusml/introducing-redux-zero-bea42214c7ee">learn more in an introduction to Redux Zero</a>.</p>
Flow Runtime - A runtime type system for JavaScript with full Flow compatibility - Interview with Charles Pickaflowruntimearuntimetypesystemforjavascriptwithfullflowcompatibilityinterviewwithcharlespick2017-11-26t00:00:00z2017-11-26T00:00:00Z<p>As <a href="https://survivejs.com/maintenance/code-quality/typing/">discussed in the maintenance book</a>, typing your code can be valuable in many ways. In part, it's about communication. Having the type information available makes it easier to develop tools that make it easier to manipulate code (think refactoring, intelligent parameters).</p>
<p>To understand the topic more in-depth, this time around I'm interviewing <a href="https://twitter.com/codemixers">Charles Pick</a>, the author of <a href="https://github.com/codemix/flow-runtime">Flow Runtime</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/7f6a5e0c29577f724ad28bea4c577139?s=200" alt="Charles Pick" class="author" width="100" height="100" />
</span>
I'm Charles, and I run a JavaScript consultancy called <a href="https://codemix.com">codemix</a>, I live in the countryside with my wife and kids near York, UK.
</p>
<p>My first exposure to programming was with BASIC on the BBC Micro at school when I was seven, ever since then I've been hooked. I worked as a nightclub DJ before becoming a full-time web developer about twelve years ago.</p>
<p>Since 2013 I've been entirely focused on JavaScript, and I love it. I'm interested in how to make JavaScript faster, safer, less error-prone and more comfortable to refactor.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-flow-runtime-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-flow-runtime-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Flow Runtime</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-flow-runtime-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It's a type system for JavaScript that works while the application is running, not at compile time like TypeScript or Flow do. The core idea is that types become first-class values that you can reference and pass around like any other.</p>
<p>Flow Runtime can represent the type of any possible JavaScript value; numbers, objects, classes, functions, etc. and verifies that the input your program receives in reality matches what you were expecting when you wrote it.</p>
<p>The goal is to be 100% compatible with Flow - Flow catches errors at compile time, Flow Runtime catches errors when your code interacts with untyped code or user input.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-flow-runtime-work-" id="how-does-flow-runtime-work-"></a><span class="text">How does <em>Flow Runtime</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-flow-runtime-work-">#</a></h2>
<p>There are two main packages:</p>
<p><strong>flow-runtime</strong></p>
<p><a href="https://www.npmjs.com/package/flow-runtime">flow-runtime</a> represents types and does the actual verification. It provides a simple, composable API for defining types and matching values against them:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> t <span class="token keyword keyword-from" >from</span> <span class="token string" >"flow-runtime"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> stringOrNumber <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token function" >union</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span><span class="token function" >string</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> t<span class="token punctuation" >.</span><span class="token function" >number</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
stringOrNumber<span class="token punctuation" >.</span><span class="token function" >assert</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >123</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
stringOrNumber<span class="token punctuation" >.</span><span class="token function" >assert</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"this is fine"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
stringOrNumber<span class="token punctuation" >.</span><span class="token function" >assert</span><span class="token punctuation brackets-parentheses" >(</span><span class="token boolean" >false</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// throws an error</span>
</code></pre>
<p>You can use this standalone and as well as type checking it enables some pretty cool stuff, like <a href="https://codemix.github.io/flow-runtime/#/docs/pattern-matching">pattern matching</a>.</p>
<p><strong>babel-plugin-flow-runtime</strong></p>
<p><a href="https://www.npmjs.com/package/babel-plugin-flow-runtime">babel-plugin-flow-runtime</a> takes code written with Flow annotations and turns those annotations into flow-runtime API calls.</p>
<p>So when you write code like this:</p>
<pre><code class="lang-javascript">type Thing <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
id<span class="token punctuation" >:</span> number<span class="token punctuation" >;</span>
name<span class="token punctuation" >:</span> string<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> widget<span class="token punctuation" >:</span> Thing <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
id<span class="token punctuation" >:</span> <span class="token number" >123</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >"Widget"</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>the plugin produces this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> t <span class="token keyword keyword-from" >from</span> <span class="token string" >"flow-runtime"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> Thing <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token function" >type</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"Thing"</span><span class="token punctuation" >,</span> t<span class="token punctuation" >.</span><span class="token function" >object</span><span class="token punctuation brackets-parentheses" >(</span>
t<span class="token punctuation" >.</span><span class="token function" >property</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"id"</span><span class="token punctuation" >,</span> t<span class="token punctuation" >.</span><span class="token function" >number</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
t<span class="token punctuation" >.</span><span class="token function" >property</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"name"</span><span class="token punctuation" >,</span> t<span class="token punctuation" >.</span><span class="token function" >string</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> widget <span class="token operator" >=</span> Thing<span class="token punctuation" >.</span><span class="token function" >assert</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
id<span class="token punctuation" >:</span> <span class="token number" >123</span><span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >"Widget"</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can try this out in <a href="https://codemix.github.io/flow-runtime/#/try">the online demo</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-flow-runtime-differ-from-other-solutions-" id="how-does-flow-runtime-differ-from-other-solutions-"></a><span class="text">How does <em>Flow Runtime</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-flow-runtime-differ-from-other-solutions-">#</a></h2>
<p>The vast majority of JS validation libraries have a focus on validating user input of one kind or another, whereas Flow Runtime is all about program correctness. To do this, we have to be able to represent the type of any possible JavaScript value, e.g., the shape of a class, or whether a generator function yields the right type of object.</p>
<p>Most popular validation libraries don't handle these kinds of scenarios, the closest alternative is <a href="https://github.com/gcanti/tcomb">tcomb</a> by Giulio Canti, it's a vast library but pre-dates Flow and therefore can't handle some complicated cases.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-flow-runtime-" id="why-did-you-develop-flow-runtime-"></a><span class="text">Why did you develop <em>Flow Runtime</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-flow-runtime-">#</a></h2>
<p>We were modernizing a pretty large, sprawling JavaScript codebase for one of our customers back in 2014 when Facebook launched Flow, and after a bit of experimentation we were sold entirely - it's an excellent technology. However, at the time it was still pretty rough around the edges and didn't support a lot of the newer ES6 features we were using.</p>
<p>We also found introducing a type system to an existing project pretty challenging. You have to make a lot of assumptions about the untyped code, and you don't start seeing the benefit until the overwhelming majority of the codebase is converted.</p>
<p>The core problem is that your nice, newly typed codebase touches untyped code so often that static analysis is defeated - it's entirely possible to write fully annotated code that Flow happily accepts and is completely wrong because the real-world input does not match your expectations. So if we can't find these problems at compile time, the only way to find them is at runtime.</p>
<p>Out of this idea came my first effort - <a href="https://github.com/codemix/babel-plugin-typecheck">babel-plugin-typecheck</a> which compiles Flow type annotations into type checks. It generates all the code inline which makes it very hard to develop for and maintain. As Flow matured and continued getting better, it became clear that we needed a different approach if we were ever going to be compatible, and so flow-runtime was born.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'd like to produce a webpack plugin to make it easier to work with external type definitions. Right now you have to use a separate package called <code>flow-runtime-cli</code> which generates a file that you can later import, and it's all a bit messy. I also want to simplify some of the internals to make it easier for people to contribute.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-flow-runtime-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-flow-runtime-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Flow Runtime</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-flow-runtime-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In general, I think we're going to see TypeScript and Flow become more and more popular, the benefits of optional static typing are pretty clear at this point. I'd like to see the ecosystem around Flow mature, I think it's the technically superior option but TypeScript offers a lot better tooling at the moment.</p>
<p>Eventually, I think we'll see Flow's type information start being incorporated into other projects, which will enable a lot of cool things. If that information were available directly to Babel, webpack or uglify, etc. it would be possible to generate much faster safely, smaller production builds.</p>
<p>Now that Babel supports TypeScript it is possible to support TypeScript in flow-runtime. I'm pretty excited to try that out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Take every prescriptive blog post or article you read with a pinch of salt and be particularly suspicious of anyone who tells you to always/never do X, Y or Z.</p>
<p>Stick with well-established tools at first and don't worry about keeping up with the cutting edge - excellent documentation and support matter most.</p>
<p>Seek out and work closely with people smarter and more experienced than you, but remember that those intelligent people are still going to be wrong a lot of the time.</p>
<p>Comment your code, for your future benefit and because you'll spot a bunch of lurking bugs in the process.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think <a href="https://github.com/benjamingr">Benjamin Gruenbaum</a> is an unsung hero in the Open Source JavaScript community. Benjamin contributes to so many projects and discussions that it's hard to keep up, he's one of those people that is always there, helping people on Stack Overflow, supporting other developers in GitHub issues, being pragmatic and helping keep discussions productive.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Charles! I think your work complements <a href="https://flow.org/">Flow</a> well and will allow people using it already to get more out of the approach.</p>
<p>Check out <a href="https://codemix.github.io/flow-runtime/">flow-runtime site to learn more</a>. See <a href="https://github.com/codemix/flow-runtime">the project in GitHub</a> as well.</p>
a-plus-forms - A+ forms. Would use again - Interview with Nikolay Nemshilovaaplusformsaformswoulduseagaininterviewwithnikolaynemshilov2017-11-20t00:00:00z2017-11-20T00:00:00Z<p>If you think about it, a lot of web development has something to do with forms. Every time you capture information, you most likely require a form. It's one of the basic skills for a front-end developer.</p>
<p>There are plenty of options for React and I've <a href="https://presentations.survivejs.com/forms-in-react/">reviewed the directions briefly on my slides</a>. To get a better idea of one of them, I'm interviewing <a href="https://twitter.com/nemshilov">Nikolay Nemshilov</a> about A+ forms.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I met Nikolay over the internet roughly a decade ago while I was writing my first bigger web application. I used his RightJS library there. It was sort of an alternative for jQuery at the time. It has been fun to see both of our careers evolve since those days.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/e950e05c2a6b18cf53ac12d8d2c73e7c?s=200" alt="Nikolay Nemshilov" class="author" width="100" height="100" />
</span>
Well, over the years of trying to answer this question, I narrowed it down to the following: Hi, I'm Nikolay, I'm here to help.
</p>
<p>That's usually enough to start. But, I suppose you want something more tangible in this case. Well, I'm a software engineer, I think. And I've been doing this long enough to start feeling a bit awkward about it. I guess my "career" as a software engineer began when IE4 was the tip of the spear and I still had my hands on the keyboard every single day.</p>
<p>Recently, however, I've been more focused on building teams of software engineers at my day job. I see this as just another way to create software. I suppose it's a natural outcome of attempts to realize more extensive and more significant projects.</p>
<p>Ok, I admit, this was a bit vague. Don't get me wrong; I am not trying to dodge the question. But I feel like a personal story of a Siberian born, working-class nerd who lives in Australia is going to be a bit confusing and besides the point.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_a-plus-forms_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_a-plus-forms_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>a-plus-forms</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_a-plus-forms_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>A+ forms is a React forms library that helps you not cry yourself to sleep every time your boss asks you to build a twelve-field form. It solves tedious problems like state management, validation, and data transformation in a predictable manner with minimal configuration.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-_a-plus-forms_-work-" id="how-do-_a-plus-forms_-work-"></a><span class="text">How do <em>a-plus-forms</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-_a-plus-forms_-work-">#</a></h2>
<p>I think this question can be answered from multiple perspectives: how it works internally, what it exposes externally, and how it works in the context of an engineering team.</p>
<p>It primarily revolves around the concept of an input field. I started with the familiar idea of an HTML input tag with its <code>name</code>, <code>value</code>, and <code>onchange</code> attributes and then applied these to all fields. Fields may also have sub-fields. In some cases, a form is one large field.</p>
<p>The big idea here is to work with the grain of engineers' understanding of forms. Engineers think of forms as a bucket of input fields that spits out a blob of data which we then retrieve and send to the server. A+ forms provide this the type of developer experience. For example:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> Form<span class="token punctuation" >,</span> TextInput<span class="token punctuation" >,</span> PasswordInput <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'a-plus-forms'</span><span class="token punctuation" >;</span>
cosnt <span class="token function-variable function" >sendToServer</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> username<span class="token punctuation" >,</span> password <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span> <span class="token comment" spellcheck="true" >/* ... */</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token operator" ><</span>Form onSubmit<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>sendToServer<span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
<span class="token operator" ><</span>TextInput name<span class="token operator" >=</span><span class="token string" >"username"</span> label<span class="token operator" >=</span><span class="token string" >"Username"</span> <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span>PasswordInput name<span class="token operator" >=</span><span class="token string" >"password"</span> label<span class="token operator" >=</span><span class="token string" >"Password"</span> <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span>button type<span class="token operator" >=</span><span class="token string" >"submit"</span><span class="token operator" >></span>Sign In<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>Form<span class="token operator" >></span>
</code></pre>
<p>The above is just a simple example that doesn't do justice to the level of complexity A+ forms can handle. But it demonstrates the principle behind the library:</p>
<blockquote>
<p>Here are my fields. Please give me the data entered into them, because I don't care about anything else at the moment.</p>
</blockquote>
<p>This mentality is shared by engineers and teams. It's a universal truth of forms if you will. All you want is data.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-_a-plus-forms_-differ-from-other-solutions-" id="how-do-_a-plus-forms_-differ-from-other-solutions-"></a><span class="text">How do <em>a-plus-forms</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-_a-plus-forms_-differ-from-other-solutions-">#</a></h2>
<p>Ok, let's get this straight. I'm not going to say anything negative about other solutions - I'm not here to bash other people's work. Besides, given enough determination, most problems can be solved with any tool available. Instead, I'll explain what's important to me.</p>
<p>As the technology matures, we humans try to use it to solve increasingly complex problems. Which in turn requires increasingly sophisticated solutions. Over time this complexity starts accumulating until we forget what we were doing in the first place.</p>
<p>Most solutions on the market address the complexity of the task with increased complexity. Over time this inevitably becomes taxing. A+ forms differ here by attempting to keeping the task of creating and maintaining complex forms simple.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_a-plus-forms_-" id="why-did-you-develop-_a-plus-forms_-"></a><span class="text">Why did you develop <em>a-plus-forms</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_a-plus-forms_-">#</a></h2>
<p>To become rich and famous and achieve world domination, naturally. But seriously, I think I have little patience for wasting time in my work. I don't know about you, but I'm easily distracted and discouraged when things are not going smoothly. There are so many awesome things waiting to be built in the world, and spending time dealing with mundane problems that have already been solved is unproductive.</p>
<p>That's the same principle why you use React. You could devote yourself to vanilla JavaScript and DOM. But after ten times of writing the same repetitive boilerplate code and dealing with browser inconsistencies, you probably just want to focus on building the actual app, not figuring out why <code>change</code> events are not triggered on a range input in IE 10.</p>
<p>I built A+ forms for the same reason, so my engineers and I don't have to solve this problem over and over again and can focus on making what we want to develop.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm glad you've asked. A+ forms itself represents just the data handling core. All the components are just standard HTML-looking abstractions, which depending on a context, can be implemented in all sorts of things. Those <em>"all sorts of things"</em> is the next step in my view.</p>
<p>Here are the next extensions that I'm planning to build:</p>
<p><strong>1) Bootstrap-tailored fields</strong></p>
<p><del>A+ forms have a bunch of standard fields out of the box, but they're not tied to any particular UI component implementation. I want to create an extension that will convert those fields into standard Bootstrap fields as a means to simplify adoption further.</del></p>
<p>This has been done. See <a href="https://www.npmjs.com/package/a-plus-forms-bootstrap">a-plus-forms-bootstrap</a>.</p>
<p><strong>2) React Native fields</strong></p>
<p>This one is my favorite. Form management in native mobile apps is alien to us web developers. But it doesn't have to be like this. If we re-implement those fields in React Native components, then engineers could have the same developer experience between web and native apps. Heck, they could even finally share their forms code between them.</p>
<p><strong>3) HTML5 props validator</strong></p>
<p>At my day job, we're using JSON Schema as a way to validate forms, but it's a bit overkill for more straightforward cases. I want to build an extension that will read standard validation props like <code>required</code> and <code>pattern</code> on the input fields and set validation rules accordingly.</p>
<p>The goal is to make A+ forms into a sort of "Barbie doll", where the community can build extensions and extra accessories for it and share their solutions with each other.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_a-plus-forms_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_a-plus-forms_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>a-plus-forms</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_a-plus-forms_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>If you ask my opinion, I think we should stop calling it "web development" and instead just use the term "development". From first-hand experience since almost the beginning of widespread adoption of the web, I can say one thing: engineers tend to be overprotective of their reputation, to the point of being real jerks.</p>
<p>When I started my career, the word "web developer" was an oxymoron. The older generation didn't even want to call us "developers", they called us "webmasters" as a way to distance themselves from us. They saw themselves as "real engineers", where we were just playing with toys.</p>
<p>If you joined the bandwagon a bit later, you might have seen web developers belittled as not being "real programmers". Humans do nasty stuff to each other now and then.</p>
<p>But, by now techniques developed for the "web" have become pretty much the standard practice in most areas of software. For example, the process for building UIs we've developed for the "web" beats the traditional "native" UI practices. The same goes for building APIs. Node.js based microservices, Serverless, load balancing, high-efficiency networking, and so on all grew out of the "web".</p>
<p>The child has grown into an adult and feels strong. Now that adult just needs to learn how to act like an adult. That will be a trend in the near future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Tread without fear, my friends. The "web" is here to stay. Don't listen to anyone who tells you it's not "real software engineering".</p>
<p>Also, a bit of a downer: 99% of your time won't be about "writing clever algorithms". The sooner you accept that the better off you will be. It's just a fairy tale that has nothing to do with reality. It's called "development", not "slinging out code" for a reason. It's really about building things, not showing how smart you are. Because guess what, everyone else is just as bright :)</p>
<p>This observation brings us to the third and last piece of advice. Learn how business works. I know, business, ewww! But it will help you to make better decisions and understand how other people see your role in a company. Most importantly, this will help you to keep hassle to a minimum and get back to doing what you love - creating things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Ooh, I love this! Okay, so, anyone really from Thinkmill, Envato or Buildkite. They are all strong technically, and most of them are outstanding people.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Don't forget to eat well, get enough sunlight, and, if you're an introvert, don't forget to give yourself plenty of downtime cuddling with a book to recharge your batteries. The world is an exhausting place, but it has pancakes in it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Nikolay! A+ forms looks like a solid form handling solution for React.</p>
<p>You can learn more about <a href="https://github.com/MadRabbit/a-plus-forms">A+ forms at GitHub</a>.</p>
“SurviveJS — Webpack” v2.1 and “SurviveJS — Maintenance” v0.9asurvivejswebpackv21andsurvivejsmaintenancev092017-11-17t00:00:00z2017-11-17T00:00:00Z<p>What do you do when you realize a book has become too big? You split it of course. The <a href="https://survivejs.com/webpack/">webpack book</a> began to feel this way after <a href="https://survivejs.com/survivejs-webpack-20/">the previous release</a> and this is the reason why I started to write <a href="https://survivejs.com/maintenance/">a new book about maintenance</a> with <a href="https://github.com/sapegin">Artem Sapegin</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I've been collaborating with Artem since I wrote my first React book and he was the ideal collaborator for the new effort as we both have experience with maintaining and developing JavaScript projects of different sizes. Writing the book has been a chance for us to gather our knowledge into one place and learn in the process.</p>
<p>Maintenance feels like an undervalued topic, and it's one of the main reasons why we decided to write the book in the first place. It's easy to start a project but how can you ensure its success? Normally a project spends most of its lifetime in maintenance mode so putting the focus on this topic has value.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-survivejs-webpack-v2-1" id="book-improvements-survivejs-webpack-v2-1"></a><span class="text">Book Improvements — “SurviveJS - Webpack” v2.1</span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-survivejs-webpack-v2-1">#</a></h2>
<p>We began writing the book by moving secondary topics to the maintenance book from the webpack one. This cleaned up the structure of the book and allowed me to make it easier to approach.</p>
<p>The webpack book is more to the point now although it's still a long book (~370 pages). I am happy with the results, though, as now it feels like the book can be extended again.</p>
<p>During this process, I've applied simplifications based on my <a href="https://survivejs.com/training/">training experiences</a> this year. I updated the book to webpack 3 and added tons of small tips and tricks here and there. A few editorial tweaks have been made to ensure the book reads well and fits the PDF format nicely.</p>
<p>I've listed the main changes below:</p>
<ul>
<li>The <em>Packages</em> part has been eliminated. The chapter focused on consuming packages remains in the book while the rest of the content has been moved to the maintenance book.</li>
<li>The code has been formatted using Prettier. There are still trailing commas to keep the diffs simple.</li>
<li>The <em>Automatic Browser Refresh</em> chapter has been renamed as <em>webpack-dev-server</em> to reflect its content better.</li>
<li>The linting chapters have been rewritten and moved to the maintenance book.</li>
<li>The <em>Analyzing Build Statistics</em> chapter has been renamed as <a href="https://survivejs.com/webpack/optimizing/build-analysis/">Build Analysis</a> chapter.</li>
<li>The <em>Bundling Libraries</em> chapter has been reworked and moved to the maintenance book.</li>
<li>The <em>Library Output</em> chapter has been dropped as webpack documentation and the maintenance book cover the topic well.</li>
<li>The <a href="https://survivejs.com/maintenance/appendices/customizing-eslint/">Customizing ESLint</a> appendix has been moved to the maintenance book.</li>
<li>The <em>Hot Module Replacement with React</em> appendix has been dropped as the official documentation covers the topic well.</li>
<li>The CSS Modules portions have been moved to an appendix as it's secondary content.</li>
<li>The book structure has been simplified and streamlined where possible so it's easier to get into the topic. At the same time I added more tips and tricks where it makes sense.</li>
</ul>
<p>I still have content planned for the webpack book, but even in its current state, it's better, and more focused, than the old one. If you have ideas on what specific topics to cover, <a href="https://github.com/survivejs/webpack-book/issues">let me know at GitHub</a>.</p>
<p>In total 309 commits went to the book since the last release. You can find the <a href="https://github.com/survivejs/webpack-book/compare/v2.0.22...v2.1.0">changes at GitHub</a>. Remember to use the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<p>You can find the book below:</p>
<ul>
<li><a href="https://survivejs.com/webpack/preface/">“SurviveJS — Webpack” - Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-webpack/">“SurviveJS — Webpack” - Leanpub edition (digital)</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. I support his work this way given mine builds on top of his. Literally, most of the income goes to webpack developers now!</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#new-book-survivejs-maintenance-v0-9" id="new-book-survivejs-maintenance-v0-9"></a><span class="text">New Book - “SurviveJS — Maintenance” v0.9</span><a class="header-anchor-select" href="https://survivejs.com/#new-book-survivejs-maintenance-v0-9">#</a></h2>
<p><a href="https://survivejs.com/maintenance">The maintenance book</a> has roughly 150 pages in its current state, and it covers topics including packaging, code quality, infrastructure, documentation, and future. It's a light, inspirational read and it contains plenty of techniques you can apply in your daily work.</p>
<p>Given a large part of the content was split from the webpack book, <a href="https://leanpub.com/survivejs-maintenance">the Leanpub edition of the maintenance book</a> will be provided for free to those that bought the previous (v2.0) version of the webpack book or earlier.</p>
<p>The current version of the book is missing some content, and the book is still shaping up. For this reason, it is important that you <a href="https://github.com/survivejs/maintenance-book/issues">give feedback on the GitHub issue tracker</a>.</p>
<p>You can find the book below:</p>
<ul>
<li><a href="https://survivejs.com/maintenance/preface/">“SurviveJS — Maintenance” - Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-maintenance/">“SurviveJS — Maintenance” - Leanpub edition (digital)</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>The book profit is split between Artem and me. We use the funds to develop further content based on demand.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I want to push the maintenance book to a content complete state and produce a paperback version of it. The book price will go up gradually as it gets closer to completion.</p>
<p>I have a set of tweaks planned for the webpack book, and there's a <a href="https://survivejs.com/react/">React book</a> to update as well.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Given I am based in Vienna these days, this has meant it's easy for me to do <a href="https://survivejs.com/training/">JavaScript training</a> across Europe. I also consult occasionally so contact me if you are interested in either offering.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the new book and find the webpack book improvements useful! It took a lot of work to get here, and there's still more to come. Thank you for your support!</p>
<p>Both books have specific chat channels at Gitter if you want to discuss the topics directly:</p>
<ul>
<li><a href="https://gitter.im/survivejs/maintenance">Maintenance book Gitter channel</a></li>
<li><a href="https://gitter.im/survivejs/webpack">Webpack book Gitter channel</a></li>
</ul>
<p>You can also <a href="https://github.com/survivejs/ama/issues">ask questions at my AmA</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>We will arrange <a href="https://react-finland.fi/">a React conference in Finland (end of April, 2018)</a>. Perhaps I will see some of you there!</blockquote>Cabbie - WebDriver for the masses - Interview with Forbes Lindesayacabbiewebdriverforthemassesinterviewwithforbeslindesay2017-11-13t00:00:00z2017-11-13T00:00:00Z<p>Testing is a lasting topic in software development. There are lots of tools, especially for JavaScript. In this interview, you'll learn about Cabbie, a WebDriver based browser automation library by <a href="https://twitter.com/ForbesLindesay">Forbes Lindesay</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/eb3e104452d654350a5d1a65caa2e49e?s=200" alt="Forbes Lindesay" class="author" width="100" height="100" />
</span>
I got interested in open source and JavaScript while I was at university. It was fascinating to see people using the software I built to build their things. I worked at Facebook as a front-end engineer for a couple of years and learned a lot about the challenges in scaling vast JavaScript applications.
</p>
<p>Now I'm working on a startup called Changepage, which is a tool for sharing feature announcements and bug fixes. I'm also running training workshops on React and Node.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-cabbie-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-cabbie-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Cabbie</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-cabbie-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Cabbie is a JavaScript library for automating browsers. The primary use case is end to end testing, but you can use it for any task that you would usually do by hand in a browser, and you want to automate. It lets you do all the things you would typically do by hand, but using JavaScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-cabbie-work-" id="how-does-cabbie-work-"></a><span class="text">How does <em>Cabbie</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-cabbie-work-">#</a></h2>
<p>Cabbie uses the <a href="http://www.seleniumhq.org/projects/webdriver/">WebDriver</a> protocol to control browsers. It's a standard that all major browsers support that lets you interact with them via HTTP requests.</p>
<p>There are two versions of Cabbie:</p>
<ul>
<li><a href="https://www.npmjs.com/package/cabbie-async">cabbie-async</a> is a <code>Promise</code> based async library. <code>cabbie-sync</code> is automatically generated from the same source code by removing all the <code>await</code> and <code>async</code>. It uses the <code>spawnSync</code> API in Node to make the same library, but synchronous.</li>
<li><a href="https://www.npmjs.com/package/cabbie-sync">cabbie-sync</a> is the synchronous version which is much easier to use.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-cabbie-differ-from-other-solutions-" id="how-does-cabbie-differ-from-other-solutions-"></a><span class="text">How does <em>Cabbie</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-cabbie-differ-from-other-solutions-">#</a></h2>
<p>There are several different webdriver clients for Node. What differentiates Cabbie from most is that it has a synchronous mode, with the same API as the async mode. Normally when you're writing JavaScript, it's a bad idea to write synchronous IO, but for tests, it doesn't usually matter. Writing and debugging synchronous code is more comfortable.</p>
<p>The async mode can also be useful though when you're trying to run many tests in parallel. If you use Cabbie in async mode, you can run multiple tests in parallel in a single Node process. If you use it in sync mode, you need multiple Node processes to run multiple tests in parallel.</p>
<p><a href="http://webdriver.io/">webdriver.io</a>, an another solution, also has a synchronous mode, but it works a little differently. To use the synchronous mode, you have to use their entire test framework. Because Cabbie is just a library, you can use your choice of the test framework. It works equally well with Jest as it does with Mocha.</p>
<p>Cabbie also has a real focus on developer experience. For example, if you use an online service like Sauce Labs or BrowserStack to run your end to end tests, you can configure Cabbie to use that service just by passing <code>cabbie("saucelabs")</code> or <code>cabbie("browserstack")</code> when constructing the driver.</p>
<p>We also normalize the methods for selecting a specific browser across all the major cloud platforms (see <a href="https://cabbiejs.org/browsers/">Cabbie documentation on this</a>) so you don't have as much to remember or as much to change if you switch providers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-cabbie-" id="why-did-you-develop-cabbie-"></a><span class="text">Why did you develop <em>Cabbie</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-cabbie-">#</a></h2>
<p>I was developing a large web app, and we needed a way to check that everything worked when we put it together. Unit tests are great, but it's tough to keep the coverage high enough to catch every bug. With an end to end test, one test can cover a considerable portion of your app. It's also almost impossible to check that your frontend code and backend code works together without end to end testing.</p>
<p>I tried webdriver.io and loved how they let you write synchronous end to end tests - it made things way more relaxed. At the time I needed it to work on Windows though because not all the developers I was working with were on apple. Once I dug into making it work on Windows, I found there were lots of other things I wanted to change and tweak the API.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>One of the difficulties in writing end to end tests can be the cryptic error messages you get back. The other thing is that it's straightforward to rely on your tests running quickly accidentally. What I'm starting to do with Cabbie is add detection for standard errors, and print more helpful error messages that provide suggested next actions for how to fix these problems. I'm also adding automated retries/timeouts to most of the methods as this makes it much easier to write stable, reliable tests.</p>
<p>The next big project will be a test runner, similar to Jest but with features to make it easier to run tests in parallel across many browsers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-cabbie-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-cabbie-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Cabbie</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-cabbie-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I see a lot of renewed interest in testing and static type checking. I think this is exciting. For the web to succeed, we need web apps to be reliable. I've seen tremendous benefits from TypeScript and Flow, and the competition is helping to improve both tools. Jest has transformed what we feel able to expect from testing frameworks. I think end to end testing is the next thing that needs a big kick in this area.</p>
<p>The other big thing I think is improving is state management. We've just started to see the real problems that techniques like Flux and Redux cause, so the return to component-local state using <code>this.setState</code> and the upsurge of tools like GraphQL, Relay and Bicycle are changing things for the better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I think if you're just starting out, the amount of stuff it seems like you need to learn about can be overwhelming. My advice would be to minimise what you learn from your first couple of apps. Just look for solutions to problems that you've experienced, and ignore the people saying you <em>need</em> to learn about this new technology or that new technology.</p>
<p>The other piece of advice that I've found useful is try to deploy to production on day one of any new project. It's much easier to deploy an app that is just a blank "hello world" than it is a full complex application with databases and authentication and so on. If you are continuously deploying things to production, you are always ready to start promoting your idea, as soon as you're happy for people to start using it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Erik Rasmussen created the Redux Form project. Handling form input well is a deceptively complex problem, and I think Erik has done an awe-inspiring job of understanding those issues and building a sound API for dealing with them. I'd also be interested to hear from Jared Palmer who's been doing similar work with the Formik project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Forbes! Cabbie looks like a fantastic alternative for end to end testing.</p>
<p>You can <a href="https://cabbiejs.org/">learn more about Cabbie at its site</a>. See also <a href="https://github.com/ForbesLindesay/cabbie">Cabbie on GitHub</a>.</p>
react-lite - Implementation of React optimized for small size - Interview with Jadeareactliteimplementationofreactoptimizedforsmallsizeinterviewwithjade2017-11-06t00:00:00z2017-11-06T00:00:00Z<p>Even though React API is small, the implementation is quite sizable due to all the work it does behind the façade. For this reason, people have developed solutions that implement the API with different trade-offs.</p>
<p><em>react-lite</em> by <a href="https://twitter.com/guyingjie129">Jade</a> is one of these solutions.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn about a related solution, <a href="https://survivejs.com/blog/inferno-interview/">read the Inferno interview</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/0d2218b14f25799ed87e0cbf5a787085.jpg" alt="Jade" class="author" width="100" height="100" /><figcaption>Jade</figcaption></figure>
My Chinese name is GuYingjie (古映杰), and people call me Jade in English. I live in Shanghai and work for Ctrip as a front-end architect. I am the author of <em>react-lite</em>.
</p>
<p>At Ctrip, we are big fans of React. We use React and React Native in many projects. My primary job is to improve the toolchain and infrastructure around React so that our engineers can develop a web app using React more productively and happily.</p>
<p>I like being a part of the open source community. <em>react-lite</em> is one of my open source projects, and there are also other exciting projects in my GitHub, such as <a href="https://github.com/Lucifier129/factor-network">factor-network</a>, which is two machine learning algorithms implemented in less than 400 lines code of JavaScript. It works well-playing flappy-bird and recognizing MNIST handwritten digit database.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_react-lite_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_react-lite_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>react-lite</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_react-lite_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>react-lite</em> is a subset of React - just like <em>zepto</em> to <em>jquery</em>. If your <em>react app</em> follows best practices of React, it's easy to use <em>react-lite</em> to replace React in <a href="https://github.com/Lucifier129/react-lite/blob/master/README.md#usage">a comfortable and safe way</a>. Everything should just work and reduce your JS bundle size by 100 kB+.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-lite_-work-" id="how-does-_react-lite_-work-"></a><span class="text">How does <em>react-lite</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-lite_-work-">#</a></h2>
<p>People often ask me a question: How much code you had to drop from React source code to make <em>react-lite</em> so small?</p>
<p>In fact, <em>react-lite</em> is not a fork of React repository. It's a re-implementation of the same React Public API using ES2015. It ignored the old browsers (such like IE8) to keep itself cleaner and smaller. We don't need to build a complex custom event-system as React does.</p>
<p>We simply follow the <em>W3C Event</em> which has been implemented in all modern browsers natively. It also made <em>React.PropType</em> to be noop (empty function). It doesn't implement <em>ReactDOM.renderToString</em> and other React features which are not expected to run in production.</p>
<p>I cherry-picked about 178 unit test suite from React GitHub repository (these are all about React Public API) to make sure <em>react-lite</em> can do the same thing. I created an independent repository(<a href="https://github.com/Lucifier129/react-core-unit-testing">react-core-unit-testing</a> to share the unit test suite.</p>
<p>Anyone can use the test suite to implement their own <em>react-lite</em> or to check compatibility with official React. It will be great if React officially shares the Public API unit test suite in an independent repository one day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_react-lite_-differ-from-other-solutions-" id="how-does-_react-lite_-differ-from-other-solutions-"></a><span class="text">How does <em>react-lite</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_react-lite_-differ-from-other-solutions-">#</a></h2>
<p>Honestly speaking, <em>react-lite</em> is slower than <em>inferno</em> and bigger than <em>preact</em>. But, for now, <em>react-lite</em> may be more <em>compatible</em>. Both <em>inferno-compat</em> and <em>preact-compat</em> did not follow the same unit test suite of React Public API, and <em>react-lite</em> now has the best performance in react-core-unit-testing mentioned above.</p>
<p>As we know, <em>inferno</em> and <em>preact</em> are not built for compat, they just have a compat version. It may be hard for them if their custom features cannot keep up the compatibility with React API, or their current implementation can't simulate the new features of React. For <em>react-lite</em>, that is not a problem as it doesn't contain any custom features and therefore can be refactored anytime if needed without breaking.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_react-lite_-" id="why-did-you-develop-_react-lite_-"></a><span class="text">Why did you develop <em>react-lite</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_react-lite_-">#</a></h2>
<p>In 2015/10, I saw some articles explaining how virtual-dom works. I thought I could do it better, so I created a repository named <em>esnext-react</em>, tried to implement a simple React using ES2015, and ran the <a href="http://lucifier129.github.io/react-motion-with-react-lite/index.html">react-motion demo</a> successfully. I felt great when it worked. It's a very smooth animation written using the good old React API that we know of but running on <em>esnext-react</em>.</p>
<p>In 2015/12, I shared the experience of <em>esnext-react</em> to some people in the Shanghai office of <a href="https://www.strikingly.com/">Strikingly</a>. The audience, include <a href="https://twitter.com/dfguo">Dafeng</a> - the CTO of Strikingly, all think that making a smaller React runtime implementation is a worthwhile thing to do. It can help people who are hesitant to choose React on the mobile web due to the large script size.</p>
<p>Then I renamed <em>esnext-react</em> to <em>react-lite</em>, and started to improve it and bring it into real projects in Ctrip. Now, <em>react-lite</em> is heavily adopted inside the company.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Now I am focusing on Isomorphic Web App development. As a result, I have developed the following solutions:</p>
<ul>
<li><a href="https://github.com/Lucifier129/relite">relite</a> is a Redux-like library for managing state with a more straightforward API) for state management.</li>
<li><a href="https://github.com/Lucifier129/create-app">create-app</a> is meant to be configured once. It renders both client and server for a router and allows integrating them with Node.js, React, Isomorphic-fetch, js-cookie, querystring and other isomorphic libraries into react-imvc.</li>
</ul>
<p><a href="https://github.com/Lucifier129/react-imvc">react-imvc</a> is similar to <a href="https://github.com/zeit/next.js">next.js</a> as it helps people to build isomorphic/universal web app more easily. But <em>react-imvc</em> has a different idea, which I call <em>Next generation of Front End MVC Architecture</em>.</p>
<p>The architecture comprises of React/React-lite as the View of MVC, redux-like/relite (state + actions) as the Model of MVC, and ES2015 class as the isomorphic Controller. All the parts of MVC are isomorphic by design. Our web app can do Server-Side-Rendering in Node.js (for SEO and faster initial screen load time) and do Client-Side-Rendering in the browser (for fast user interaction).</p>
<p>Unfortunately, react-imvc documentation is written only in Chinese. I'm planning to translate it into English in the future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-lite_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_react-lite_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>react-lite</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_react-lite_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p><em>react-lite</em> does not support React 16 yet because React Fiber is not stable enough. <em>reducing the scripts size</em> is also a plan of React Core Team. React 16 is already much smaller than React 15 is. Maybe it's not necessary to write a smaller runtime library of React anymore, or perhaps it's impossible to implement the react-fiber-architecture with less code than React has.</p>
<p>So the future of <em>react-lite</em> is uncertain. It depended on the evolution of React. Anyway, <em>react-lite</em> is still an excellent choice for a mobile site that is following the best practices of React 15 and wants to reduce the bundle size of the js file.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Web development moves faster than you and me. No one can learn everything. But luckily, for most of the libraries or frameworks, we can learn it in a few days.</p>
<p>Since there are too many things to learn, we must prioritize of our learning. For example, between ES2015/TypeScript and React/Vue/Angular, which to learn first? In my opinion, the answer is ES2015/TypeScript. The essential program language features have higher learning priority than libraries/frameworks written using the language.</p>
<p>I also believe in learning by doing, learning by coding, learning by building, and learning by making. The source code of React is complicated, but the original idea of React is quite simple and elegant. Implementing your own React (or any other things you are learning) in an MVP (Minimum Viable Product) way can help us understand them more deeply and clearly, even if the code we had written will never run in production.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>In China, there are many excellent front-end developers. I recommend some of them below:</p>
<ul>
<li><a href="https://github.com/leeluolee">ZhengHaibo</a>, author of <a href="https://github.com/regularjs/regular">regularjs</a>, now works for Netease.</li>
<li><a href="https://github.com/hax">HeShiJun</a>, a evangelist of JavaScript/ECMAScript and Web Standard in China.</li>
<li><a href="https://github.com/yuanyan">yuanyan</a>, author of <a href="https://github.com/alibaba/rax">rax</a>, now works for Alibaba.</li>
<li><a href="https://github.com/kener">linfeng</a>, author of <a href="https://github.com/ecomfe/echarts">echarts</a>, now works for Alibaba.</li>
<li><a href="https://github.com/sorrycc">chencheng</a>, author of <a href="https://github.com/dvajs/dva">dva</a>, now works for Alibaba.</li>
<li><a href="https://github.com/aui">aui</a>, author of <a href="https://github.com/aui/art-template">art-template</a> and <a href="https://github.com/aui/artDialog">artDialog</a>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>The language gap between Chinese developers and English developer will become smaller, and I am glad to see we can learn from each other more in the future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jade! It was great that you dared to develop <em>react-lite</em> as a light replacement for React. We'll see how it goes with React 16.</p>
<p>You can <a href="https://github.com/Lucifier129/react-lite">learn more about react-lite at GitHub</a>.</p>
React Day Berlin - Fully Packed Day of Your Favorite React Content - Interview with Robert Haritonovareactdayberlinfullypackeddayofyourfavoritereactcontentinterviewwithrobertharitonov2017-10-17t00:00:00z2017-10-17T00:00:00Z<p>There are a lot of React events out there these days and it seems a new one appears every week somewhere around the world.</p>
<p>To continue on the theme, this time I'm interviewing <a href="https://twitter.com/operatino">Robert Haritonov</a> of <a href="https://reactday.berlin/">React Day Berlin</a> organized early December.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/react-alicante-interview/">Read the interview about React Alicante</a> to gain more perspective on conferences.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/bad3e55f0b96b80bc4ffb40d1c1414dc?s=200" alt="Robert Haritonov" class="author" width="100" height="100" />
</span>
Originally I'm from Riga, Latvia, and since around three years living in Amsterdam. Been doing JavaScript development since roughly 7-8 years, when jQuery was the (only) thing, and IE6 tricks been pleasing my first sleepless nights as a freelancer.
</p>
<p>After going through few stages of being an active speaker in Russian speaking community, open source maintainer of <a href="https://sourcejs.com">SourceJS</a>, last years I've settled as a Tech Lead in Full-stack teams developing React and Node.js based applications.</p>
<p>Next to my day job, starting from late 2015 I've started to actively be involved in local meetup organization, and build large international conferences in Europe.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#which-community-events-are-you-organizing-now-" id="which-community-events-are-you-organizing-now-"></a><span class="text">Which community events are you organizing now?</span><a class="header-anchor-select" href="https://survivejs.com/#which-community-events-are-you-organizing-now-">#</a></h2>
<p>Together with colleagues and friends, I'm currently behind <a href="https://www.meetup.com/preview/React-Amsterdam">React Amsterdam</a>, <a href="https://www.meetup.com/preview/AmsterdamJS">AmsterdamJS</a> and <a href="https://www.meetup.com/preview/React-Open-Source">React Open Source</a> meetups and also conferences named by the same groups plus most recent - <a href="https://reactday.berlin">React Day Berlin</a> event.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-day-berlin-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-day-berlin-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>React Day Berlin</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-day-berlin-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Each event we do has its unique feeling and vibe. Whereas React Amsterdam is a massive event, for React Day Berlin we're building a more personal, cozy atmosphere with a right balance of talks touching various parts of the ecosystem.</p>
<p>It's going to be an intense learning day for everybody into React, and a great place to network with other developers from Germany, as well as with international open source enthusiasts and great software engineers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-react-day-berlin-offer-" id="what-does-react-day-berlin-offer-"></a><span class="text">What does <em>React Day Berlin</em> offer?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-react-day-berlin-offer-">#</a></h2>
<p>We offer a fully-packed line-up of talks about React (obviously), React Native, GraphQL/Apollo, case studies from world known projects and major open source initiatives like Storybook.</p>
<p>Consider this as a mini-festival, coming to the center of Europe to celebrate all things React and concentrate the learning experience together with inspiration from your peers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-arrange-react-day-berlin-" id="why-did-you-decide-to-arrange-react-day-berlin-"></a><span class="text">Why did you decide to arrange <em>React Day Berlin</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-arrange-react-day-berlin-">#</a></h2>
<p>Doing side-projects, like in this case, event organization, it's important to challenge yourself with new ideas and formats. We've been looking for an option to fill the season start with a balanced conference format, and Berlin turned out to be a great place to host such event.</p>
<p>It's a vibrant community, with lot's of great software developers and a big React fan base, that deserves a tremendous local conference with international vibes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Meanwhile, we've reached the capacity with some events and focusing on amplifying the best parts of our events and fixing bottlenecks of previously organized. We see lots of opportunities to build great communities, and that's what we love the most.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Try more things, stay open-minded and don't follow the hype everywhere it leads you. Choose what works best in your case, and set your way based on what works better for your product and team.</p>
<p>JavaScript development is hard nowadays, but at the same time, the community provides a great variety of opportunities either you want to build a Web App, or a Desktop application with Electron.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>It would be great to hear more from popular open source project maintainers. It's sad that open source is so hard our days, with people demanding too much from contributors doing their thing in free time for public availability.</p>
<p>The more we hear from developers behind the projects we use, the better community will be able to understand the efforts people put into open source.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Robert! I will be most likely participating in <a href="https://reactday.berlin">React Day Berlin</a> myself. It's a good place for a conference like this.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can get a <a href="https://www.eventbrite.com/e/react-day-berlin-2017-tickets-37159994544?discount=SurviveJS">15% discount to the conference ticket through this link</a>.</blockquote>unexpected-react - Test Full Virtual DOM - Interview with Dave Brotherstoneaunexpectedreacttestfullvirtualdominterviewwithdavebrotherstone2017-09-29t00:00:00z2017-09-29T00:00:00Z<p>Testing React components is a constant topic. You can test through solutions like Jest or Enzyme. Or you could try something else like <em>unexpected-react</em>.</p>
<p>The solution by <a href="https://twitter.com/bruderstein">Dave Brotherstone</a> builds on top of another testing library, Unexpected.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/unexpected-interview">Read the interview with Sune Simonsen to understand the ideas behind Unexpected better</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/4e1901d31a973187070a14522b55b47b?s=200" alt="Dave Brotherstone" class="author" width="100" height="100" />
</span>
I'm originally from the UK, but I've lived in Germany for the last seven years or so with my girlfriend, Tina. We were originally planning to come for two or three years, but I love it so much we've no plans to return now. I work for SoundCloud in Berlin where I get to work on a bunch of interesting problems with some amazingly talented people.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-unexpected-react-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-unexpected-react-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>unexpected-react</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-unexpected-react-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>If you want to write tests for your React components, you can use <em>unexpected-react</em> to validate that the components render what they should, and respond to events in the right way. It's based on JSX, so you assert that a component renders to a certain JSX template, and any differences are highlighted in a JSX diff. You can render using the shallow renderer, render to the DOM or render using the test renderer - the assertions stay the same.</p>
<p><strong>A simple example:</strong></p>
<pre><code class="lang-javascript"><span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>MyButtonComponent <span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >,</span>
<span class="token string" >'to render as'</span><span class="token punctuation" >,</span>
<span class="token operator" ><</span>button<span class="token operator" >></span>Click me<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>This example uses the <a href="https://reactjs.org/docs/shallow-renderer.html">React shallow renderer</a> to render the <code>MyButtonComponent</code> and compares the output to <code><button>Click me</button></code>. If the output is different, you'll see something like the following as output:</p>
<pre><code class="lang-jsx"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>btn<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token operator" >-</span>Click me<span class="token operator" >!</span>
<span class="token operator" >+</span>Click me
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
</code></pre>
<p>By default, it ignores extra props and extra child elements, so your test still passes as your component functionality expands (unless of course, you break something!).</p>
<p><strong>A more complex example:</strong></p>
<pre><code class="lang-javascript"><span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>MyApp <span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >,</span>
<span class="token string" >'when deeply rendered'</span><span class="token punctuation" >,</span>
<span class="token string" >'with event'</span><span class="token punctuation" >,</span> <span class="token string" >'change'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
target<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> value<span class="token punctuation" >:</span> <span class="token string" >'foo'</span> <span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token string" >'on'</span><span class="token punctuation" >,</span>
<span class="token operator" ><</span>input <span class="token operator" >/</span><span class="token operator" >></span><span class="token punctuation" >,</span>
<span class="token string" >'with event'</span><span class="token punctuation" >,</span> <span class="token string" >'click'</span><span class="token punctuation" >,</span> <span class="token string" >'on'</span><span class="token punctuation" >,</span>
<span class="token operator" ><</span>button<span class="token operator" >></span>Submit<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span><span class="token punctuation" >,</span>
<span class="token string" >'to contain'</span><span class="token punctuation" >,</span>
<span class="token operator" ><</span>LoadingSpinner <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>This test renders the component to the DOM, triggers a <code>change</code> event with an argument on the <code>input</code> component, then clicks the <code><button></code> with the text <code>Submit</code>, and finally checks that the resulting render contains a component called <code>LoadingSpinner</code>.</p>
<p>That last assertion highlights one of my favorite features of unexpected-react, which is that when you use the DOM renderer, you can assert on the full virtual DOM (the same tree you see in the <a href="https://github.com/facebook/react-devtools">React Developer Tools</a>), with all the HTML elements and all your custom components.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-unexpected-react-work-" id="how-does-unexpected-react-work-"></a><span class="text">How does <em>unexpected-react</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-unexpected-react-work-">#</a></h2>
<p>It's a plugin for the <a href="http://unexpected.js.org">unexpected</a> assertion library, which is known for its great output and diffs. Most of the real work happens in a library called <a href="https://github.com/bruderstein/unexpected-htmllike">unexpected-htmllike</a> which is a library that can perform diffing on any HTML-like structure.</p>
<p>You give it the actual value and the expected value, and two <em>adapters</em>, which are simple objects that can read the name, attributes, and children of the actual and expected values respectively, and it returns a whether there were any differences and the diff of the tree in object form. This diff can then be passed back to another method in <em>unexpected-htmllike</em> which can output the diff in syntax highlighted JSX form.</p>
<p>The diffing algorithm is, in fact, a bit more complicated than the React algorithm, as it optimizes for best output. For example, it uses heuristics to work out if an element is just a wrapper element and can be ignored. This property can be beneficial if you're testing components wrapped in (possibly multiple) layers of higher order components - <em>unexpected-react</em> will just see the higher order components as wrappers and gray them out in the output.</p>
<p><em>unexpected-react</em> itself is mostly just a set of assertions based on calling the diffing algorithm in various ways and presenting the output to the user. Doing this has the significant advantage that it can be adapted to new targets with minimal effort - I've recently released <a href="https://www.npmjs.com/package/unexpected-preact">unexpected-preact</a> for example, which has the same set of assertions for <a href="https://preactjs.com">Preact</a></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-unexpected-react-differ-from-the-other-solutions-" id="how-does-unexpected-react-differ-from-the-other-solutions-"></a><span class="text">How does <em>unexpected-react</em> differ from the other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-unexpected-react-differ-from-the-other-solutions-">#</a></h2>
<p>The main advantages are the JSX based syntax, so there's no big API to learn, and excellent output if something doesn't match. For instance, the <code>to contain</code> assertion, if it doesn't find a match, it will show you the closest match so you can probably go straight to solving the issue (maybe just a single class was missing).</p>
<blockquote>
<p>I think this is a vast improvement over Enzyme, where you'd typically end up with an <code>expected false to equal true</code> output if the output wasn't found.</p>
</blockquote>
<p>When running Jest, it also supports <a href="https://facebook.github.io/jest/docs/en/snapshot-testing.html">snapshot tests</a>, but unlike Jest's native snapshot tests, the diffs are based on real objects not just string representations of the JSX.</p>
<p>Doing this means that if for example, a class is missing, the missing class will be named, rather than just highlighting the diffed line. If the classes appear in a different order, the test will still pass under <em>unexpected-react</em> as it understands classes, but fail under Jest. You can also snapshot out of the box using any of the renderers without any special add-ons.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-unexpected-react-" id="why-did-you-develop-unexpected-react-"></a><span class="text">Why did you develop <em>unexpected-react</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-unexpected-react-">#</a></h2>
<p>Back in 2015 the shallow renderer came out, and I was using it to write some tests, but asserting it was hard. You'd have to navigate your way through the children, and end up with assertions like <code>expect(component.props.children[0].props.children[1].props.className).toEqual('foo')</code>. I'd seen a lightning talk from <a href="https://github.com/munter">Peter Müller</a> as JSUnconf in Hamburg on unexpected and had started to play around with it.</p>
<p>I was impressed with the output and began to use Peter's plugin <a href="https://github.com/munter/unexpected-dom">unexpected-dom</a> to assert properties on the DOM. One weekend I thought I might be able to adapt <em>unexpected-dom</em> to diff JSX trees, and so <em>unexpected-react-shallow</em> was born.</p>
<p><em>unexpected-react</em> came a bit later when I realized how I could access the full virtual DOM by hooking into the devtools hooks, and how to separate the logic of diffing a XML-like tree from the actual objects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I expect we'll add support for <a href="https://infernojs.org/">inferno</a> soon. I'm also working on a bigger task to make <em>unexpected-htmllike</em> a bit smarter, so when it outputs diffs, it can skip sections of your render where there are no changes and only show the relevant differences.</p>
<p>There are also some incredible things being worked on in the <a href="http://unexpected.js.org">unexpected</a> project - I don't want to say too much because they're very experimental at this stage, but I'm excited about the possibilities, especially when combined with <em>unexpected-react</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-unexpected-react-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-unexpected-react-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>unexpected-react</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-unexpected-react-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think there's a bright future as it's the kind of project that once you've used it and got the output in your workflow, you can't ever go back to having to debug a test or open a browser to see where the problem lies.</p>
<p>There's a great trend, which I think Angular started, that the view layer is testable and writing unit-tests for views is both achievable and useful. I believe that we'll see view level tests becoming more commonplace as they have for the other parts of applications.</p>
<p>It wouldn't surprise me if there were some advances in browsers to support some fundamentals of the React model of just rendering from a given state, and let <em>the platform</em> perform the necessary mutations. For me, this is the game changer with React - it speeds development time, reduces bugs, and makes testing easy.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I'd say to learn JavaScript as a language - for me, it was a couple of good books and a whole lot of experimentation, and then go to meetups if they're available in your area. Don't make the mistake of thinking "I need to know more before I can go". I started going to an Angular meetup before I knew pretty much anything about modern web development, and I always managed to learn something or meet people that could answer my questions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Lauren Macarthy from p5.js - I've not done much with the project but she's managed to create a great inclusive community, and I'd love to know more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you're using Enzyme for testing your React components, you should take a quick look at <a href="https://medium.com/@bruderstein/enzyme-vs-unexpected-react-ee9cb099d12b">my medium article comparing the tests and output in from the two libraries</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Dave! <em>unexpected-react</em> looks like a step to the right direction and the API feels intuitive to me.</p>
<p>To learn more, <a href="https://bruderstein.github.io/unexpected-react/">study unexpected-react site</a> and <a href="https://github.com/bruderstein/unexpected-react">unexpected-react on GitHub</a>.</p>
Experiences on WebExpo 2017aexperiencesonwebexpo20172017-09-24t00:00:00z2017-09-24T00:00:00Z<p>I was invited to <a href="https://www.webexpo.net/">WebExpo 2017</a> to discuss how I bootstrapped my business. Prague is one of the favorite cities of mine, so it was hard to say no. I'm happy I went there, and I picked up a few lessons while at it.</p>
<p>The tenth anniversary of the event was full of content (four tracks!), and there were afterparties where you could meet people. Most of the attendees were local, and specific sessions were in Czech only.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#tour-of-prague" id="tour-of-prague"></a><span class="text">Tour of Prague</span><a class="header-anchor-select" href="https://survivejs.com/#tour-of-prague">#</a></h2>
<p><figure><img src="/60c8ac378c17a37f9d19a228463daba2.jpg" alt="Opening ceremonies of WebExpo" class="" width="" height="" /><figcaption>Opening ceremonies of WebExpo</figcaption></figure></p>
<p>Like in <a href="https://survivejs.com/blog/react-next-2017/">React Next 2017</a>, the organizers had something special in mind for the speakers. We spent time exploring the city and ended up having a nice lunch (self-paid). Prague cuisine is particularly good if you don't have a strict diet. If you do, then you might be in slight trouble, but you won't starve.</p>
<p>The center of Prague is compact although there are several sights, such as the Petrin tower (think mini-Eiffel tower), outside of it. In addition to the center, we saw the main bridge and castle.</p>
<p><figure><img src="/056370ce05ce96ebcf9e9674ccc3768d.jpg" alt="At the subway with friends" class="" width="" height="" /><figcaption>At the subway with friends</figcaption></figure></p>
<p>During the way back, I made the mistake of stamping my subway ticket from the wrong end (I prefer perpetual tickets). Of course, there was a check after our brief ride, but I got away with a warning. Lesson learned, stamp the right end!</p>
<p>I hope they consider making an additional trip to the <a href="https://www.hrad-karlstejn.cz/">Karlštejn castle</a> and the nearby mines in the years to come. I went there once, and it's one of the most nicer castles you can find in Europe. It's no wonder they film movies there.</p>
<p><figure><img src="/487f78c121e9da8f489911649dc3fe3a.jpg" alt="Visiting a Mucha museum" class="" width="" height="" /><figcaption>Visiting a Mucha museum</figcaption></figure></p>
<p>I did some exploring of my own during the day I arrived in Prague. Given I have a keen interest in the art of <a href="https://en.wikipedia.org/wiki/Alphonse_Mucha">Alphonse Mucha</a> at the moment, I visited two museums featuring his art in the center of Prague. They were more focused on his commercial work, but I gained a few insights.</p>
<p>Mucha mastered design and could use the line to his advantage in composition. You can also see his culture through his works. There's something Czech about them. I wonder if his style ever actually goes out of fashion. There's something timeless, and I felt a connection to <a href="https://en.wikipedia.org/wiki/Antoni_Gaud%C3%AD">Antoni Gaudí</a>'s work.</p>
<p>I have yet to see <a href="https://en.wikipedia.org/wiki/The_Slav_Epic">the Slav Epic</a>, Mucha's masterwork, in <a href="http://www.ngprague.cz/">the National Gallery of Czech Republic</a>. That trip alone would require several days. If you love museums, you won't run out of things to do in Prague.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-event" id="the-event"></a><span class="text">The Event</span><a class="header-anchor-select" href="https://survivejs.com/#the-event">#</a></h2>
<p><figure><img src="/70a7a77dff0a2f363217ae75024a8ed2.jpg" alt="A conference speaker" class="" width="" height="" /><figcaption>A conference speaker</figcaption></figure></p>
<p>The event itself took three days. During the first two days there were up to four tracks to choose from, and occasionally there was a workshop running on the side. The third day was devoted to a single workshop, and I skipped it as it was added to the program after I had done my travel plans.</p>
<p>The challenge of a conference like this is how to provide value for every attendee. Lack of singular focus means sometimes you may have to compromise. But it's also good as then you can get insights on topics you might otherwise miss.</p>
<p>Overall, the quality of the presentations felt decent, and I confirmed a few of my hunches as a result. Particularly Joe MacLeod's, Mike Amundsen's, and the final session by Anton and Irene were worth it for me.</p>
<p><figure><img src="/758e674f65cd768f8a7dcc7bfb7d2620.jpg" alt="Conference visitors" class="" width="" height="" /><figcaption>Conference visitors</figcaption></figure></p>
<p>I was expecting to see more people at the conference as it was marketed to have two thousand people. In the end, there was perhaps half of that, and the spaces were half-empty. I don't know if it has been this way during the earlier years and I'm not complaining as I prefer smaller amounts of people (a cultural thing).</p>
<p>The conference space was split within a shopping mall. Although unorthodox, it worked quite well. I enjoyed the cinema in particular, and I was lucky enough to be able to give my presentation there.</p>
<p>The main hall had too much echo for my tastes, and it made it slightly annoying to follow the presentations. I don't know if that's something the organizers could have fixed, though, and it might be my personal preference to have less echo.</p>
<p>Despite these issues, I will likely revisit the event if it fits my schedule. Each day, and the day before the conference had an afterparty. I am not at my best at those, but it's still fun to meet new people and try to improve this weakness if nothing else. Prague seems to be the ideal place for these sort of things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#case-survivejs-bootstrapping-a-personal-lifestyle-business" id="case-survivejs-bootstrapping-a-personal-lifestyle-business"></a><span class="text">Case SurviveJS - Bootstrapping a Personal Lifestyle Business</span><a class="header-anchor-select" href="https://survivejs.com/#case-survivejs-bootstrapping-a-personal-lifestyle-business">#</a></h2>
<p><figure><img src="/f1848811a7628c485d30224eee6a1320.jpg" alt="Conference bar" class="" width="" height="" /><figcaption>Conference bar</figcaption></figure></p>
<p>My presentation, <a href="https://presentations.survivejs.com/bootstrapping-a-personal-lifestyle-business/">Case SurviveJS - Bootstrapping a Personal Lifestyle Business</a>, was about how I bootstrapped my business and changed my life as a result. Although it was on the development track, it probably should have been on the business track instead.</p>
<p>It was more of an inspirational talk rather than straight to the point "this is how to achieve the same technically". The problem is that there's no single right way and you have to learn your lessons.</p>
<p>I felt I could use the available time quite effectively and there was time for a few questions in the end. I might have focused too much on the business aspects, and I would balance the talk differently now if I gave it again. Even in its current form, I think there's still some wisdom in it people might be able to use.</p>
<p>I concluded the presentation with a simple quote: "Dare to dream, dare to try, and never give up too easily". Without dreams and willingness to push not a lot can be achieved. Sometimes you can nudge your life to the direction you want.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>It was nice for me to return to Prague. Even though I've seen the main sights of the city, it seems there's more to discover. I even found a secret bar no tourist knows. It seems like Prague has an underground world I have to discover.</p>
<p>The event itself was worthwhile and <a href="https://www.webexpo.net/prague2018/">WebExpo will return in 2018</a>. If you want to Prague while enjoying a cross-cutting event like this, WebExpo is a good pick.</p>
Kea - High level abstraction between React and Redux - Interview with Marius Andraakeahighlevelabstractionbetweenreactandreduxinterviewwithmariusandra2017-09-18t00:00:00z2017-09-18T00:00:00Z<p>Redux took the React world by a storm when it was introduced. The simple idea provided a guideline for the community and "solved" state management for a lot of different kinds of applications.</p>
<p>That said, Redux comes with a certain amount of wiring. For this reason, people have begun to explore abstractions on top of it to make it more comfortable to use without sacrificing the core benefits provided by the library.</p>
<p>Kea by <a href="https://twitter.com/mariusandra">Marius Andra</a> is one of these solutions. It provides a high-level abstraction between React and Redux.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about Redux, <a href="https://survivejs.com/blog/redux-interview">read the interview of Dan Abramov</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/6b918f21a04da6c562766a3be2626ef7?s=200" alt="Marius Andra" class="author" width="100" height="100" />
</span>
Sure! I'm Marius. I was born in Estonia and now live in Belgium. I work as the CTO of <a href="https://www.apprentus.com">Apprentus</a>, a private lessons marketplace which I co-founded. I sometimes write about life on <a href="https://mariusandra.com/blog/">my blog</a> and about coding on <a href="https://medium.com/@mariusandra">Medium</a>.
</p>
<p>I started programming in QBASIC at the ripe old age of 8 and have been hooked ever since. From BASIC I moved to C and C++ (for <a href="https://web.archive.org/web/20110727142308/http://cone3d.gamedev.net:80/cgi-bin/index.pl">2D and 3D game development</a>), Perl (<a href="http://amzn.to/2xlJzTS">cgi-bin</a> web development) and Java (when I had to build a client-server chat applet). In high school, I wrote a lot of PHP, in university a lot of Java/JSP. Eventually, I moved to Ruby, and it was my language of choice... until ES6 came out.</p>
<p>During my PHP years, I wrote vanilla JavaScript (AJAX!). Later I went with Prototype and then jQuery. I completely skipped the Angular train. When Apprentus's jQuery spaghetti-code was no longer maintainable, I bet hard on Ember, rewriting most of the frontend in it. Unfortunately, I traded one set of problems for another... and frustrated a lot of mobile users with the 10sec load times. I'll spare you the rant!</p>
<p>In November of 2015, after a month-long vacation in New Zealand, I started learning React as part of a freelance gig. That's where the story of Kea begins.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_kea_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_kea_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Kea</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_kea_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Kea is an <a href="https://www.youtube.com/results?search_query=kea+parrot">extremely smart mountain parrot</a> from New Zealand.</p>
<p>Kea is also an extremely smart abstraction between <a href="https://facebook.github.io/react/">React</a>, <a href="http://redux.js.org/">Redux</a>, <a href="https://redux-saga.js.org/">Redux-Saga</a> and <a href="https://github.com/reactjs/reselect">Reselect</a>. You may think of it either as <em>redux without the boilerplate</em> or <em>the ease of <code>setState</code> with the connectivity of Redux</em>.</p>
<p>In a nutshell, React handles your views, Kea handles your logic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_kea_-work-" id="how-does-_kea_-work-"></a><span class="text">How does <em>Kea</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_kea_-work-">#</a></h2>
<p>Almost everything you do in Kea is done with the <code>kea</code> function. You use it to:</p>
<ol>
<li>Create new logic stores (the place where your logic and data live).</li>
<li>Pull in data or actions from existing logic stores.</li>
<li>Connect logic stores to your React components.</li>
</ol>
<p>Let's look at the simplest example: a counter that can be incremented and decremented with the push of a button.</p>
<p>It's built in the "inline kea" style, where we create a logic store and immediately attach it to a React component. I'm using ES decorators here for extra smoothness, but you don't necessarily have to use them.</p>
<p>I will assume you're familiar with the concepts in Redux. If not, please check out <a href="https://survivejs.com/blog/redux-interview/">the interview with Dan Abramov</a> for some much-needed context... although you'll surely understand the code without it:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> React<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> Component <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> PropTypes <span class="token keyword keyword-from" >from</span> <span class="token string" >"prop-types"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> kea <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"kea"</span><span class="token punctuation" >;</span>
@<span class="token function" >kea</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
actions<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
increment<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> amount <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
decrement<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> amount <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
reducers<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> actions <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
counter<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token number" >0</span><span class="token punctuation" >,</span>
PropTypes<span class="token punctuation" >.</span>number<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>increment<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> payload<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
state <span class="token operator" >+</span> payload<span class="token punctuation" >.</span>amount<span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>decrement<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> payload<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
state <span class="token operator" >-</span> payload<span class="token punctuation" >.</span>amount<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >Counter</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> counter <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> increment<span class="token punctuation" >,</span> decrement <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>actions<span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div className<span class="token operator" >=</span><span class="token string" >"kea-counter"</span><span class="token operator" >></span>
<span class="token operator" ><</span>p<span class="token operator" >></span>Count<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>counter<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>p<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >increment</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Increment
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >decrement</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Decrement
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>It's all very <em>Reduxy</em>. You have actions and reducers. Both are pure functions. The code is very readable, and there's a clear separation of concerns.</p>
<p>Compare this to a standard Redux-based approach:</p>
<p><strong>constants/counter.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> INCREMENT <span class="token operator" >=</span> <span class="token string" >"INCREMENT"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> DECREMENT <span class="token operator" >=</span> <span class="token string" >"DECREMENT"</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>actions/counter.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> INCREMENT<span class="token punctuation" >,</span> DECREMENT <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"../constants/counter"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >increment</span><span class="token punctuation brackets-parentheses" >(</span>amount <span class="token operator" >=</span> <span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> INCREMENT<span class="token punctuation" >,</span>
payload<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
amount<span class="token punctuation" >:</span> amount<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >decrement</span><span class="token punctuation brackets-parentheses" >(</span>amount <span class="token operator" >=</span> <span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> DECREMENT<span class="token punctuation" >,</span>
payload<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
amount<span class="token punctuation" >:</span> amount<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><strong>reducers/counter.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> INCREMENT<span class="token punctuation" >,</span> DECREMENT <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"../constants/counter"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >counter</span><span class="token punctuation brackets-parentheses" >(</span>state <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >,</span> action<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>action<span class="token punctuation" >.</span>type<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> INCREMENT<span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> state <span class="token operator" >+</span> action<span class="token punctuation" >.</span>payload<span class="token punctuation" >.</span>amount<span class="token punctuation" >;</span>
<span class="token keyword keyword-case" >case</span> DECREMENT<span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> state <span class="token operator" >-</span> action<span class="token punctuation" >.</span>payload<span class="token punctuation" >.</span>amount<span class="token punctuation" >;</span>
<span class="token keyword keyword-default" >default</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> state<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><strong>containers/counter.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> connect <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react-redux"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> increment<span class="token punctuation" >,</span> decrement <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"../actions/counter"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> Counter <span class="token keyword keyword-from" >from</span> <span class="token string" >"../components/counter"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >mapStateToProps</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span>
counter<span class="token punctuation" >:</span> state<span class="token punctuation" >.</span>counter<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >mapDispatchToProps</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>dispatch<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-braces" >{</span>
increment<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >dispatch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >increment</span><span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
decrement<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >dispatch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >decrement</span><span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token function" >connect</span><span class="token punctuation brackets-parentheses" >(</span>
mapStateToProps<span class="token punctuation" >,</span>
mapDispatchToProps
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>Counter<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>components/counter.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> React<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> Component <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >Counter</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> counter<span class="token punctuation" >,</span> increment<span class="token punctuation" >,</span> decrement <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div className<span class="token operator" >=</span><span class="token string" >"kea-counter"</span><span class="token operator" >></span>
<span class="token operator" ><</span>p<span class="token operator" >></span>Count<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>counter<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>p<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >increment</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Increment
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >decrement</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Decrement
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><strong>store.js</strong></p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// I'll spare you this part...</span>
</code></pre>
<p>As you can see, the amount of boilerplate you save is HUGE! No more <code>mapStateToProps</code>. No more <code>export const INCREMENT = 'INCREMENT'</code>. You just write code that matters while retaining the clear functional approach that makes Redux so powerful.</p>
<p>Now, an example of this complexity can easily be written with React's own <code>setState</code>... but what if your specs change and you need access to this data from a different component? Move the state up and pass around a million props? That's not elegant enough for my taste.</p>
<p>With Kea, assuming you also need to display the value of <code>counter</code> in your header, you would do as follows:</p>
<p><strong>logic.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> PropTypes <span class="token keyword keyword-from" >from</span> <span class="token string" >"prop-types"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> kea <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"kea"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// no change to the code below</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token function" >kea</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
actions<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
increment<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> amount <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
decrement<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>amount<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> amount <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
reducers<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> actions <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
counter<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token number" >0</span><span class="token punctuation" >,</span>
PropTypes<span class="token punctuation" >.</span>number<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>increment<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> payload<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
state <span class="token operator" >+</span> payload<span class="token punctuation" >.</span>amount<span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>decrement<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> payload<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
state <span class="token operator" >-</span> payload<span class="token punctuation" >.</span>amount<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>index.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> React<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> Component <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> connect <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"kea"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> counterLogic <span class="token keyword keyword-from" >from</span> <span class="token string" >"./logic"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// pull in actions and props from logic stores</span>
@<span class="token function" >connect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
actions<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>counterLogic<span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"increment"</span><span class="token punctuation" >,</span> <span class="token string" >"decrement"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
props<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>counterLogic<span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"counter"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >Counter</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// nothing changes here</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> counter <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> increment<span class="token punctuation" >,</span> decrement <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>actions<span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div className<span class="token operator" >=</span><span class="token string" >"kea-counter"</span><span class="token operator" >></span>
<span class="token operator" ><</span>p<span class="token operator" >></span>Count<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>counter<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>p<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >increment</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Increment
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span>button onClick<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >decrement</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>
Decrement
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><strong>header.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> React<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> Component <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"react"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> connect <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"kea"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> counterLogic <span class="token keyword keyword-from" >from</span> <span class="token string" >"./logic"</span><span class="token punctuation" >;</span>
@<span class="token function" >connect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
props<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>counterLogic<span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"counter"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >Counter</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> counter <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>header<span class="token operator" >></span>
<span class="token operator" ><</span>strong<span class="token operator" >></span>Kea is awesome<span class="token operator" >!</span><span class="token operator" ><</span><span class="token operator" >/</span>strong<span class="token operator" >></span>
<span class="token operator" ><</span>span<span class="token operator" >></span>Count<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>counter<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>span<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>header<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>This magical <code>@connect(options)</code> helper is actually just a shorthand for <code>@kea({ connect: options })</code>. By replacing <code>@connect</code> with <code>@kea</code>, you can also define new actions and reducers while pulling in existing ones.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#selectors-and-side-effects-in-kea" id="selectors-and-side-effects-in-kea"></a><span class="text">Selectors and Side Effects in Kea</span><a class="header-anchor-select" href="https://survivejs.com/#selectors-and-side-effects-in-kea">#</a></h3>
<p>Kea has two other notable features:</p>
<ul>
<li>First, you may use selectors (through Reselect) to re-calculate values only when the input changes.</li>
<li>Second, you may use sagas for side-effects. Please read the documentation for <a href="https://redux-saga.js.org">redux-saga</a> to learn more.</li>
</ul>
<p>The <a href="https://kea.js.org/guide/github">Github API</a> example is a good demonstration of both features:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> githubLogic <span class="token operator" >=</span> <span class="token function" >kea</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
actions<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
setUsername<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>username<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> username <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
setRepositories<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>repositories<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> repositories <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
reducers<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> actions <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
username<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >"keajs"</span><span class="token punctuation" >,</span>
PropTypes<span class="token punctuation" >.</span>string<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>setUsername<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>_<span class="token punctuation" >,</span> payload<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
payload<span class="token punctuation" >.</span>username<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
repositories<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
PropTypes<span class="token punctuation" >.</span>array<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>setUsername<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>setRepositories<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>_<span class="token punctuation" >,</span> payload<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
payload<span class="token punctuation" >.</span>repositories<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
selectors<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> selectors <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// this will only be updated if "repositories" change.</span>
sortedRepositories<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-square" >[</span>selectors<span class="token punctuation" >.</span>repositories<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-parentheses" >(</span>repositories<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span>
repositories<span class="token punctuation" >.</span><span class="token function" >sort</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token punctuation brackets-parentheses" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> b<span class="token punctuation" >.</span>stargazers_count <span class="token operator" >-</span> a<span class="token punctuation" >.</span>stargazers_count
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
PropTypes<span class="token punctuation" >.</span>array<span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// every time a "setUsername" action is called,</span>
<span class="token comment" spellcheck="true" >// run the "fetchRepositories" worker</span>
takeLatest<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> actions<span class="token punctuation" >,</span> workers <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
<span class="token punctuation brackets-square" >[</span>actions<span class="token punctuation" >.</span>setUsername<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >:</span> workers<span class="token punctuation" >.</span>fetchRepositories<span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
workers<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token operator" >*</span><span class="token function" >fetchRepositories</span><span class="token punctuation brackets-parentheses" >(</span>action<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> setRepositories <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>actions<span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> username <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> action<span class="token punctuation" >.</span>payload<span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >delay</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >100</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// debounce for 100ms</span>
<span class="token keyword keyword-const" >const</span> url <span class="token operator" >=</span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>API_URL<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >/users/</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>username<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >/repos?per_page=250`</span></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> response <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> window<span class="token punctuation" >.</span><span class="token function" >fetch</span><span class="token punctuation brackets-parentheses" >(</span>url<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> json <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> response<span class="token punctuation" >.</span><span class="token function" >json</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >setRepositories</span><span class="token punctuation brackets-parentheses" >(</span>json<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i>Please dive into the <a href="https://kea.js.org">Kea documentation</a> to learn more!</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_kea_-differ-from-other-solutions-" id="how-does-_kea_-differ-from-other-solutions-"></a><span class="text">How does <em>Kea</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_kea_-differ-from-other-solutions-">#</a></h2>
<p>I wrote an <a href="https://medium.com/@mariusandra/kea-vs-setstate-redux-mobx-dva-jumpstate-apollo-etc-4aa26ea11d02">article on Medium describing how Kea differs from Redux</a>, MobX, DVA and other state management solutions. Please check it out for details! :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_kea_-" id="why-did-you-develop-_kea_-"></a><span class="text">Why did you develop <em>Kea</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_kea_-">#</a></h2>
<p>In late 2015 I got a freelance gig, where my job was to code part of a fleet tracking solution. I was told to use React and Redux and given free reign over what other libraries I would use, how I would structure the code, etc. My employer tasked me with finding the best combination of React and Redux. The solution needed to be extremely verbose and maintainable since I would not stay on the project forever.</p>
<p>So I started looking, reading, experimenting, rewriting and inventing. There was scarce documentation on how to structure a React and Redux application. Most guides recommended the <code>actions/counter.js</code>, <code>constants/counter.js</code>, <code>reducers/counter.js</code>, etc. approach. I knew from my Ember days that this is a disaster and strongly preferred a features-based approach (<code>counter/actions.js</code>, <code>counter/constants.js</code>, etc.).</p>
<p>I tried and replaced many libraries, until I ended up with a combination of redux, reselect, redux-act and redux-saga... The resulting folder structure combined better ideas from the ducks approach and a <code>scenes</code> folder from the <a href="https://tonyhb.gitbooks.io/redux-without-profanity/content/hard_and_fast_rules_for_apps.html">Redux without Profanity</a> book.</p>
<p>I wrote several helper functions to group actions, reducers and selectors into what I called "logic stores" and built glue to connect them to react components. I also wrote helpers that added sagas to the mix.</p>
<p>Eventually, I released all of it under the name <code>Kea</code> with no fanfare. The developers who knew it were hooked and quickly adopted it in their projects, but nobody else knew about it.</p>
<p>Since Kea turned out to be so useful for us, I decided to write documentation, develop tests and add features necessary for a proper release. And here we are!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>For Kea, the near-term goal is to develop an extension system, which would let one choose between sagas with <code>redux-saga</code> and epics with <code>redux-observable</code> for side effects or even let you use both at the same time (<a href="https://github.com/keajs/kea/issues/40">Issue #40</a>). Of course, such a plugin system would open up other possibilities.</p>
<p>The ultimate goal is to stabilize the API for a 1.0 release. For this, we need as many people to test things as possible. So please try it out and send feedback! :)</p>
<p>For myself, once Kea hits a stable 1.0, I plan to shift my open source efforts to <a href="https://github.com/mariusandra/insights">Insights</a>, a "Desktop and Self-Hosted SQL-not-required data analytics and visualization tool". I have big plans for it but had to neglect it for a few months in favor of Kea.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_kea_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_kea_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Kea</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_kea_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I've been wrong before with my technological predictions (JSP and Makumba are the new Ruby on Rails! Ember 4 ever!), so I'm hesitant to make bold claims.</p>
<p>That said, based on my experience moving from Ember to React and Redux, it felt like a whole new world opened before my eyes. Switching from an imperative paradigm to a functional one was counter-intuitive at first, but worth it. Who would have guessed that by limiting a number of operations I'm allowed to perform on my data, my code becomes simpler to read and mostly bug-free!</p>
<p>Functional programming has been around for a very long time, but it was never as mainstream as it is now. When you get into functional programming, you become a better programmer, no matter the language or paradigm. React brought this to the masses. In my mind, this will be its greatest legacy.</p>
<p>The difference between functional and imperative in frontend development is analogous to what <a href="http://www.paulgraham.com/avg.html">Paul Graham said about Lisp</a>:</p>
<blockquote>
<p><em>"During the years we worked on Viaweb, I read a lot of job descriptions. A new competitor seemed to emerge out of the woodwork every month or so. The first thing I would do, after checking to see if they had a live online demo, was look at their job listings. After a couple of years of this, I could tell which companies to worry about and which not to. The more of an IT flavor the job descriptions had, the less dangerous the company was. The safest kind were the ones that wanted Oracle experience. You never had to worry about those. You were also safe if they said they wanted C++ or Java developers. If they wanted Perl or Python programmers, that would be a bit frightening - that's starting to sound like a company where the technical side, at least, is run by real hackers. If I had ever seen a job posting looking for Lisp hackers, I would have been really worried."</em></p>
</blockquote>
<p>Writing frontend code with React and Kea feels like writing Lisp when all of your competitors are stuck with Java.</p>
<p>I expect this trend towards functional programming to continue.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I would show them the example of <a href="https://jenniferdewalt.com/">Jennifer Dewalt</a>.</p>
<p>One summer morning, four years ago, I stumbled upon a post in HN titled "<a href="http://blog.jenniferdewalt.com/post/56319597560/im-learning-to-code-by-building-180-websites-in">I’m learning to code by building 180 websites in 180 days. Today is day 115</a>".</p>
<p>It's an amazing story. The author started with no skills in web development and went on to build <a href="https://jenniferdewalt.com/algae_tank/board">amazing</a> <a href="https://jenniferdewalt.com/minesweeper/game">examples</a> all because she stuck with it and didn't give up.</p>
<p>It's been demonstrated that the main difference between people who make it and people who don't is grit (<a href="http://amzn.to/2wgAsEK">read the book!</a>). This is the willingness to push through no matter what.</p>
<p>Combine grit with deliberate practice and <a href="https://mariusandra.com/blog/2014/01/how-to-be-productive/">compound effects</a> and you'll be unstoppable!</p>
<p>So my advice for you is this: learn a bit, but learn often. Make a plan that for every day for the next 30 days, you will read 15 min of any programming tutorial, listen to 15 min of <a href="https://changelog.com/">the changelog</a> or a watch 15 min of a good screencast.</p>
<p>Once you're done for the day, draw a big red X in your calendar. Continue like this for 30 days and set up a system that makes it <a href="https://mariusandra.com/blog/2012/05/make-your-success-inevitable-and-lose-weight/">inevitable</a> that you succeed. For example, tell a friend that every day in the next 30 days you skip your 15 min of coding, you'll pay them 50 €.</p>
<p>You won't skip a day, and after 30 days, the habit of daily coding will be so ingrained, it will be hard to break. And you will have grown a lot!</p>
<p>That's my advice.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Everyone I thought about has already been interviewed! :).</p>
<p>Perhaps <a href="https://twitter.com/_developit">Jason Miller</a>, the guy behind Preact?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Please try out <a href="https://kea.js.org">Kea</a> and help make the React+Redux world a better place!</p>
<p>Oh, and if you found any of this useful, don't forget to <a href="https://github.com/keajs/kea">give kea a star on Github</a>! It would mean a lot to me!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Marius! Kea seems to hit a nice balance in API design. You can get the power of Redux without all the wiring.</p>
<p>To learn more, <a href="https://kea.js.org/">head to Kea site</a>, see also <a href="https://github.com/keajs/kea/">Kea on GitHub</a>. Marius also wrote <a href="https://medium.com/@mariusandra/kea-vs-setstate-redux-mobx-dva-jumpstate-apollo-etc-4aa26ea11d02">a comparison between Kea and alternatives</a>.</p>
Experiences on React Next 2017aexperiencesonreactnext20172017-09-15t00:00:00z2017-09-15T00:00:00Z<p>I had the privilege to participate in <a href="http://react-next.com/">React Next 2017</a> as an invited speaker. Participation gave me a good chance to learn more about Israel and also a good excuse to showcase webpack to a wider audience. I also gave a surprise talk about my site generator before the event and even sponsored it a bit.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#surprise-meetup" id="surprise-meetup"></a><span class="text">Surprise Meetup</span><a class="header-anchor-select" href="https://survivejs.com/#surprise-meetup">#</a></h2>
<p>We arranged a small <a href="https://www.meetup.com/React-IL/events/243139610/">surprise meetup</a> before the event. In addition to <a href="https://presentations.survivejs.com/antwar-site-generator/">my presentation about Antwar</a>, the plan was to have Kyle present <a href="https://www.gatsbyjs.org/">Gatsby</a>. Sadly he had problems with his flight, and we ended up having only my presentation and a QA with another speaker in the end.</p>
<p>I tried to keep the talk simple, but in the end, it was likely too technical for most people. If I ever get to present it again, I'll reduce the difficulty level a notch and show how to build an entire site using it. The main problem is that I didn't design it usability in mind. It's more about flexibility.</p>
<p>Developing something like <strong>create-react-site</strong> on top of Antwar would likely alleviate this problem, but I don't want to maintain something like that as it could become famous.</p>
<p>To be honest, I would look into alternatives like <a href="https://www.gatsbyjs.org/">Gatsby</a> and <a href="https://phenomic.io/">Phenomic</a> over Antwar. I designed Antwar around my use cases, and there's no community around it. I prefer the current situation, though, as maintaining a popular tool becomes a chore soon.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#tour-of-israel" id="tour-of-israel"></a><span class="text">Tour of Israel</span><a class="header-anchor-select" href="https://survivejs.com/#tour-of-israel">#</a></h2>
<p><figure><img src="/22396f0b55e860aabcf990b455241263.jpg" alt="Jerusalem" class="" width="" height="" /><figcaption>Jerusalem</figcaption></figure></p>
<p>All the speakers were invited to a <a href="http://react-next.com/tour/">two-day tour of Israel</a>. We spent time in the old city of Jerusalem first. After that, we headed to a "bedouin camp" where we rode camels and slept through the night.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Unless you prefer excitement, <strong>don't</strong> ride the first camel.</blockquote><p><figure><img src="/33d20a098886215d1cb465bfc0343228.jpg" alt="Sunrise at the desert" class="" width="" height="" /><figcaption>Sunrise at the desert</figcaption></figure></p>
<p>Especially the sunset and sunrise were magical. I happened to wake up early enough to enjoy a short morning run. That was truly a unique experience and one of the highlights of the entire trip for me. Sometimes you find the best things outside of the official program.</p>
<p><figure><img src="/05ff66b0586a95463cace9fce2ef8650.jpg" alt="Masada" class="" width="" height="" /><figcaption>Masada</figcaption></figure></p>
<p>We spent the second day of the tour exploring the fortress at Masada. Once you get there, you realize whey they built one there roughly two thousand years ago. The visit was again one of those memorable experiences that will remain with me.</p>
<p><figure><img src="/dd94f57518e22f8a7b6319a126513a5d.jpg" alt="Masada" class="" width="" height="" /><figcaption>Masada</figcaption></figure></p>
<p>After visiting the fortress, we headed to the Dead Sea. It was nice to see but to be honest, it wasn't my favorite place. That said, now I can say I've gone there and done that.</p>
<p><figure><img src="/d296c4183d2456013e2b735daf38f7ee.jpg" alt="Tel Aviv art museum" class="" width="" height="" /><figcaption>Tel Aviv art museum</figcaption></figure></p>
<p>I did touring of my own after the main event. Especially the art museum is a treat if you like modern architecture combined with nice exhibitions ranging from modern art to classics.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-event" id="the-event"></a><span class="text">The Event</span><a class="header-anchor-select" href="https://survivejs.com/#the-event">#</a></h2>
<p><figure><img src="/b4c521a6df50e14f05a288fa3b8ada6f.jpg" alt="React Next 2017" class="" width="" height="" /><figcaption>React Next 2017</figcaption></figure></p>
<p><a href="http://react-next.com/schedule/">The event itself</a> was professionally organized. There were roughly 700 people this year, and the atmosphere was amazing. The two tracks were filled with speakers from all around the world with primarily React related topics. Overall the quality of the talks was high although I skipped most.</p>
<p>My talk, <a href="https://presentations.survivejs.com/webpack-the-react-parts/">Webpack - The React Parts</a>, was a bit of a challenge for me. I tried to condense as many little techniques within the thirty minutes I had, and I like to think I succeeded to some extent in this goal. My only gripe is that I ruined the last topic, <strong>Universal Apps</strong>, slightly due to time pressure.</p>
<p>The live coding portion of the presentation went mostly smoothly although I had to <code>npm install</code> at a certain point. That's scary to do while on stage.</p>
<p>I also managed to sneak in a couple of dry jokes in the presentation. I don't know how I do it. I try my best to be as unfunny as possible, yet this always happens.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://github.com/survivejs-demos/webpack-the-react-parts">The presentation demo</a> could be pushed further by moving the code to use Preact and using a CDN. There's also potential for smarter code splits.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I think the trip was a success overall. I was given a chance to see a strange new country and perhaps make some new friends. I have a greater appreciation for a cool climate now at least, and I can see Israel in a more realistic light than before. Perhaps I will travel back there one day!</p>
FrintJS - Build reactive applications with React and RxJS - Interview with Fahad Ibnay Heylaalafrintjsbuildreactiveapplicationswithreactandrxjsinterviewwithfahadibnayheylaal2017-09-06t00:00:00z2017-09-06T00:00:00Z<p>React gives a lot of freedom by default. You can choose which libraries to use to complement it. Freedom comes with responsibility, though. Now you are responsible for your decisions.</p>
<p><a href="https://frint.js.org/">FrintJS</a> by <a href="https://twitter.com/fahad19">Fahad Ibnay Heylaal</a> and his company has developed a framework that brings certain opinions around React and helps to alleviate some of the problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/19a3655e6ba9e5a496ee690ba03f2180?s=200" alt="Fahad Ibnay Heylaal" class="author" width="100" height="100" />
</span>
Currently living in Amsterdam and working as a software engineer at <a href="https://www.travix.com/">Travix</a>. For the last few years, I have been focusing on JavaScript a lot. And never felt bored for a single day since!
</p>
<p>I enjoy being involved with Open Source activities. Not just the coding part, but all the other opportunities it brings along with it too. I feel a lot of good things have happened in my life because of the people I got to know through Open Source. And whenever I can, I try to contribute meaningfully back to the community that's giving us all so much on a regular basis.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_frint_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_frint_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Frint</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_frint_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://frint.js.org">FrintJS</a> is ultimately a collection of packages that help you build reactive applications in a scalable way. It is modular by nature and helps provide your application structure. If you look at our <a href="https://github.com/Travix-International/frint">monorepo</a>, everything is broken down into small packages. You use only the packages you need to build your application - either in the <a href="https://frint.js.org/docs/packages/frint-react/">browser</a>, <a href="https://frint.js.org/docs/packages/frint-react-server/">server</a> or <a href="https://frint.js.org/docs/packages/frint-cli/">CLI</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_frint_-work-" id="how-does-_frint_-work-"></a><span class="text">How does <em>Frint</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_frint_-work-">#</a></h2>
<p>FrintJS has this concept of <a href="https://frint.js.org/guides/apps/">Apps</a>. Everything is contained within an App. And Apps can contain various things in the form of <a href="https://frint.js.org/guides/providers/">Providers</a>, which is backed by a dependency injection system.</p>
<p>There has to be a single Root App, and then there can be multiple Child Apps registering themselves to the Root one:</p>
<p><figure><img src="/c46e6de0598e9807cd5fc39899cd7e66.png" alt="FrintJS apps" class="" width="" height="" /><figcaption>FrintJS apps</figcaption></figure></p>
<p>If they are meant for rendering, they can also pass options for targeting different <a href="https://frint.js.org/guides/regions/">Regions</a> (areas where Apps are expected to be mounted) during registration.</p>
<p>Code splitting is another primary thing we needed to tackle, and you can see here how different Apps can be loaded targeting different regions, which are coming from separate bundles:</p>
<p><figure><img src="/6ee4aec0aaece8c61c0a7512e69217db.png" alt="FrintJS regions" class="" width="" height="" /><figcaption>FrintJS regions</figcaption></figure></p>
<p>It has a flexible dependency injection system, and rendering is entirely an optional thing. We use React, that's why we built <a href="https://frint.js.org/docs/packages/frint-react/"><code>frint-react</code></a> too in our monorepo so that we can connect our Apps with React nicely.</p>
<p>If someone wants to use a different library for rendering, they are completely free to do so. We tried hard not to lock ourselves in.</p>
<p>In fact, I recently released <a href="https://github.com/frintjs/frint-vue"><code>frint-vue</code></a> for Vue.js integration with Frint.</p>
<p>If you are working with components, then FrintJS encourages you to keep the logic outside of your components as much as possible, and only pass the props as a stream to it, so the component is only responsible for rendering and nothing else.</p>
<p><figure><img src="/96aa65c7c17b2c54413f4114ea9f3a1a.png" alt="props-stream" class="" width="" height="" /><figcaption>props-stream</figcaption></figure></p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://medium.com/@fahad19/using-rxjs-with-react-js-part-i-introduction-4d027ef55aa6">You can read a blog series about RxJS and React to learn more.</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_frint_-differ-from-the-other-solutions-" id="how-does-_frint_-differ-from-the-other-solutions-"></a><span class="text">How does <em>Frint</em> differ from the other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_frint_-differ-from-the-other-solutions-">#</a></h2>
<p>It's hard to compare with any other solutions since FrintJS takes a simple and unique approach. It is not a full featured framework like AngularJS or EmberJS, but rather gives you a set of solid building blocks that you can grow your application up on. FrintJS provides tools that help you break your large applications into smaller apps, that you can assemble on demand.</p>
<p>You can say that it differs mainly from other frameworks, by not locking itself into any specific rendering or templating library. And also by not targeting any specific platform: browser, server or CLI. It just works everywhere.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_frint_-" id="why-did-you-develop-_frint_-"></a><span class="text">Why did you develop <em>Frint</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_frint_-">#</a></h2>
<p>At Travix, we already have our front-end application built with React. We were one of the early adopters of React, and things have grown big over the years.</p>
<p>There are multiple teams continuously working on the same repository, and it has resulted in a pretty large monolith over time.</p>
<p>We realized we have a scaling issue. Regarding distributing the work to individual teams, and also performance-wise when it comes to bundling the whole application in our CI-server in one go.</p>
<p>We did some proof-of-concepts for solving the various issues we had, and one of them ended up becoming FrintJS. Now that we have this concept of <a href="https://frint.js.org/guides/apps/">Apps</a>, each team can maintain their app in their repository. And from the server's perspective, we can load only the apps we want (targeting URLs, etc.) and render them in the browser.</p>
<p>There was also a need for control over what dependencies become available to all the teams. We want to ship as less code as possible to the browser, and we wanted to put a constraint on us by limiting ourselves to using FrintJS only. Besides Frint packages, we currently have a hard dependency on <code>lodash</code>, <code>react</code>, and <code>rxjs</code> only.</p>
<p>This control also gives us an advantage over backwards compatibility, and we do take it seriously. Whenever we make changes, we move the removed features to <code>frint-compat</code> package, and they are supported with deprecated warnings for at least one quarter. Doing this gives our teams enough time to migrate.</p>
<p>A lot of our particular problems have been solved by FrintJS for us, but we always made sure that we addressed them in as generic way as possible. So that it doesn't just help us in one single project, but in as many other projects by us and others outside of Travix too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>It has been almost a year that we are running FrintJS in production. The project has evolved a lot based on our learnings from production experience. And it will continue to grow as we face new challenges. Since the release of v1.0 earlier this year, we consider the project to be stable enough, and now we are building new packages around the core of the framework as we need them.</p>
<p>Besides that, we feel that it could do better if others find out about it too, and give it a go. That way, it will help us make the project even better with fresh new ideas.</p>
<p>We always try to communicate what's coming next on our <a href="https://github.com/Travix-International/frint/wiki/Roadmap">Roadmap</a> publicly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_frint_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_frint_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Frint</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_frint_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>FrintJS is young, and so far it has mostly been guided forward by the production needs of Travix. But I feel as more people find out about it, it will continue to grow even stronger and build a community alongside the current group of <a href="https://github.com/Travix-International/frint/graphs/contributors">contributors</a> too. Then things will happen that may even surprise us, positively :)</p>
<p>As for web development in general, it has never looked more exciting than now. And it just keeps on getting more and more exciting over time.</p>
<p>Currently, React, and its ecosystem seems to be winning. And it has done an excellent job at advertising functional programming more positively to a wider audience. But it is the ecosystem around it that excites me even more. So many experiments are being done by everyone, that just pushes the norm even harder every day, forcing us to think differently. And that's just amazing.</p>
<p>We are a big fan of reactive programming at Travix, and I feel RxJS could get a bit more boost from more influential developers in the community. We bet big on RxJS with FrintJS ourselves, and a lot of hard problems have become easier for us to solve once we started thinking reactively. And I think the next big shift we will see in web development is a majority of the developers adopting RxJS or similar libraries for doing reactive programming.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Web development has evolved a lot over the last 4-5 years. And it really can be overwhelming for anyone new going into it for the first time and trying to figure out what is happening at the moment.</p>
<p>My first advice would be to stay patient. You don't have to learn everything in one go. There are so many things to learn. The best way is to find something to build and enjoy doing it. Figure out what you need to learn to build it along the way. It can be a blog, a todo list, or a two-column layout. It can be anything, no matter how big or small, as long as you enjoy building it.</p>
<p>I have seen many suggest to newcomers to always focus on learning the basics first, then get into frameworks and advanced libraries to build stuff. While this is a pretty good advice, I think this can also bore away some newcomers.</p>
<p>If you are learning from absolute zero, and want to feel and stay motivated, you would want to reward yourself quickly with visible results too. Otherwise, you may just stop with all your efforts.</p>
<p>This is where I feel things like <a href="http://yeoman.io/">Yeoman</a>, <a href="https://github.com/facebookincubator/create-react-app"><code>create-react-app</code></a>, and online code editors like <a href="http://codesandbox.io/">CodeSandbox</a>, etc. are doing a great job at least in the JavaScript scene.</p>
<p>These tools enable you to get started with advanced stuff, without having to spend too much time in just setting things up if you are only interested in trying things out. Newcomers would do better if they find out about these tools early on.</p>
<p>One advice that I received myself from others is to find influential developers in the community, and follow them on Twitter, read their blogs, and see what they are up to. Doing this has worked wonders for me myself at least. It's a great way to feel inspired every day and stay motivated by keeping track of the cool stuff they are talking about.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have been using <a href="https://github.com/wooorm/alex">alex</a>, by <a href="https://github.com/wooorm">wooorm</a> in FrintJS for helping us write better documentation by catching insensitive words early in an automated way. He has been working on some other natural language processing tools too with JavaScript. I would be curious to know more about his latest work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I must mention and thank all the <a href="https://github.com/Travix-International/frint/graphs/contributors">contributors</a> who helped grow this project, and the teams working at Travix who are not on the GitHub contributors list directly but still kept providing valuable feedback to guide this project towards a better direction continuously. Because of those teams, FrintJS as an Open Source project had the good fortune of having production users from day one.</p>
<p>If you have any questions or feedback, feel free to <a href="http://fahad19.com">contact me directly</a>, and am pleased to hear what you have to say about FrintJS.</p>
<p>And many thanks to Juho for organizing this, and helping spread the word about <a href="https://frint.js.org">FrintJS</a>!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Fahad! I hope people find FrintJS and perhaps even adopt it in their work.</p>
<p>You can learn more at <a href="https://frint.js.org/">FrintJS site</a>. See also <a href="https://github.com/Travix-International/frint">FrintJS GitHub</a>.</p>
Neutrino - Create modern JavaScript applications with minimal configuration - Interview with Eli Perelmananeutrinocreatemodernjavascriptapplicationswithminimalconfigurationinterviewwitheliperelman2017-08-28t00:00:00z2017-08-28T00:00:00Z<p>Setting up a project can require a significant amount of effort if you want to control every single detail. This might be one reason why there are so many boilerplates out there as people tend to have different tastes.</p>
<p>To make things easier, <a href="https://twitter.com/eliperelman">Eli Perelman</a> has developed a solution on top of webpack.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/8dc4af17fcbc9d8c1919462680e46c5a?s=200" alt="Neutrino" class="author" width="100" height="100" />
</span>
I started learning to program when I was 13 or 14, back in 1996. And yes, JavaScript was the first language I ever learned. It sparked a love of the web and development that continues to this day. All in all, I've been doing professional development for about 12 years.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-neutrino-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-neutrino-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Neutrino</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-neutrino-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Neutrino is a tool that helps you build modern JavaScript applications without having to go through the initial configuration work of setting up webpack. You can install it along with a relevant preset and start writing an app or tool, but you can still customize your build process completely when the need arises.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-neutrino-work-" id="how-does-neutrino-work-"></a><span class="text">How does <em>Neutrino</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-neutrino-work-">#</a></h2>
<p>Neutrino utilizes webpack under the hood for building projects by augmenting it with knowledge about <em>build middleware</em>. Neutrino middleware are discrete pieces of webpack configuration that use a custom configuration API. You can compose many of these middleware together into custom presets, and each will modify the build accordingly.</p>
<p>Take Neutrino's <a href="https://www.npmjs.com/package/neutrino-preset-react">React preset</a> as an example. This preset glues together
several other pieces of Neutrino middleware that do things like perform Babel compilation, Hot Module Replacement, add loaders for many different file types, development servers, and minification, just to name a few.</p>
<p>Each piece of middleware illuminates part of the possibilities inherent in a project based on the React preset. Additionally, anyone can augment the preset with their middleware, presets, and custom configuration to suit their tastes.</p>
<p>Getting started with Neutrino is easy, using either Yarn or npm. As an example, here's a quickstart for a React project (using Yarn for brevity):</p>
<pre><code class="lang-bash">yarn add react react-dom
yarn add --dev neutrino neutrino-preset-react
<span class="token keyword keyword-echo" >echo</span> <span class="token string" >'import React from "react";'</span> <span class="token operator" >>></span> src/index.js
<span class="token keyword keyword-echo" >echo</span> <span class="token string" >'import { render } from "react-dom";'</span> <span class="token operator" >>></span> src/index.js
<span class="token keyword keyword-echo" >echo</span> <span class="token string" >'render(<h1>hello world</h1>, document.getElementById("root"));'</span> <span class="token operator" >>></span> src/index.js
yarn neutrino -- start --use neutrino-preset-react
✔ Development server running on: http://localhost:5000
✔ Build completed
</code></pre>
<p>Open a browser to localhost:5000, and you are ready to go!</p>
<p>To make some of this possible, we had to create our webpack configuration API, called <a href="https://github.com/mozilla-neutrino/webpack-chain">webpack-chain</a>. As you may know, webpack exposes a low-level configuration format, but this format isn't well-suited for merging configuration deterministically across middleware, or even across many projects. With webpack-chain, we expose a chainable or fluent API for aggregating a webpack configuration which is much more deterministic.</p>
<p>The above can be done by accessing the Neutrino API from a <code>.neutrinorc.js</code> file, which Neutrino can pick up automatically. You can also move the middleware Neutrino <code>use</code>s to this file to shorten up your command to <code>neutrino start</code>.</p>
<pre><code class="lang-js"><span class="token comment" spellcheck="true" >// .neutrinorc.js</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
use<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-square" >[</span><span class="token string" >'neutrino-preset-react'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Override the page title</span>
html<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Enterprise 2.0'</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// Override the Babel configuration for the React preset</span>
babel<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
presets<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-square" >[</span><span class="token string" >'babel-preset-env'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
targets<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
browsers<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >'last 1 Chrome versions'</span><span class="token punctuation" >,</span>
<span class="token string" >'last 1 Firefox versions'</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// Even completely override the webpack configuration</span>
<span class="token comment" spellcheck="true" >// using the webpack-chain API</span>
<span class="token punctuation brackets-parentheses" >(</span>neutrino<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
neutrino<span class="token punctuation" >.</span>config
<span class="token punctuation" >.</span><span class="token function" >entry</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'vendor'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >add</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'react'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >add</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'react-dom'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>At this point, you can start your app using <code>neutrino start</code> or add a script to your <code>package.json</code> to be able to more easily run it from your command line.</p>
<p>It's easy to add linting and testing to your project that also can consume Neutrino middleware and presets:</p>
<pre><code class="lang-bash">yarn add --dev neutrino-preset-airbnb-base neutrino-preset-jest
</code></pre>
<pre><code class="lang-js"><span class="token comment" spellcheck="true" >// .neutrinorc.js</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
use<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >'neutrino-preset-airbnb-base'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-square" >[</span><span class="token string" >'neutrino-preset-react'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
html<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
title<span class="token punctuation" >:</span> <span class="token string" >'Enterprise 2.0'</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token string" >'neutrino-preset-jest'</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>When running <code>neutrino start</code>, you'll see linting errors, with no upfront configuration. If you create some tests, you can run those with <code>neutrino test</code> and they will be run using the same configuration, using the test middleware you have chosen. With <code>neutrino build</code> you can output compiled static assets for production deployment.</p>
<p>For advanced cases, Neutrino even supports running custom commands that can consume the same configuration that webpack does. It has proven for us to be a pretty robust solution.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-neutrino-differ-from-other-solutions-" id="how-does-neutrino-differ-from-other-solutions-"></a><span class="text">How does <em>Neutrino</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-neutrino-differ-from-other-solutions-">#</a></h2>
<p>When I compare Neutrino to other tools, I usually break them down into either boilerplates or CLI tools, and I would like to contrast them separately.</p>
<p>First, while boilerplates are great for getting a project up and running quickly, over time, you may run into difficulties with the build system being tightly coupled to the application repository. As you make commits to your project, it is often hard or impossible to apply updates from the upstream boilerplate, which could include crucial bug fixes.</p>
<p>Every new project you start means you need to copy the build configuration from existing projects, and eventually, this becomes tough to maintain. We experienced this pain first-hand with several Mozilla projects.</p>
<p>Second, there are some fantastic projects out there like Create React App, preact-cli, nwb, and much more that avoid the boilerplate problem but at the expense of some other tradeoffs. Your configuration could be black-boxed and not able to be modified. They could force you to eject your configuration, making maintenance of the entire build dependency tree and configuration your responsibility again, and also preclude future configuration updates.</p>
<p>Each separate type of project needs its build configuration, and therefore you may need to install a different CLI tool for several different types of frameworks. The configuration you make for one type of project may not be usable in a different kind of project, leaving you to maintain these separately. Not to mention, creating a common and shareable configuration for all of these projects is not possible.</p>
<p>At Mozilla, we started down this route too and ran into these same problems. In the original implementation, I had created something <em>very</em> similar to Create React App, but found configuration very messy, and by putting dependencies like React behind our dependency, users couldn't update React without also updating our CLI tool.</p>
<p>Neutrino attempts to address all of these problems with minimal tradeoffs. Couple this with the fact that Neutrino is project <em>and</em> target agnostic, i.e. you can build web apps, libraries, and even Node.js projects with it, you hopefully can see its potential to solve many headaches some of us have been fighting against.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-neutrino-" id="why-did-you-develop-neutrino-"></a><span class="text">Why did you develop <em>Neutrino</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-neutrino-">#</a></h2>
<p>As I alluded to, creating some of our front-end projects as Mozilla ran into some problems. We wanted to use a modern JavaScript feature set and build toolchain across many projects, but webpack didn't easily allow us to share this across those projects while still allowing individual configuration along the way. At least this was not achievable in a very deterministic way.</p>
<p>Our first attempt at solving this ended up with a project that worked well enough for starting new React projects, but fell flat when integrating into existing projects, or if you wanted to keep its underlying dependencies up to date.</p>
<p>We had tightly-coupled the application dependencies along with those of our build chain, which seemed OK at first, but led to upgrading issues later. Neutrino was born out of this mistake, and manifests one of our core tenets: <em>don't mix application dependencies with those of the build system.</em></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>webpack development moves quickly, and we want to keep up with that in Neutrino as well. We are moving to release v7 soon which will support webpack v3 and its improvements. We continue to refine our configuration API to make one-off changes and middleware easier for anyone to create and publish.</p>
<p>I also want to work more with some of the framework authors and contributors out there to see if Neutrino can be a good fit for their users, and reduce the proliferation of boilerplates and CLI tools into something more universal and reusable for everyone.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-neutrino-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-neutrino-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Neutrino</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-neutrino-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think web development is in a fascinating place right now. The Web is trying to compete with native applications, and this is a battle I believe the Web will <em>eventually</em> win. The rise of new JavaScript libraries and frameworks are pushing us into another period of discovery of what is and isn't possible for the Web right now.</p>
<p>I believe the work being done on Progressive Web Apps is shedding light here, and clarifying that the platform in incomplete but getting better. I also see WebAssembly as the long-term future of web development.</p>
<p>I can't predict the future of development, but I do believe that webpack and Neutrino are on the right course for a while to come. As long as developers want to use cutting edge features, integrated development workflows, and need a fully-featured build toolchain for the Web, I think webpack and Neutrino are well-suited to tackle these obstacles.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>My spark in web development came when I found it fascinating that I could write some text and control my computer with it. If you have a passion for these technologies as well, build something. Anything. Tinker with the Web, with JavaScript, and see what you can create.</p>
<p>Don't let the complexity get to you. Don't let the vast breadth of content get to you. These things will come with time. What's important is to get your feet wet and learn. I try and learn something new every day, and as long as you strive to continue learning, you can only grow from here.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think Guillermo Rauch would be a great person to interview. His work with Zeit, Next.js, now, and past projects is epic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for taking the time to read through my opinions and comments. I appreciate everyone in our community and hope I can push the Web forward, while it pushes me too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Eli! I think a lot of people share the same pain of configuration as you and Mozilla and Neutrino definitely seems like one way to solve it.</p>
<p>To learn more, <a href="https://neutrino.js.org/">check out Neutrino site</a> and <a href="https://github.com/mozilla-neutrino/neutrino-dev">Neutrino GitHub page</a>.</p>
Idyll - Narratives for the web - Interview with Matthew Conlenaidyllnarrativesforthewebinterviewwithmatthewconlen2017-08-21t00:00:00z2017-08-21T00:00:00Z<p>Since the early days of the web, people have wanted to visualize data to share with others. Even though the platform provides something basic for these purposes (i.e., tables, images), typically some amount of programming has been required.</p>
<p><a href="https://idyll-lang.github.io/">Idyll</a> by <a href="https://twitter.com/mathisonian">Matthew Conlen</a> is a tool designed to make data visualization in documents easier.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/e7129cf31550559f7eb9757cfbeea1d1?s=200" alt="Matthew Conlen" class="author" width="100" height="100" />
</span>
I'm currently working on my Ph.D. with <a href="https://homes.cs.washington.edu/~jheer/">Jeffrey Heer</a> at the <a href="https://idl.cs.washington.edu/">Interactive Data Lab</a> at the University of Washington. Prior to grad school I worked on data visualization tools and interactive stories at <a href="http://fivethirtyeight.com/">FiveThirtyEight</a>, helped <a href="https://www.janelia.org/our-research/former-labs/freeman-lab">the Freeman Lab</a> build open-source tools for computational neuroscience, developed digital tools for journalists at <a href="http://www.huffingtonpost.com/">The Huffington Post</a>, and was the senior developer at <a href="http://rhizome.org/">Rhizome</a>.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_idyll_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_idyll_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Idyll</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_idyll_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Idyll is a markup language for creating and publishing interactive narratives — think posts on websites like <a href="https://distill.pub/"><em>Distill</em></a>, <a href="https://www.nytimes.com/section/upshot"><em>The Upshot</em></a>, <a href="https://fivethirtyeight.com"><em>FiveThirtyEight</em></a>, and <a href="https://pudding.cool/"><em>The Pudding</em></a>. With Idyll you write markup in a text file, which is then compiled into an interactive webpage. Idyll takes a lot of inspiration (and borrows a lot of syntax) from <a href="https://daringfireball.net/projects/markdown/">Markdown</a>, while trying to extend these ideas beyond static text.</p>
<p>One of the main points of Idyll is to make it very easy to embed JavaScript components inline with your text, and even have these components responsively update based on a reader's actions or scrolls. For example, a short Idyll file might look like this:</p>
<pre><code class="lang-markdown"><span class="token title important" ><span class="token punctuation" >#</span> This is my title</span>
<span class="token title important" ><span class="token punctuation" >###</span> This is my subheading</span>
This is the main body of my article. Here is a scatter plot, rendered with JavaScript:
<span class="token url" >[data name:"exampleData" source:"example-data.csv" /][<span class="token variable" >chart type:"scatter" data:exampledata /</span>]</span>
And here is some more text after the chart.
</code></pre>
<p>In this example:</p>
<ul>
<li>the Markdown will be converted to HTML</li>
<li>a dataset will be read from the <code>example-data.csv</code> file using the <code>[data /]</code> tag</li>
<li>the <code>[Chart /]</code> component will call out to JavaScript to render the contents of the CSV in a scatter plot</li>
</ul>
<p>Idyll ships with a <a href="https://idyll-lang.github.io/components-built-in">set of standard components</a> that can be invoked in the markup. Because Idyll is built on top of <a href="https://facebook.github.io/react/">React</a>, any React component can be installed from <code>npm</code> and used without any additional configuration. It is also straightforward for users to write their own <a href="https://idyll-lang.github.io/components-custom">custom components</a>.</p>
<p>Everything in Idyll is reactive, so when anything changes the document automatically updates. For example, if we wanted to have a chart toggle between a scatter and a line plot, we could add a variable that changes when a button is pressed:</p>
<pre><code class="lang-markdown">[var name:"showScatter" value:true /]
[Chart type:<span class="token code keyword" >`showScatter ? "scatter" : "line"`</span> data:exampleData /]
[Button onClick:<span class="token code keyword" >`showScatter = !showScatter`</span>] Toggle Scatter [/Button]
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_idyll_-work-" id="how-does-_idyll_-work-"></a><span class="text">How does <em>Idyll</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_idyll_-work-">#</a></h2>
<p>As is typical with any programming language, Idyll starts with a compiler that does lexing and parsing of the input file. We rely heavily on existing open-source tools to help with this task, namely <a href="https://github.com/aaditmshah/lexer">lex</a> for the lexing and <a href="https://github.com/Hardmath123/nearley">nearley</a> to do the parsing. The compiler then spits out an <em>abstract syntax tree</em> (AST) that represents the hierarchy of elements that belong in the document.</p>
<p>Once the AST is created, Idyll processes it to see which components are used and uses Browserify to create a JavaScript bundle that can be executed in a web browser. This JavaScript bundle includes a React component that will dynamically map the nodes in the AST to React components and render those components as its children.</p>
<p>Part of this mapping process involves generating and executing some JavaScript code to make sure that Idyll's reactive variables work and the document is always re-rendered properly as those variables change.</p>
<p>One cool thing is that because Idyll's compiler is written in JavaScript, we can <a href="https://idyll-lang.github.io/editor/">execute this whole build process in the browser</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_idyll_-differ-from-other-solutions-" id="how-does-_idyll_-differ-from-other-solutions-"></a><span class="text">How does <em>Idyll</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_idyll_-differ-from-other-solutions-">#</a></h2>
<p>The typical process for creating interactive documents or <a href="http://explorabl.es/">explorable explanations</a> involves hand-writing a lot of custom JavaScript and HTML. It can quickly become tedious balancing the narrative portion of the project with the nitty-gritty details of the code. To this end, the New York Times developed <a href="http://archieml.org/">ArchieML</a>, a markup language designed to make it easy to pull text into JavaScript code.</p>
<p>A core idea with ArchieML is that code and text should be separated because they deal with very different concerns. Text needs to be edited for content and clarity, often by someone who doesn't care to look at the code. Developers will need to integrate that text with their code at some point but typically aren't concerned with grammar while they are writing JavaScript.</p>
<p>In some ways, Idyll takes the opposite approach to ArchieML. Instead of making it easy to pull text into code, Idyll makes it easy to include JavaScript components in a text. With this approach, the relationship between code and text becomes much easier to reason about from an editorial perspective, and it becomes feasible to make nuanced changes to where components appear in the text, and how they interact with the page. In this way, the process of including an interactive component becomes much closer to, say, using a CMS to embed an image in a post.</p>
<p>Another project that addresses combining code and data with text is <a href="https://stenci.la/">Stencila</a>. Stencila borrows ideas from the "code notebook" world and focuses on embedding executable code with text. My understanding is that the project is focused on reproducible research, whereas Idyll is focused on streamlining the connection between prose and JavaScript to build interactive narratives.</p>
<p>There are lots of projects that make it easy to publish Markdown documents online (<a href="https://jekyllrb.com/">Jekyll</a>, for example), but none of these allow JavaScript to be tightly integrated with the text.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_idyll_-" id="why-did-you-develop-_idyll_-"></a><span class="text">Why did you develop <em>Idyll</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_idyll_-">#</a></h2>
<p>I developed Idyll as a way to automate away an entire class of hardships that authors face when they want to publish documents with interactivity. The project is a synthesis of a lot of ideas and lessons learned from developing these sorts of projects at FiveThirtyEight and elsewhere.</p>
<p>Because Idyll has a fairly specific use-case, it can encapsulate some best practices. For example, it enables server-side rendering and other performance optimizations by default and allows the developer to avoid the headache of setting up a JavaScript build system and HTML templates.</p>
<p>I believe that the web is a great platform for communication and we are only now starting to see some of the potential of moving beyond static text. With Idyll I hope to make it easier for other people to express their ideas in a dynamic and engaging way and publish them online. The project also has implications beyond just blog posts and news articles, such as providing a new entry point into the authorship of interactive textbooks.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll continue to focus on Idyll's user friendliness and expanding the online examples that serve as a reference for new projects. I'm also interested in improving the authorship experience for interactive and data heavy websites in general, so you can expect to see continued work in this area specifically.</p>
<p>Regarding new features for Idyll, one big item on the roadmap is enabling custom transformations that operate on the AST. Doing this would allow new possibilities such as writing components that call out to another program at compile-time to generate new static output, for example, calling <code>graphviz</code> to produce an image of a graph.</p>
<p>We may also add some syntactic sugar to make certain common tasks even easier. In addition to that, we've been working hard to modularize the individual components of Idyll to make it easier for others to work with Idyll in their projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_idyll_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_idyll_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Idyll</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_idyll_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>It is an exciting time for web development. The number of powerful technologies at developers' disposal continues to increase. I would expect that the JavaScript developer's toolkit for building and deploying code will continue improving in sophistication and optimization. I'm optimistic that build tools will become easier to set up and use once more consensus has been established within the community around certain features.</p>
<p>Thanks to the persistence of the open-source community, the amount, and quality of web tooling continue to rise. I'm excited to see further development and advancing maturity of these tools that empower creation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Focus on solving a problem that is interesting to you instead of wading through tutorials. Learn to use Google to solve problems as they come up. Use things like <a href="https://github.com/mattdesl/budo">budo</a> to get up and running quickly and don't bother listening to people who argue about tools online. Don't use a framework until you can articulate why you need a framework.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>There's lots of interesting work being done in the WebGL / 3D graphics space. <a href="https://github.com/mikolalysenko">Mikola Lysenko</a> is doing great work with <a href="https://github.com/regl-project/regl">regl</a>, and <a href="https://rreusser.github.io/">Ricky Reusser</a> has been using it to make some excellent <a href="https://github.com/rreusser/demos#regl">data visualizations</a>. <a href="https://stardustjs.github.io/">Stardust.js</a> is also an exciting project for using WebGL to visualize data.</p>
<p>The work on decentralization from folks working on projects like <a href="https://github.com/beakerbrowser/beaker">Beaker Browser</a> and <a href="https://datproject.org/">Dat</a> is also exciting.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>The Idyll folks are usually hanging out in a <a href="https://gitter.im/idyll-lang/Lobby">chatroom on gitter</a>. It's easy to join, and we're always happy when people say "Hi" or ask questions about the project. I'd also like to call out <a href="https://benclinkinbeard.com/">Ben Clinkinbeard</a> for all the hard work he has done on the development of Idyll.</p>
<p>Thanks for having me! ✨</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Matthew! I love the fact how Idyll makes it easier for people from different domains to collaborate.</p>
<p><a href="https://idyll-lang.github.io/">Learn more about on their site</a>. <a href="https://github.com/idyll-lang/idyll">Check out Idyll GitHub page</a> as well.</p>
Motorcycle.js - A statically-typed, functional and reactive framework for modern browsers - Interview with Tylor Steinbergeramotorcyclejsastaticallytypedfunctionalandreactiveframeworkformodernbrowsersinterviewwithtylorsteinberger2017-08-18t00:00:00z2017-08-18T00:00:00Z<p>Functional reactive programming allows us to think carefully about state and side effects. The question is, how to do that in JavaScript?</p>
<p><a href="https://github.com/motorcyclejs/motorcyclejs">Motorcycle.js</a> by <a href="https://twitter.com/TylorS167">Tylor Steinberger</a> is one solution to this problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/8e82cfdc051e96e55ade3ccb870edeff?s=200" alt="Tylor Steinberger" class="author" width="100" height="100" />
</span>
I'm a software engineer at a company called PokerJuice, where I mostly work on the front-end using Motorcycle and domain-driven design. I'm a self-taught developer with almost two years of open-source contributions and 1.5 years professional experience.
</p>
<p>Besides my work on Motorcycle, I'm also a core Most.js contributor. My professional and open-source work have both been primarily focused on functional and reactive programming in TypeScript.</p>
<p>Away from a keyboard, music festivals are my home away from home. I love to create, play, and experience music as much as I can. Traveling is a newly discovered interest of mine, and I'm trying to increase my ability to travel as much as possible in the future.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about Most.js, <a href="https://survivejs.com/blog/most-interview">read the Most.js interview</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-motorcycle-js-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-motorcycle-js-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Motorcycle.js</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-motorcycle-js-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Motorcycle is a type-safe functional and reactive framework for modern browsers. In large part, it is an architectural pattern for building highly interactive applications with Most.js.</p>
<p>Given that the base is built with Most.js, Motorcycle is fully reactive. Being reactive solves many challenges such as handling events, errors, and any other asynchronous calls you may need to make.</p>
<p>Motorcycle is <em>functional</em>. Large applications can be written using only functions which make them extremely testable. You'll never need to use the <code>this</code> keyword or make imperative function calls. Paired with a library like Ramda you may never have to see <code>foo.bar</code> or <code>foo['bar']</code> notations again!</p>
<p>Motorcycle is programmed as a function over time given it's most functional and reactive.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-motorcycle-js-work-" id="how-does-motorcycle-js-work-"></a><span class="text">How does <em>Motorcycle.js</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-motorcycle-js-work-">#</a></h2>
<p>In order to better understand how Motorcycle works, it's important to understand what it achieves first. Motorcycle itself is just a single function named <code>run</code>. Using <code>run</code> requires two functions. We call these two functions <code>Main</code> and <code>Effects</code>.</p>
<p><figure><img src="/e9442cd1f94b3f5a75367416154772a9.png" alt="Motorcycle run diagram" class="" width="" height="" /><figcaption>Motorcycle run diagram</figcaption></figure></p>
<p>As you may be able to tell from the diagram above, the <code>run</code> function effectively operates like this:</p>
<pre><code class="lang-typescript"><span class="token keyword keyword-const" >const</span> sinks <span class="token operator" >=</span> <span class="token function" >Main</span><span class="token punctuation brackets-parentheses" >(</span>sources<span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-const" >const</span> sources <span class="token operator" >=</span> <span class="token function" >Effects</span><span class="token punctuation brackets-parentheses" >(</span>sinks<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>Above may seem impossible to do at first glance, but is 100% possible! Using a
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy"><code>Proxy</code></a>
we can solve this problem.</p>
<pre><code class="lang-typescript"><span class="token comment" spellcheck="true" >// Create a Proxy which dynamically adds key-value entries</span>
<span class="token comment" spellcheck="true" >// as they are accessed from Effects</span>
<span class="token keyword keyword-const" >const</span> proxySinks <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Proxy</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span>target<span class="token punctuation" >,</span> property<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token operator" >!</span>target<span class="token punctuation brackets-square" >[</span>property<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
target<span class="token punctuation brackets-square" >[</span>property<span class="token punctuation brackets-square" >]</span> <span class="token operator" >=</span> <span class="token function" >createNewStream</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-return" >return</span> target<span class="token punctuation brackets-square" >[</span>property<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Call Effects with our Proxy</span>
<span class="token keyword keyword-const" >const</span> sources <span class="token operator" >=</span> <span class="token function" >Effects</span><span class="token punctuation brackets-parentheses" >(</span>proxySinks<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Call Main to get our *real* Sinks</span>
<span class="token keyword keyword-const" >const</span> sinks <span class="token operator" >=</span> <span class="token function" >Main</span><span class="token punctuation brackets-parentheses" >(</span>sources<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Replicate the values from *real* Sinks to the proxySinks</span>
<span class="token comment" spellcheck="true" >// This is what "closes" the loop to make a reactive cycle</span>
<span class="token keyword keyword-for" >for</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-const" >const</span> sinkName <span class="token keyword keyword-in" >in</span> sinks<span class="token punctuation brackets-parentheses" >)</span>
sinks<span class="token punctuation brackets-square" >[</span>sinkName<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >.</span><span class="token function" >subscribe</span><span class="token punctuation brackets-parentheses" >(</span>proxySinks<span class="token punctuation brackets-square" >[</span>sinkName<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>The above is an abbreviated version of how the real thing works, for those interested in how it works in practice, <a href="https://github.com/motorcyclejs/motorcyclejs/tree/master/run">the source code can be found online</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-motorcycle-js-differ-from-other-solutions-" id="how-does-motorcycle-js-differ-from-other-solutions-"></a><span class="text">How does <em>Motorcycle.js</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-motorcycle-js-differ-from-other-solutions-">#</a></h2>
<p>Motorcycle tries to push the boundaries of how applications can be written. Countless hours have been spent to write the best TypeScript typings imaginable. In an editor like Visual Studio Code, you'll get autocompletion for everything, making spelling errors nearly impossible.</p>
<p>When you query for a click event, Motorcycle already knows you're going to get a <code>MouseEvent</code> back, not just an <code>Event</code>. When you want to change the color of a font, you'll even get autocompletion for values like <code>'darkturquoise'</code> and <code>'lightsteelblue'</code>. I'm not aware of any other framework that has aimed to achieve this quality of developer experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-motorcycle-js-" id="why-did-you-develop-motorcycle-js-"></a><span class="text">Why did you develop <em>Motorcycle.js</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-motorcycle-js-">#</a></h2>
<p>Motorcycle started as a sister project to <a href="https://github.com/cyclejs/cyclejs">Cycle.js</a>. The original goal was to squeeze as much performance out of the ideas that André Staltz introduced in Cycle.js.</p>
<p>At the time Cycle.js still made exclusive use of RxJS 4 and a <a href="https://github.com/Matt-Esch/virtual-dom">virtual-dom</a>, so first attempts to make Motorcycle as fast as possible involved integrating <a href="https://github.com/cujojs/most">Most.js</a> and <a href="https://github.com/snabbdom/snabbdom">snabbdom</a> in an untouched version of Cycle.</p>
<p>Only in the past year have I reduced my activity on Cycle.js and begun to focus more of my time elsewhere, Motorcycle taking on a slightly different API and semantics. In particular, Motorcycle now requires a browser that supports the ES2015 <code>Proxy</code>. The changes that have been made since dropping support for IE have opened many doors for us, especially for architecting large applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Motorcycle has become stable over the past two years. The next venture in Motorcycle will be to upgrade to depend on <a href="https://github.com/mostjs/core"><code>@most/core</code></a> which is a large improvement over the current version of Most.js. Doing this shouldn't take too long after a v1.0.0 release.</p>
<p>Spoiler: I plan to rebrand Motorcycle.js to Motorcycle.ts to further emphasize our commitment to having the best TypeScript typings the language allows. We're also looking to improve documentation, split existing packages up into smaller pieces, and providing a great deal more testing utilities and commonly used functions. Mainly, we want to foster the community around the project and continue to grow.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-motorcycle-js-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-motorcycle-js-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Motorcycle.js</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-motorcycle-js-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think functional and reactive programming is creeping more and more into mainstream web development, and we'll be seeing more and more ideas exploring them. Motorcycle will continue to support this trend and bring these programming styles more into the limelight.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Being self-taught, all the advice I can give is to find a project that piques your curiosity, join their community, and work hard to contribute regardless of your skill level. I found Cycle.js in August 2015, joined the community, and just tried making things, almost none of which anyone uses today.</p>
<p>The people active in those days would ask questions, do code reviews, and provide all kinds of tips to learn and grow. Ask questions, be curious, and never stop asking yourself and others how you can improve your skills at and away from a keyboard.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think it'd be great to interview André Staltz. He's doing some awesome work to free people from large companies exploiting our privacy for profits.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="https://survivejs.com/blog/cycle-interview">I interviewed André earlier about Cycle.js</a>. Perhaps we can find another topic to cover!</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I'd like to thank everyone from the early Cycle.js days: <a href="https://github.com/staltz">André Staltz</a>, <a href="https://github.com/widdershin">Nick Johnstone</a> <a href="https://github.com/frikki">Frederik Krautwald</a> and <a href="https://github.com/axefrog">Nathan Ridley</a>. I'd also really like to thank the Most.js core team: <a href="https://github.com/briancavalier">Brian Cavalier</a> and <a href="https://github.com/davidchase">David Chase</a>. Without these people and others along the way, I'd still work 50+ hours a week in a coffee shop. I can't thank them enough!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Tylor!</p>
<p>To learn more about the approach, study <a href="https://github.com/motorcyclejs/motorcyclejs">Motorcycle.js GitHub page</a>.</p>
Next.js - Framework for server-rendered React apps - Interview with Arunoda Susiripalaanextjsframeworkforserverrenderedreactappsinterviewwitharunodasusiripala2017-08-15t00:00:00z2017-08-15T00:00:00Z<p>Building universal web applications combining server side rendering with front-end is popular these days. The approach is not without its problems, though. Now you have the extra challenge of managing code so that it works on the both sides. Due to the differences between them, you will run into a series of problems.</p>
<p><a href="https://github.com/zeit/next.js/">next.js</a> was developed to handle these concerns for React. To understand the approach, I'm interviewing <a href="https://twitter.com/arunoda">Arunoda Susiripala</a> this time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/ab13df38843556b57f7d2f6fe78003cf?s=200" alt="Arunoda Susiripala" class="author" width="100" height="100" />
</span>
I started working with JavaScript while I was studying at university. After this I had my first introduction to open source - I got involved with Joomla and Status.net as a part of Google Summer of Code.
</p>
<p>My work started to turn towards Meteor-related projects next, and I founded kadira.io, a performance monitoring solution for Meteor. At Kadira, I started React Storybook with my colleagues, but eventually, we needed to shut down Kadira.</p>
<p>In late 2016, I discovered Next.js and started contributing to it. After Kadira's shutdown, I joined ZEIT to maintain Next.js and take it further.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_next-js_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_next-js_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Next.js</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_next-js_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>I think everyone is familiar with the concept of JavaScript fatigue. Creating a web app with JavaScript is often hard with all of the packages and options that we have today. React, webpack, Redux, React Router and many more libraries and tools are often used and require effort to learn.</p>
<p>In comparison, writing a simple PHP app can be as easy as just creating some files and deploying them.</p>
<p>With Next.js we enable developers to build JavaScript web apps with more straightforward workflow like in the PHP example. Just create some files that export React components and deploy your app. No need to set up webpack or do any special routing or state management.</p>
<p>Next.js also does server side rendering by default, among many other performance optimizations.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_next-js_-work-" id="how-does-_next-js_-work-"></a><span class="text">How does <em>Next.js</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_next-js_-work-">#</a></h2>
<p>Let me show you with an example.</p>
<p>We first create our project and initialize an npm package.json:</p>
<pre><code class="lang-bash"><span class="token function" >mkdir</span> hello-next
<span class="token function" >cd</span> hello-next
<span class="token function" >npm</span> init -y
</code></pre>
<p>Then we install <em>Next.js</em> and the React dependencies and create a <code>pages</code> directory:</p>
<pre><code class="lang-bash"><span class="token function" >npm</span> <span class="token function" >install</span> --save next react react-dom
<span class="token function" >mkdir</span> pages
</code></pre>
<p>In the pages directory, we create a file at <code>pages/index.js</code> with the following content:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> Link <span class="token keyword keyword-from" >from</span> <span class="token string" >"next/link"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Welcome<span class="token punctuation" >,</span> <span class="token keyword keyword-this" >this</span> is the home page<span class="token punctuation" >.</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Link</span> <span class="token attr-name" >href</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>/about<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>a</span><span class="token punctuation" >></span></span>About Page<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>a</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Link</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>We also make a file called <code>pages/about.js</code> containing this code:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token operator" ><</span>div<span class="token operator" >></span>This is the about page<span class="token punctuation" >.</span><span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span><span class="token punctuation" >;</span>
</code></pre>
<p>We add a script for the development server to the <code>package.json</code>:</p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"scripts"</span><span class="token operator" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"dev"</span><span class="token operator" >:</span> <span class="token string" >"next"</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Finally, we run that script to start the development server:</p>
<pre><code class="lang-bash"><span class="token function" >npm</span> run dev
</code></pre>
<p>The app will be started on <code>https://localhost:3000</code>. Any changes to pages and content will be updated instantly in the browser by webpack's Hot Module Replacement (HMR).</p>
<p>Above is just the beginning. You can do a lot with <em>Next.js</em>. You can even customize the base webpack and Babel configuration too.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I suggest visiting the <a href="https://github.com/zeit/next.js">Next.js repo</a> for more info.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_next-js_-differ-from-other-solutions-" id="how-does-_next-js_-differ-from-other-solutions-"></a><span class="text">How does <em>Next.js</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_next-js_-differ-from-other-solutions-">#</a></h2>
<p>Here I'll focus on comparing <em>Next.js</em> with two other solutions for building React apps.</p>
<p><strong>1. Custom webpack and Babel setup</strong></p>
<p>Here you need to maintain your configurations and update them for new versions of your dependencies. If you manage multiple apps, upgrading the dependencies and updating all configurations everywhere will be a real problem.</p>
<p>If you use Next.js, you don't need to worry about these configurations. It comes along with sane defaults but also allows you to customize as needed.</p>
<p><strong>2. Create React App (CRA)</strong></p>
<p>Create React App is Facebook's official solution for building React apps without build configuration. It works well for what it does. It doesn't, however, deal with routing, so you need to handle this on your own. Furthermore, you can't customize as much of the webpack and Babel configurations. Server side rendering is also complicated to do.</p>
<p>For some apps, Create React App is a good solution.</p>
<p>With Next.js, you'll get server side rendering for free and no need to worry about routing. The built-in routing system is file system-based, and custom routes can be set up for dynamic pages.</p>
<p>Since the routing is built into the framework, we can do very cool things like:</p>
<ul>
<li>Server side rendering by default</li>
<li>Automatic code splitting</li>
<li>Simple data fetching solution for pages</li>
</ul>
<p>You can build a decent web app without worrying about configuration, routing and state management.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_next-js_-" id="why-did-you-develop-_next-js_-"></a><span class="text">Why did you develop <em>Next.js</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_next-js_-">#</a></h2>
<p>I didn't work at ZEIT at the time it was built - it was primarily developed by <a href="https://twitter.com/nkzawa">@nkzawa</a> to develop <a href="https://zeit.co">ZEIT's web app</a>. Because it was a success, ZEIT released it as an open source project.</p>
<p>Since then, features are developed when they are needed to continue building <a href="https://zeit.co">https://zeit.co</a>, and the community helps by fixing bugs and requesting and developing new features.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We try to keep <em>Next.js</em> as simple and lean as possible. We avoid implementing too many features. Instead, we aim to build a robust infrastructure and encourage reuse of existing libraries and frameworks on top of Next.js.</p>
<p>We just released <em>Next.js</em> 3.0 with dynamic imports and static HTML exporting support. The next topics we will focus on are improving overall stability and reducing the dev and production build time of the app.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_next-js_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_next-js_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Next.js</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_next-js_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think we'll see more rich web apps in the future thanks to recent performance improvements in browsers. Web Assembly will have an enormous impact on the industry. Solid tooling will allow development of web apps available for both desktops and servers. Effects like these will lead to web apps to completely obsoleting desktop apps.</p>
<p>Our goal with Next.js will always be to allow developers to build fast web apps without too much hassle with different APIs and configurations.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>First of all, learn the basics well. For example, with front-end web development, learn the ins and outs of HTML, CSS, and JavaScript. Then focus on a couple of frameworks you like and develop a career on top of them.</p>
<p>The industry is changing very rapidly, so always look for what's new and stay updated.</p>
<p>Don't switch frameworks because there's something new and cool. Only do that if your current framework doesn't work well or if the new one increases your job opportunities.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>JavaScript has a huge ecosystem. I don't have a specific person to mention. The GitHub trending page may have some interesting people to interview.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>As a project maintainer on GitHub, I appreciate it when developers search the web and the existing issues before creating new issues. If it's a new issue, always provide a way to reproduce the issue (often better as a GitHub repo).</p>
<p>That saves us a ton of time so that we can fix legitimate problems and still add new features.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Arunoda! I think it's great to see projects like Next.js pushing the envelope and finding better ways to develop universal web applications.</p>
<p>Check out <a href="https://github.com/zeit/next.js/">next.js GitHub</a> and <a href="https://learnnextjs.com/">Learn Next.js</a> to understand the topic better.</p>
Rekit - Toolkit for building scalable React applications - Interview with Nate Wangarekittoolkitforbuildingscalablereactapplicationsinterviewwithnatewang2017-08-09t00:00:00z2017-08-09T00:00:00Z<p>Perhaps the greatest thing about React is how flexible it is. It contains some opinions but not too many. You still have plenty of freedom. Sometimes this is a blessing, but it can also be a curse.</p>
<p><a href="https://twitter.com/webows">Nate Wang</a> realized the same, and as a result, he developed <a href="http://rekit.js.org/">Rekit</a>, a toolkit, around React, Redux, and other related technologies.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/9645266baa7fbac0823eee7dae06bbe4?s=200" alt="Nate Wang" class="author" width="100" height="100" />
</span>
My name is Nate Wang, and I live in Shanghai, China. I started writing JavaScript more than ten years ago and now enjoy my job building UIs for enterprise applications. I have created iOS apps, published books, and talked about React at QCon.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-rekit-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-rekit-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Rekit</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-rekit-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>You can think of <em>Rekit</em> as an advanced <em>create-react-app</em>:</p>
<ol>
<li>It defines an opinionated approach to creating scalable web apps using React, Redux and React Router.</li>
<li>It provides a powerful CLI and web-based interface to make sure the app always follows the Rekit way.</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rekit-work-" id="how-does-rekit-work-"></a><span class="text">How does <em>Rekit</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rekit-work-">#</a></h2>
<p>When starting a project, the first thing is to create a project folder structure and plan how to scale it when adding more features. <em>Rekit</em> can help to create such a project which scales well, following a <a href="https://medium.com/@nate_wang/feature-oriented-architecture-for-web-applications-2b48e358afb0">feature oriented architecture</a>:</p>
<p><figure><img src="/24ebea30cf6ec9b29c08e053c50713d0.png" alt="Rekit architecture" class="" width="" height="" /><figcaption>Rekit architecture</figcaption></figure></p>
<p>After creating the project and installing dependencies, you can use the powerful Rekit tools to manage the project and generate boilerplate code. Rekit portal, a web-based tool shipped with Rekit 2.0, works as an IDE for React development. Components, actions, and routes can all be created, moved and deleted by the Rekit portal.</p>
<p><figure><img src="/a396f31f459c8f6fc74a869310aa17ec.png" alt="Rekit portal" class="" width="" height="" /><figcaption>Rekit portal</figcaption></figure></p>
<blockquote class="tip"><i class="icon-attention-circled"></i><a href="http://rekit-portal.herokuapp.com/">You can find a live demo of Rekit portal online.</a></blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rekit-differ-from-other-solutions-" id="how-does-rekit-differ-from-other-solutions-"></a><span class="text">How does <em>Rekit</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rekit-differ-from-other-solutions-">#</a></h2>
<p>There have been many boilerplates and scaffolding tools for React apps. Rekit may be the most complete solution, the key differences being:</p>
<ol>
<li>It provides a production ready solution rather than a starter kit.</li>
<li>It provides powerful tools like the command line interface and the web interfaces to manage the project.</li>
<li>It may be the first tool that enables renaming and deletion of Redux actions, which is important for code refactoring.</li>
<li>It supports the latest versions of dependencies like React 15.6, webpack 3, React Router 4 and so on and will stay up to date.</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-rekit-" id="why-did-you-develop-rekit-"></a><span class="text">Why did you develop <em>Rekit</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-rekit-">#</a></h2>
<p>I like to create tools to automate my daily work. Rekit was originally a toolset for helping create boilerplates for another project, the goal being boilerplate reuse in other projects. I realized that it might be useful to share this with others and so I created Rekit. It helped my team a lot.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'd like to make Rekit more robust by adding more test cases. The docs can also be improved, and more tutorials can be written. It would be nice if Rekit could become more popular and be acknowledged by more people. I would like to create more Rekit plugins to add new capabilities to Rekit, such as support for React Native, server-side rendering, etc.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-rekit-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-rekit-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Rekit</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-rekit-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think "JavaScript/frontend fatigue" is still the main pain point for web development. There are too many options and best practices, and it's hard to make decisions about which are better.</p>
<p>Rekit is just a toolkit through which we share our best practices for creating web apps using React, Redux and React Router. We hope more people can benefit from it just like we do. To be honest, I can't see any particular trends, but I believe React will be the final winner.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Read specifications first, especially ECMAScript. It won't take long, and it's beneficial for understanding the foundations of web development. If you understand the specifications, you can know how React, Angular and any other library work. There is no magic behind them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/afc163">afc163</a> if possible. He is one of the leading developers of <a href="https://ant.design">Ant Design</a> which I think is the best UI library for React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks to those who contribute to Rekit by reporting issues, asking questions and recommending Rekit to others! You all help to make Rekit better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Nate! It's nice to see solutions like this appear around React as they address specific pain points the community has.</p>
<p>Learn more about the project at <a href="http://rekit.js.org/">Rekit site</a>.</p>
Redux-First Router - Just dispatch actions - Interview with James Gillmoreareduxfirstrouterjustdispatchactionsinterviewwithjamesgillmore2017-08-07t00:00:00z2017-08-07T00:00:00Z<p>Routing is one of those classic topics that comes up again and again. <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">HTML5 History API</a> itself is quite simple, but there are different opinions on how to apply the idea of routing on web applications and sites.</p>
<p><a href="https://twitter.com/faceyspacey">James Gillmore</a> decided to tackle the problem particularly for React and Redux in his <a href="https://github.com/faceyspacey/redux-first-router">Redux-First Router</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://avatars2.githubusercontent.com/u/154732?v=4&s=460" alt="James Gillmore" class="author" width="100" height="100" />
</span>
I've tried to stay quiet and keep it to the code rather than myself. But perhaps now is a good time to say a few words about my story.
</p>
<p>I started 12 years ago (2005) by hiring other developers to build things. I worked at a music studio in Times Square, NYC and hired developers to build websites for our clients. Eventually, I even got into the MySpace spamming thing. I had been doing a lot of audio engineering, but soon realized that my talents were best more directly applied to technology. My dreams of becoming a famous beat-maker never came true.</p>
<p>So I jumped ship, started my boutique web development agency, <a href="http://www.faceyspacey.com">FaceySpacey Technologies</a> (2007), got myself into trouble completing products on time for clients, and became a coder as a matter of necessity (2010). The rest is history - a very long history of self-mastery (both in programming and the real world).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-redux-first-router-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-redux-first-router-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Redux-First Router</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-redux-first-router-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Redux-First Router is something that should have existed long ago, but because the React community at the time was caught up in throwing out so much ancient wisdom, it was skipped over. Redux-First Router completes the triumvirate of the MVC (Model-View-Controller), adding the C to the equation (where Redux is the M and React the V). It was as if nobody wanted to hear the letters MVC again. It's anathema to me too, but it is what it is.</p>
<p>It also kills the "everything is a component" concept when it comes to routes. Redux-First Router follows the philosophy that "everything is state" and routes are 100% in sync with actions to trigger that state. The components that make up your view layer just render from the state as they should.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-redux-first-router-work-" id="how-does-redux-first-router-work-"></a><span class="text">How does <em>Redux-First Router</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-redux-first-router-work-">#</a></h2>
<p>With Redux-First Router, actions are dispatched as a result of visiting URLs and conversely, the address bar is updated in response to matching actions.</p>
<p>What's significant and special about it is something that was never done before: the actions dispatched have unique <code>type</code>s that only the given kind of URL has. This is unique because previous attempts at Redux routing (such as <em>redux-little-router</em>) dispatch actions that all have the same type: the equivalent of <code>LOCATION_CHANGED</code>. Then you have to dig through lots of information nested in that action to figure out what happened. It wasn't conducive to switching over types as is idiomatic in reducers.</p>
<p>As obvious as it sounds, having a <code>type</code> that is as informative as actions you manually dispatch is the key ingredient that finally makes routing seamless for Redux apps.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-redux-first-router-differ-from-other-solutions-" id="how-does-redux-first-router-differ-from-other-solutions-"></a><span class="text">How does <em>Redux-First Router</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-redux-first-router-differ-from-other-solutions-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#no-route-components" id="no-route-components"></a><span class="text">No <code><Route /></code> components</span><a class="header-anchor-select" href="https://survivejs.com/#no-route-components">#</a></h3>
<p>Initial attempts at Redux routing followed the React Router approach that <em>"everything is a component"</em>. As <a href="https://github.com/kmcclosk">one of our initial users</a> put it, <em>"cargo culting the same React Router stuff as everyone else just didn't feel right, felt leaky, felt hacky".</em></p>
<p>The fact of the matter is that keeping any state (especially URL state) in the view layer has been an anti-pattern for a long time now, yet somehow React convinced us that it was the exception. It makes sense when you <em>don't</em> have Redux (or another data store). But when you do, a lot more compelling opportunities unveil themselves to you.</p>
<p>Redux-First Router avoids using the same misplaced <code><Route /></code> components from React Router and similar packages. These packages promoted their version of <code><Route /></code>, rather than take advantage of how Redux removes the state from the view layer.</p>
<p><code><Route /></code> is for developers for whom Redux is still out of reach. Contrary to how easy seasoned developers may feel Redux is, it's difficult for the novice and even intermediate developers. So I think <code><Route /></code> still makes sense for a broad category of users, but for power users, Redux-First Router kills the <code><Route /></code> component as well as the "state-within-the-view-layer" anti-pattern.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-redux-philosophy" id="the-redux-philosophy"></a><span class="text">The Redux philosophy</span><a class="header-anchor-select" href="https://survivejs.com/#the-redux-philosophy">#</a></h3>
<p>Everything you do with Redux-First Router mirrors the terminology and thinking of Redux itself. The primary example is the <code>thunk</code> option attached to routes - it has the same API as used with <code>redux-thunk</code>, i.e. the <code>dispatch</code> and <code>getState</code> arguments.</p>
<p>Also, it's about what Redux-First Router stands for. The fact that from the start you are encouraged to get the most out of Redux is a meaningful thing. Philosophy is useful. The same way all the contracts Dan Abramov enforced on us have made our lives easier.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#further-unique-features" id="further-unique-features"></a><span class="text">Further unique features</span><a class="header-anchor-select" href="https://survivejs.com/#further-unique-features">#</a></h3>
<p>Here's a quick list of more of the unique and powerful things you can do with Redux-First Router:</p>
<ul>
<li>route-triggered data-fetching</li>
<li>Prefetching of (both chunks + data!)</li>
<li>React Native support (Android BackHandler, Deep Linking, Push Notifications)</li>
<li>Sick stuff to make React Navigation <em>actually</em> work with Redux (this is our best stuff which you'll be hearing about soon)</li>
<li>Top notch server-side rendering idioms</li>
<li>Everything you'd expect (redirects, 404s, scroll restoration, <Link /> components, automatic document.title management, page-leave confirmations, dynamic route adding for code-splitting, history entries state, the list goes on.)</li>
</ul>
<p>Most attempts at Redux-specific routing have been pretty bare bones and never got around to polishing enough to make them a full-featured solution. While there's always some feature that will need to be added, Redux-First Router is something I've committed to for the community. So no expense has been spared!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-redux-first-router-" id="why-did-you-develop-redux-first-router-"></a><span class="text">Why did you develop <em>Redux-First Router</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-redux-first-router-">#</a></h2>
<p>Here's what I haven't told anyone and SurviveJS are the first to hear it: I am a relative newcomer to React (December 2015). I decided to skip straight to React Native (so I could skip mastering webpack and all the related choices). I had a client project I had to build with a deadline.</p>
<p>I jumped right in and built it using Redux. Near the end of the app, I had to add deep linking and push notifications. So I wanted to find a way to make the app URL-driven without changing much code. I began looking into other redux routing solutions for RN, and since those weren't doing the trick, I decided to check out what they were doing on the plain web.</p>
<p>I then realized there wasn't anything anywhere that allowed you to build your Redux app in a <em>URL-independent way</em>, yet while still having support for URLs. At that point, it occurred to me that the obvious solution was to make your regular flux standard actions somehow be representative of URLs.</p>
<p>That's where the whole "action types as paths" concept was born. I built the router and had to change almost no code. Since all my actions were Flux Standard Actions with payload objects, it was only a matter of setting up the routing config and then doing a few changes in reducers.</p>
<p>It was not all that complicated to do, so I was surprised that nobody had taken that route yet.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#tell-us-more-about-not-having-to-change-your-code" id="tell-us-more-about-not-having-to-change-your-code"></a><span class="text">Tell us more about not having to change your code</span><a class="header-anchor-select" href="https://survivejs.com/#tell-us-more-about-not-having-to-change-your-code">#</a></h2>
<p>Well, the point is that you have fewer actions when using <em>Redux-First Router</em>. Having fewer actions is a good, given how the number of actions can get out of control.</p>
<p>Instead of having one <em>setter-style</em> action to show a drawer, and another <em>setter-style</em> action to close it (e.g. <code>'OPEN_DRAWER'</code> and <code>'CLOSE_DRAWER'</code>), you simply have <code>'FEED'</code> and <code>'NOTIFICATIONS'</code> which you'll need anyway. Then in the reducers, you must add some "tear down" code to open and close the drawer when you visit these routes. For instance, when you visit <code>'NOTIFICATIONS'</code> the <code>drawerOpen</code> state is <code>true</code> and when you visit <code>'FEED'</code>, <code>drawerOpen</code> is <code>false</code>.</p>
<p>Here's an example taken from the <a href="https://medium.com/faceyspacey/redux-first-router-data-fetching-solving-the-80-use-case-for-async-middleware-14529606c262">Redux-First Router solving the 80% use-case for Middleware article</a>:</p>
<p><strong>Old approach with many setter actions</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >sidebarOpen</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>state <span class="token operator" >=</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span> action <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>action<span class="token punctuation" >.</span>type<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'SIDEBAR_CLOSED'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'SIDEBAR_OPEN'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token boolean" >true</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-default" >default</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> state<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> sidebarOpen<span class="token punctuation" >;</span>
</code></pre>
<p><strong>New approach with fewer actions and smarter / fatter reducers:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >sidebarOpen</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>state <span class="token operator" >=</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span> action <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-switch" >switch</span> <span class="token punctuation brackets-parentheses" >(</span>action<span class="token punctuation" >.</span>type<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'HOME'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'LIST'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'VIDEO'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'LOGIN'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-case" >case</span> <span class="token string" >'SETTINGS'</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> <span class="token boolean" >true</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-default" >default</span><span class="token punctuation" >:</span>
<span class="token keyword keyword-return" >return</span> state<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> sidebarOpen<span class="token punctuation" >;</span>
</code></pre>
<p>So that's all I had to do - change my reducers, remove unnecessary actions being dispatched, make my reducers respond intelligently to a wider variety of actions, and voilà! In record time I now had URLs and could deep link into my app.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I've been working on completing my <em>Universal</em> product line. That will have some exciting connections to Redux-First Router. The hint is the word "prefetching". My overall main priority has been building "Next.js for the rest of us". Put another way, the frameworkless approach to the best features from Next.js.</p>
<p>Next.js is great, but very few power users want to get locked in their walled garden. So by the time I'm done with my initial vision, the only reasons to use Next.js will be that webpack configuration is either too much for you or just something you would rather not deal with.</p>
<p>For truly professional apps, I can't see how seasoned developers would want it any other way. If you're aiming for the top spot in your given market, you want complete customization available to you.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-redux-first-router-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-redux-first-router-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>redux-first-router</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-redux-first-router-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Simultaneous server-side rendering (SSR) and code splitting will become significant. It's been a gritty, time-consuming problem and nobody has wanted to solve it. My view is that the single page application is dead, and if you're not simultaneously SSRing and splitting you're doing it "wrong."</p>
<p>Traffic from Google is the biggest driver for many businesses. It is a key component of basically anything online and to go without SSR is a mistake. Given the tools we are using are so heavy regarding bytes, it is also a mistake not to split your code. Both need to be done together.</p>
<p>By the way, not splitting doesn't just increase bounce rates, it also compounds the <em>Google problem</em>, since Google likes fast sites.</p>
<p>Until <a href="https://medium.com/@faceyspacey/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8">now</a>, doing both SSR and code splitting has been a hair-pulling experience. Most people just gave up. I won't get into the nitty gritty of what the challenge is today. But you can read my <a href="https://medium.com/@faceyspacey/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8">code cracked for SSR + Splitting article</a> and the recent <a href="https://medium.com/faceyspacey/announcing-react-universal-component-2-0-babel-plugin-universal-import-5702d59ec1f4">React Universal Component 2.0 launch article</a> to learn why.</p>
<p>Oh, and by the way, SSR with Redux-First Router is the most idiomatic Redux has ever been on the server. And due to the way my <strong>Universal</strong> product line works regardless of which router you use, simultaneous SSR and code splitting is a dream with Redux-First Router. There is still some stuff left to do, and if you've heard that splitting isn't related to routing, you've been misled. To do it at the highest level, you need to do prefetching.</p>
<p>So the connection between the router and splitting is a simple interface to specify which route to prefetch. That's all. Redux-First Router is the first solution that does this. Next.js has <code><Link prefetch /></code>, but Redux-First Router has something far more powerful: automatic pre-fetching based on your current state, such as the current page a user is on, as recorded in Redux state. There's a one-time setup, but once it's working, potential next routes will be pre-fetched.</p>
<p>There's one final thing to know about how Redux-First Router prefetching works: not just the "chunk" is prefetched, but the data from your route thunks as well!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Question your intentions before you do anything. You'll waste your time doing the wrong thing with intentions that are likely to shift and evolve.</p>
<p>The paradox is that it takes a long time to reach the sort of maturity where your intentions become "better". I started out in the game, not as a developer, but an entrepreneur wanting to build an empire. Reality has long since kicked my ass as I forced myself to become a coder to dig myself out of a hole. That is to say, <em>a long, VERY LONG, history</em>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#it-s-not-about-passion-it-s-about-crafstmanship" id="it-s-not-about-passion-it-s-about-crafstmanship"></a><span class="text">It's Not About Passion, It's About Crafstmanship</span><a class="header-anchor-select" href="https://survivejs.com/#it-s-not-about-passion-it-s-about-crafstmanship">#</a></h3>
<p>Mastering this craft is time-consuming. And it's not about passion. I like to think of myself as a straight-shooter cowboy type with a clarity of vision. Sure I have a passion for software, but it's more about the natural enthusiasm for creation and conception in general.</p>
<p>The truth is I enjoy other things outside of staring at a screen far more. For me, it's about being a craftsman as a matter of maturity and integrity. To pay the bills, create value, and make real the stuff that only exists in my mind as I'm innately compelled to do.</p>
<p>I've built the open source stuff I've built primarily because I refused to go another project without these boxes checked.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#don-t-focus-on-open-source" id="don-t-focus-on-open-source"></a><span class="text">Don't Focus on Open Source</span><a class="header-anchor-select" href="https://survivejs.com/#don-t-focus-on-open-source">#</a></h3>
<p>Also, don't focus on open source. If you do, make sure that your intentions are truly pure and that it makes sense for the juncture where you happen to be. For me, I have things I plan to create, and for the time being, I have the luxury to go the long first-principled route, which happens to align with open source contribution. After all, getting your creations in front of the most people is what it's all about.</p>
<p>But before anything else, get out in the real world. It's too easy to waste our lives a way in front of a computer. You'll miss everything. So with that thought, who has time for willy-nilly open source projects? Not me. If you do open source, make it count financially in one way or another.</p>
<p>There are better places you can "give" and interact outside the digital realm. Programming is a business tool, a means to an end. No shame in that. Be about your business. Don't hide behind technology, whether that's your phone or immersing yourself in work. Learn people, follow what truly excites you.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#empire-building-is-fool-s-gold" id="empire-building-is-fool-s-gold"></a><span class="text">Empire Building is Fool's Gold</span><a class="header-anchor-select" href="https://survivejs.com/#empire-building-is-fool-s-gold">#</a></h3>
<p>And if your intention is to build an empire and <em>"change the world!"</em>, I sincerely ask you to question what that is <em>really about</em> for you. Most of the things we're building, someone else will build in a matter of time. The world doesn't need you to change it, and you're going to go through a lot of unnecessary pain trying. That's all I'll say about that for now.</p>
<p>Doing what's natural for you is the most important thing. Forcing anything will lead to bad results. But we're only human, and <em>forcing</em> is more often than not a core aspect of our journey--to getting somewhere where we no longer force things.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#force-yourself-to-become-a-better-programmer" id="force-yourself-to-become-a-better-programmer"></a><span class="text">Force Yourself to Become a Better Programmer</span><a class="header-anchor-select" href="https://survivejs.com/#force-yourself-to-become-a-better-programmer">#</a></h3>
<p>So my advice to new programmers is: skip college lol, get yourself into a jam (or 2 or 3 or more lol) where you have to complete a product, and <strong><em>force</em></strong> yourself to become a better a programmer as the only option you perceive you have. Then after you know a thing or two with conviction, build something only you have the unique insights to build.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Interview someone who's leading the serverless charge when it comes to React. That's another trend that will explode soon as a few more puzzle pieces come together. Perhaps the <a href="https://github.com/dawson-org/dawson-cli">Dawson</a> guys. I haven't tried it yet, but I'd love to see serverless made stupid simple for the React crowd, and they seem to be on that path.</p>
<p>Here's someone else who you should interview: <a href="https://github.com/nchanged">@nchanged</a> from <a href="https://github.com/fuse-box/fuse-box">FuseBox</a>.</p>
<p>Perhaps I have an addiction to debunking stale solutions. Even though I get a tremendous amount of value from webpack, I'd love to see it built from the ground up, and everything made a lot simpler while still being flexible. I know I'm not alone in that feeling. FuseBox seems to show promise of being able to do that, but perhaps it's easier said than done. Webpack is also getting easier by the day, so it may be unnecessary.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you've ever felt Redux deserved a routing solution native to its workflow, give Redux-First Router a try :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview James! Redux-First Router seems like a great addition to the ecosystem!</p>
<p>Below you have a chronological history of how my James' product lines have been progressing thus far:</p>
<p><strong>Redux-First Router:</strong></p>
<ul>
<li><a href="https://medium.com/@faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea">Release Article -- Everything Doesn't Need To Be A Component</a></li>
<li><a href="https://medium.com/faceyspacey/redux-first-router-lookin-sexy-on-code-sandbox-d9d9bea15053">The "Sexy" On CodeSandBox Article</a></li>
<li><a href="https://medium.com/faceyspacey/redux-first-router-data-fetching-solving-the-80-use-case-for-async-middleware-14529606c262">The 80% Use Case Article: Data-Fetching + Middleware Debunking</a></li>
</ul>
<p><strong>Universal:</strong></p>
<ul>
<li><a href="https://medium.com/@faceyspacey/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8">"Code Cracked"--The Article That Started It All</a></li>
<li><a href="https://medium.com/@faceyspacey/how-to-use-webpacks-new-magic-comment-feature-with-react-universal-component-ssr-a38fd3e296a">The "Magic Comments" Article</a></li>
<li><a href="https://medium.com/faceyspacey/webpacks-import-will-soon-fetch-js-css-here-s-how-you-do-it-today-4eb5b4929852">An Accidentally Popular Article On Importing Both JS + CSS ("dual imports")</a></li>
<li><a href="https://medium.com/faceyspacey/announcing-react-universal-component-2-0-babel-plugin-universal-import-5702d59ec1f4">Announcing: React Universal Component 2.0 & babel-plugin-universal-import</a></li>
</ul>
<p><strong>Repositories:</strong></p>
<ul>
<li><a href="https://github.com/faceyspacey/redux-first-router">redux-first-router</a> 🚀</li>
<li><a href="https://github.com/faceyspacey/react-universal-component">react-universal-component</a></li>
<li><a href="https://github.com/faceyspacey/webpack-flush-chunks">webpack-flush-chunks</a></li>
<li><a href="https://github.com/faceyspacey/extract-css-chunks-webpack-plugin">extract-css-chunks-webpack-plugin</a></li>
<li><a href="https://github.com/faceyspacey/babel-plugin-universal-import">babel-plugin-universal-import</a></li>
</ul>
<p>And, if you'd like to give Redux-First Router a try, you can do so right here:</p>
<iframe src="https://codesandbox.io/embed/github/faceyspacey/redux-first-router-codesandbox/tree/master/?module=%2FroutesMap.js" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
documentation.js - The documentation system for modern JavaScript - Interview with Tom MacWrightadocumentationjsthedocumentationsystemformodernjavascriptinterviewwithtommacwright2017-07-31t00:00:00z2017-07-31T00:00:00Z<p>When you are using a library seriously, you will spend a lot of time with its documentation. It's one of those things that sets good libraries apart from the rest. Even a fantastic idea can go overlooked if it's too difficult to get into and understand.</p>
<p>Writing good documentation isn't easy. <a href="https://twitter.com/tmcw">Tom MacWright</a> has developed <a href="http://documentation.js.org/">documentation.js</a> to help exactly with this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/69a180136f3c237769452a4af0bbb9a1?s=200" alt="Tom MacWright" class="author" width="100" height="100" />
</span>
At work, I'm a software engineer but also spend a lot of time writing, designing products, and so on. Until recently, that was in the mapping space at <a href="https://mapbox.com/">Mapbox</a>. I wrote lots of libraries that sliced and diced geospatial data, showed it on screens, and helped people design maps.
</p>
<p>The last big project I worked on there was <a href="https://www.mapbox.com/mapbox-studio/">Mapbox Studio</a>. There are enough hard problems in the world of maps to spend a lifetime trying to solve them, but I decided to try out some new domains. I've been taking a few months off to relax, so recently I've been spending more time training a few bonsai trees and maintaining open source projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-documentation-js-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-documentation-js-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>documentation.js</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-documentation-js-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>documentation.js</em> is a program that generates documentation from the source code of other programs. The documentation is a combination of things that you write, like paragraphs, explaining what a function does, and things that <em>documentation.js</em> itself can infer, like the types of parameters and return values.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-documentation-js-work-" id="how-does-documentation-js-work-"></a><span class="text">How does <em>documentation.js</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-documentation-js-work-">#</a></h2>
<p>To infer facts about source code, we stand on the shoulders of a giant, which in this case is named <a href="https://github.com/babel/babel">Babel</a>. That project has an excellent JavaScript parser called <a href="https://github.com/babel/babylon">Babylon</a>, as well as lots of other tools for interacting with parsed JavaScript structures. Using these helpers, we can, for instance, find all functions declared in a file, ask them for parameter types, names, return values, and lots more.</p>
<p>Then there's the trickiest step: combining that automatically-derived documentation with explicit documentation, things that people write themselves as source code comments. That's all done by merging tree data-structures and so on, and is one of the parts I most want to refactor!</p>
<p>Then, finally, it has a significant output system that can generate JSON, Markdown, and HTML documentation. I want the output to be <em>great</em> as a carrot for people to write documentation, so the project itself is responsible for at least the official theme.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-documentation-js-differ-from-other-solutions-" id="how-does-documentation-js-differ-from-other-solutions-"></a><span class="text">How does <em>documentation.js</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-documentation-js-differ-from-other-solutions-">#</a></h2>
<p>Documentation is a crowded space! There are lots of documentation generators out there, which is why I maintain a big list of them on a wiki page called <a href="https://github.com/documentationjs/documentation/wiki/See-also">See Also</a>.</p>
<p>The biggest player out there is <a href="http://usejsdoc.org/">JSDoc</a>, so I'll describe how <em>documentation.js</em> is different than it. First off, <em>documentation.js</em> has a system for automatically figuring out which files to document - doing the same trick as webpack or browserify to figure out what requires what and which functions are exported. I wanted that, so that code itself would be the authority that tells us what is a public interface and what is private.</p>
<p>The other big difference is that <em>documentation.js</em> aims to be universal and modern. We want to support new JavaScript features shortly after they're announced, and to use <a href="https://flow.org/">Flow</a> types as information for automatic documentation. I was seeing so much information that previously fit into documentation, like property types, instead of fitting into type systems like Flow, and I want to embrace that trend by leveraging that type information for documentation too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-documentation-js-" id="why-did-you-develop-documentation-js-"></a><span class="text">Why did you develop <em>documentation.js</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-documentation-js-">#</a></h2>
<p>I was using JSDoc quite a bit - first for the <a href="http://turfjs.org/">Turf</a> project, and then for <a href="https://www.mapbox.com/mapbox-gl-js/api/">Mapbox GL JS documentation</a>. JSDoc is a great tool and still in many ways better and more robust than <em>documentation.js</em>. But it's in a place where lots of people rely on its stability, and the JavaScript ecosystem has changed so much since it was designed. My thought was that building something from scratch could make new styles of documentation possible.</p>
<p>Plus, it's a lot of fun. Documentation generation might seem bland at first glance, but it's an adventure through parsing, generation, static analysis, and so much more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>My highest priority is to grow the <em>documentation.js</em> community. I have lots of strategies for doing this, but nothing has worked so far. That's the most important thing to me, and I also think to most maintainers of large projects.</p>
<p>The other thing is learning from other projects. I've been amazed by the progress being made by projects like <a href="https://esdoc.org/">ESDoc</a> and always think there are better ways I could structure <em>documentation.js</em>. Plus, there's an unending list of tasks that just entail keeping up with JavaScript itself: there are still some features like decorators that we don't support yet.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-documentation-js-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-documentation-js-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>documentation.js</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-documentation-js-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>It's bright but uncertain: I love where the project is currently, but it's substantial and has many areas that could use their owners. In a perfect world we'd have a team of 4 or 5 and, for an example of the ownership, support for TypeScript could be "owned" by someone who needed and used that support on a daily basis. As it stands right now, I'm pumped when another project or company adopts the module, but the ratio of work to contributors continues to increase.</p>
<p>Web development is weird and crazy right now. I think the biggest, most exciting development we'll see in the next year is the effect of the bleeding-edge tech that was introduced two years ago becoming standard in all browsers. Native support for ES6 modules, for instance, will change the landscape.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>First of all, stay patient. Coding is challenging and frustrating, and the single most reliable sign I've noticed of whether people will succeed is their ability to cope with frustration. You might need to laugh at yourself, or stop and breathe, or take a walk. But find something that works, because the feeling of being fooled by a program that <em>should</em> work will never end.</p>
<p>Secondly, you can get far by only working on the surface level, but you really shouldn't. Dig in, learn what's under the hood, read the code, and you'll get better, faster.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/wooorm">Titus Wormer</a> has been doing for natural language what Babel has done for JavaScript. <a href="https://twitter.com/LeaVerou">Lea Verou</a>'s <a href="https://mavo.io/">mavo</a> project is incredibly fascinating. <a href="https://github.com/maryrosecook">Mary Rose Cook</a>'s projects about gaming, programming languages, and entry points for new people to tech are amazing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for having me! Stay chill, and remember: the open source community is just some people, and it could be you too. Only you can fight maintainer burnout by being friendly and contributing code, documentation, or even just love to your favorite projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Tom! I hope people find your tool and we get enhanced documentation as a result.</p>
<p>See <a href="http://documentation.js.org/">documentation.js site</a> and <a href="https://github.com/documentationjs/documentation">documentation.js GitHub page</a> to learn more about the project.</p>
Rill - Universal web application framework - Interview with Dylan Pierceyarilluniversalwebapplicationframeworkinterviewwithdylanpiercey2017-07-28t00:00:00z2017-07-28T00:00:00Z<p>There's a lot of talk about universal web applications but developing them tends to be harder than it might sound. You will have to worry about the differences between environments, and you will find problems you might not have anticipated.</p>
<p>To understand the topic better, I'm interviewing <a href="https://twitter.com/dylan_piercey">Dylan Piercey</a>, the author of <a href="https://rill.site/">Rill</a>, a framework designed to address this particular problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/b61015f2b07ed0be4478713bed9348ef?s=200" alt="Dylan Piercey" class="author" width="100" height="100" />
</span>
I like to tinker. As a kid, I enjoyed modding video games and got into programming when I was 12 years old. I've programmed professionally for about four years now and fell in love with the massive community behind web development.
</p>
<p>Open source software has been my peaceful haven since I learned git. For me, programming is fun, especially on my terms, and FOSS is exactly that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-rill-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-rill-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Rill</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-rill-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/rill-js/rill">Rill</a> is my two-year-old baby. In JavaScript terms that means it's just turned 21. Jokes aside <a href="https://github.com/rill-js/rill">Rill</a> is a tool that allows you to learn fewer tools. It is <a href="https://github.com/koajs/koa">Koa</a> designed and optimized from the ground up to work in the browser.</p>
<p>So how does this help? Well, first of all, you get one router for both the browser and Node, meaning you <em>can</em> drop react-router and <a href="https://github.com/koajs/koa">Koa</a>.</p>
<p>Secondly, you also get to think of building web applications as if you have a <em>zero latency node server</em> in every user's browser. With this, you can quickly create fault-tolerant, progressively-enhanced websites with minimal effort.</p>
<p>Finally, it is a flexible abstraction, just like it is on the server-side already in <a href="https://github.com/expressjs/express">Express</a> and <a href="https://github.com/koajs/koa">Koa</a>. With <a href="https://github.com/rill-js/rill">Rill</a> I have been able to replace many tools including Redux. It also supports many different rendering engines with more on the way. <a href="https://github.com/rill-js/rill">Rill</a> also plays nicely with all of the other libraries making upgrading a bit easier.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rill-work-" id="how-does-rill-work-"></a><span class="text">How does <em>Rill</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rill-work-">#</a></h2>
<p>Depends on where you look. <a href="https://github.com/rill-js/rill">Rill</a> on the server-side is more or less a rip-off of <a href="https://github.com/koajs/koa">Koa</a> with some careful forethought, but in the browser things get interesting.</p>
<p>In the browser, <a href="https://github.com/rill-js/rill">Rill</a> works by intercepting all <code><a></code> clicks and <code><form></code> submissions and pumping them through a browser-side router with the same API as on the server-side. It supports pretty much anything you can think of including cookies, redirects and <a href="https://github.com/rill-js/session">sessions</a>, all isomorphically implemented (i.e. on both the server and browser).</p>
<p>There are a few huge wins here. For instance, you don't have to use any particular <code><Link></code> tags or similar and you aren't tied to <a href="https://facebook.github.io/react">React</a>. The server-side also doesn't need to do anything fancy to handle links and forms. Lastly, you already know how links and forms work, so just use them.</p>
<p>If you'd like to take a look at Rill's link/form hijacking logic it has been separated out into <a href="https://github.com/rill-js/http/blob/master/adapter/document.js">@rill/http</a>, making the main <a href="https://github.com/rill-js/rill">Rill</a> repository completely universal!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rill-differ-from-other-solutions-" id="how-does-rill-differ-from-other-solutions-"></a><span class="text">How does <em>Rill</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rill-differ-from-other-solutions-">#</a></h2>
<p>It provides a unified router. While developing universal applications, I often found myself writing routes twice. As if that wasn't bad enough the syntax for the routers were often vastly different - try comparing <a href="https://github.com/ReactTraining/react-router">react-router</a> with <a href="https://github.com/expressjs/express">Express</a> and you'll see what I mean.</p>
<p><a href="https://github.com/rill-js/rill">Rill</a> aims to simplify that and provides a consistent routing interface between the server and browser. It also works perfectly fine as a standalone router in either one.</p>
<p>Take for instance the following example:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> rill <span class="token keyword keyword-from" >from</span> <span class="token string" >'rill'</span>
<span class="token keyword keyword-import" >import</span> bodyMiddleware <span class="token keyword keyword-from" >from</span> <span class="token string" >'@rill/body'</span>
<span class="token keyword keyword-import" >import</span> reactMiddleware <span class="token keyword keyword-from" >from</span> <span class="token string" >'@rill/react'</span>
<span class="token comment" spellcheck="true" >// Setup app.</span>
<span class="token keyword keyword-const" >const</span> app <span class="token operator" >=</span> <span class="token function" >rill</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Use isomomorphic React renderer.</span>
app<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >reactMiddleware</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Use an isomorphic form-data / body parser.</span>
app<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >bodyMiddleware</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Register our form page route as normal.</span>
app<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'/my-form-page'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> req<span class="token punctuation" >,</span> res <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
res<span class="token punctuation" >.</span>body <span class="token operator" >=</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>MyForm</span><span class="token punctuation" >/></span></span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Setup our post route.</span>
app<span class="token punctuation" >.</span><span class="token function" >post</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'/my-form-submit'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> req<span class="token punctuation" >,</span> res <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Analyze the response body (works in node and the browser).</span>
req<span class="token punctuation" >.</span>body <span class="token comment" spellcheck="true" >//-> { email: ... }</span>
<span class="token comment" spellcheck="true" >// Perform the business logic (typically calling some api).</span>
<span class="token operator" >...</span>
<span class="token comment" spellcheck="true" >// Finally, take the user somewhere meaningful.</span>
res<span class="token punctuation" >.</span><span class="token function" >redirect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'/thank-you'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Start app.</span>
app<span class="token punctuation" >.</span><span class="token function" >listen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> port<span class="token punctuation" >:</span> <span class="token number" >3000</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Simple full page react component with a form.</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >MyForm</span> <span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>html</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>head</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>title</span><span class="token punctuation" >></span></span>My App<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>title</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>head</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>body</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>form</span> <span class="token attr-name" >action</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>/my-form-submit<span class="token punctuation" >"</span></span> <span class="token attr-name" >method</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>POST<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
Email<span class="token punctuation" >:</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>input</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>email<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>submit<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Subscribe<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>form</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>script</span> <span class="token attr-name" >src</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>/app.js<span class="token punctuation" >"</span></span><span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>body</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>html</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Notice how similar this looks to the server only code. You get to use middleware and routing in a way you probably already know. However, the above example when compiled with <a href="https://webpack.js.org">webpack</a>, <a href="https://rollupjs.org">Rollup</a>, or <a href="http://browserify.org">Browserify</a> will also work in the browser!</p>
<p>For a more detailed example check out the <a href="https://github.com/rill-js/todomvc">TodoMVC</a> implementation with <a href="https://facebook.github.io/react">React</a> and <a href="https://github.com/rill-js/rill">Rill</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-rill-" id="why-did-you-develop-rill-"></a><span class="text">Why did you develop <em>Rill</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-rill-">#</a></h2>
<p>I've built 20+ websites and applications all of which needed strong SEO and proper fallbacks for our users using legacy browsers. It became a constant struggle to enhance content for modern browsers while maintaining support for older ones.</p>
<p>Rather than building a server-side solution and then rebuilding a client side solution my goal was to make a framework that allowed me to do both at once. It was originally inspired by <a href="https://github.com/kentjs/koa-client">koa-client</a> and <a href="https://github.com/matthewwithanm/monorouter">monorouter</a>, and it turned out to be a robust solution.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Well, that's largely up to what I build next and what the community requires.
<a href="https://github.com/rill-js/rill">Rill</a> has been pretty stable for the past year. Most of the major work has caused no breaking changes.</p>
<p>One of the more recent changes is that <a href="https://github.com/rill-js/rill">Rill</a> is now able to run in a service worker, which I think could be interesting for offloading the router to another thread.</p>
<p>Another thing that I have meant to explore is a creating a <a href="https://github.com/rill-js/rill">Rill</a> middleware that works similarly to <a href="http://pixelscommander.github.io/Viral.JS/#.WW5GmsYZNP0">ViralJS</a> allowing for distributed rendering of applications.</p>
<p>Something that's been in the back of my head for a while now is making <a href="https://github.com/rill-js/rill">Rill</a> work on other platforms. The code has been formatted in such a way that the document logic has all been extracted into a single file, but I have limited experience with native applications and need a kick to get me going on this front.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-rill-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-rill-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Rill</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-rill-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>For <a href="https://github.com/rill-js/rill">Rill</a> the future is hard to see. I've mentioned some obvious features above, but the point of it, as with any router, is to be flexible. <a href="https://github.com/rill-js/rill">Rill</a> in my eyes is a foundation for isomorphic/universal apps and what I've built with it so far is only the tip of the iceberg.</p>
<p>In general, I think that things are going to get simpler, faster and smaller. It never seems that way while I'm riding the wave of JavaScript frameworks, but at the same time things are constantly popping up like <a href="https://svelte.technology">svelte</a> and <a href="https://choo.io">choo</a>, which are all considerably simpler than their predecessors and also faster and smaller.</p>
<p>However, the main reason I think this is the case is that the web will eventually bake in much more of the functionality that is needed for modern applications such as web components. I think the abstractions will get lighter and lighter until they fade away.</p>
<p>At least I hope this trend continues. 😜</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Make a GitHub/Twitter account and follow everyone who's doing something cool. You have teachers all around you, and excellent open source software sets a standard to which you can eventually live up to.</p>
<p>Don't sweat the stuff you don't know but try to be aware of it. Learn things when you need them and actively search out new solutions when you find that yours are lacking.</p>
<p>Find something fun to build. It's far too easy for your day job to ruin programming for you. Try to find genuinely interesting and fun things and work on them when you have time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I'd love to hear more from <a href="https://github.com/patrick-steele-idem">Patrick Steele-Idem</a> on all of the crazy optimizations available with <a href="https://github.com/marko-js/marko">MarkoJS</a> and where the team thinks it's going. I hope a stable <a href="https://github.com/rill-js/marko">Rill integration</a> is coming soon. 😄</p>
<p>I'm also constantly impressed by the quality of modules pumped out by <a href="https://github.com/yoshuawuyts">Yoshua Wuyts</a> and would be interested in his approach to building them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p><a href="https://github.com/rill-js/rill">Rill</a> is a lesser-known tool and I am always eager to receive community feedback. If anyone has any questions or just wants to chat, you can always find me on the <a href="https://gitter.im/rill-js/rill">gitter</a>.</p>
<p>Thanks SurviveJS for the interview and <a href="https://twitter.com/Rich_Harris">Rich Harris</a> for the recommendation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Dylan! The approach Rill uses is refreshing and I hope people find it.</p>
<p>Check out <a href="https://rill.site/">Rill site</a> and <a href="https://github.com/rill-js/rill">Rill GitHub page</a> to learn more about it.</p>
d-l-l - Easy, automatic, optimized DLL config handler for webpack - Interview with James Wiensadlleasyautomaticoptimizeddllconfighandlerforwebpackinterviewwithjameswiens2017-07-24t00:00:00z2017-07-24T00:00:00Z<p>Perhaps one of my favorite <a href="https://survivejs.com/webpack/optimizing/performance/">webpack performance related tricks</a> is setting up DLLs so that you <em>avoid work</em>. The problem is that maintaining the setup requires time and effort. What if there was a better way?</p>
<p><a href="https://twitter.com/aretecode">James Wiens</a> has been exploring a better solution with <a href="https://www.npmjs.com/package/d-l-l">d-l-l</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/ab0f2e5163119f3aeaaf52fe1739a655.jpg" alt="James Wiens" class="author" width="100" height="100" /><figcaption>James Wiens</figcaption></figure>
👋 I'm a flow state enthusiast and crafting code is my life's passion. I'm from Vancouver, Canada, eh.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-d-l-l-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-d-l-l-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>d-l-l</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-d-l-l-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>d-l-l</em> makes your webpack build faster in just a few lines, without having to waste time on the slow manual configuration steps required to use the <a href="https://webpack.js.org/plugins/dll-plugin">DllPlugin</a>.</p>
<p>The DllPlugin lets you pre-build the parts of your code that don't often change (such as library code). This means when you change the parts that do change more often, webpack only needs to build these parts, which makes builds exponentially faster.</p>
<p><em>d-l-l</em> adds some helpful utilities for finding and adding dependencies and files that do not often change.</p>
<p><figure><img src="/478e8b8cdb937e6ffe9cfa542e31c42d.jpg" alt="Webpack dinosaurs" class="" width="" height="" /><figcaption>Webpack dinosaurs</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-s-a-minimal-example-using-d-l-l-" id="what-s-a-minimal-example-using-d-l-l-"></a><span class="text">What's a minimal example using <em>d-l-l</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-s-a-minimal-example-using-d-l-l-">#</a></h2>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> dll <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'d-l-l'</span><span class="token punctuation brackets-parentheses" >)</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> dll
<span class="token punctuation" >.</span><span class="token function" >init</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Directory to resolve paths from</span>
<span class="token punctuation" >.</span><span class="token function" >dir</span><span class="token punctuation brackets-parentheses" >(</span>__dirname<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Pass in webpack config</span>
<span class="token punctuation" >.</span><span class="token function" >config</span><span class="token punctuation brackets-parentheses" >(</span>config<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Filter to only use non-dev dependencies</span>
<span class="token punctuation" >.</span><span class="token function" >pkgDeps</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>deps<span class="token punctuation" >,</span> dev<span class="token punctuation" >,</span> all<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> deps<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Find all src files</span>
<span class="token punctuation" >.</span><span class="token function" >find</span><span class="token punctuation brackets-parentheses" >(</span>'src<span class="token comment" spellcheck="true" >/**/</span><span class="token operator" >*</span><span class="token punctuation" >.</span><span class="token operator" >+</span><span class="token punctuation brackets-parentheses" >(</span>js<span class="token operator" >|</span>jsx<span class="token punctuation brackets-parentheses" >)</span>'<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Filter to files last modified at least a day ago</span>
<span class="token punctuation" >.</span><span class="token function" >lastModifiedFilter</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>days<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Return an array of webpack configurations</span>
<span class="token punctuation" >.</span><span class="token function" >toConfig</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-d-l-l-work-" id="how-does-d-l-l-work-"></a><span class="text">How does <em>d-l-l</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-d-l-l-work-">#</a></h2>
<p><figure><img src="/d148142889188dfb43fec3401e51ada6.jpg" alt="What if I told you that you could make a webpack build go from 1 minute to 1 second?" class="" width="" height="" /><figcaption>What if I told you that you could make a webpack build go from 1 minute to 1 second?</figcaption></figure></p>
<p><em>d-l-l</em> creates an array of webpack configuration consisting of a DLL-only webpack config followed by the existing config from your webpack.config.js.</p>
<p>Cache files are created in a <code>.fliphub</code> folder, which allows some smart-ish checks such as:</p>
<ol>
<li>Analysis of your webpack config</li>
<li>Extraction of essential parts from it, such as the output path</li>
<li>Usage of the configuration passed via <code>.config()</code></li>
</ol>
<p>The cache files also allow <em>d-l-l</em> to add the decorated dll config if no cache folder or files exist or if there are no manifest files showing what was built and where.</p>
<p>When the cache should be cleared is configurable:</p>
<ul>
<li>when <a href="https://github.com/fliphub/d-l-l/wiki/%F0%9F%8C%90-api#cachebustingfiles">cache-busting-files</a> are modified</li>
<li><a href="https://github.com/fliphub/d-l-l/wiki/%F0%9F%8C%90-api#everyx">every X (default 33) builds</a></li>
<li><a href="https://github.com/fliphub/d-l-l/wiki/%F0%9F%8C%90-api#staletime">a day or more has passed since the last build</a></li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-example" id="advanced-example"></a><span class="text">Advanced Example</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-example">#</a></h2>
<p>Now that we've covered a bit of background, an advanced use case should be more understandable:</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> dll <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'d-l-l'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-const" >const</span> configs <span class="token operator" >=</span> dll
<span class="token punctuation" >.</span><span class="token function" >init</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Verbose debugging</span>
<span class="token punctuation" >.</span><span class="token function" >debug</span><span class="token punctuation brackets-parentheses" >(</span><span class="token boolean" >true</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Force building of DLL</span>
<span class="token punctuation" >.</span><span class="token function" >shouldBeUsed</span><span class="token punctuation brackets-parentheses" >(</span><span class="token boolean" >true</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Return original config, makes it easy to swap side-effect free</span>
<span class="token punctuation" >.</span><span class="token function" >og</span><span class="token punctuation brackets-parentheses" >(</span><span class="token boolean" >true</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Same as in the simple example above</span>
<span class="token punctuation" >.</span><span class="token function" >dir</span><span class="token punctuation brackets-parentheses" >(</span>__dirname<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >config</span><span class="token punctuation brackets-parentheses" >(</span>config<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Provide resolved dependency paths manually</span>
<span class="token punctuation" >.</span><span class="token function" >deps</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token string" >'lodash'</span><span class="token punctuation" >,</span> <span class="token string" >'inferno'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>dep <span class="token operator" >=></span> require<span class="token punctuation" >.</span><span class="token function" >resolve</span><span class="token punctuation brackets-parentheses" >(</span>dep<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Filter dependencies in package.json</span>
<span class="token punctuation" >.</span><span class="token function" >pkgDeps</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>deps<span class="token punctuation" >,</span> devDeps<span class="token punctuation" >,</span> allDeps<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Ignore dependencies that have `dev` in them.</span>
<span class="token comment" spellcheck="true" >// Development tools are one example.</span>
<span class="token keyword keyword-return" >return</span> deps<span class="token punctuation" >.</span><span class="token function" >filter</span><span class="token punctuation brackets-parentheses" >(</span>dep <span class="token operator" >=></span> <span class="token operator" >!</span><span class="token regex" >/dev/</span><span class="token punctuation" >.</span><span class="token function" >test</span><span class="token punctuation brackets-parentheses" >(</span>dep<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Find files matching a glob</span>
<span class="token punctuation" >.</span><span class="token function" >find</span><span class="token punctuation brackets-parentheses" >(</span>'src<span class="token comment" spellcheck="true" >/**/</span><span class="token operator" >*</span><span class="token punctuation" >.</span><span class="token operator" >+</span><span class="token punctuation brackets-parentheses" >(</span>js<span class="token operator" >|</span>jsx<span class="token punctuation brackets-parentheses" >)</span>'<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >lastModifiedFilter</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>days<span class="token punctuation" >:</span> <span class="token number" >1</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Return an array of webpack configurations</span>
<span class="token punctuation" >.</span><span class="token function" >toConfig</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-d-l-l-differ-from-other-solutions-" id="how-does-d-l-l-differ-from-other-solutions-"></a><span class="text">How does <em>d-l-l</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-d-l-l-differ-from-other-solutions-">#</a></h2>
<p>There are no other solutions. The only other option is do everything <em>d-l-l</em> does yourself manually. Doing this means maintaining the additional DLL configuration and referencing it in your code. The point of <em>d-l-l</em> is to avoid this complexity.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> <a href="https://www.npmjs.com/package/autodll-webpack-plugin">autodll-webpack-plugin</a> is a comparable plugin based solution.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-d-l-l-" id="why-did-you-develop-d-l-l-"></a><span class="text">Why did you develop <em>d-l-l</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-d-l-l-">#</a></h2>
<p>I was developing <a href="https://github.com/fliphub/fliphub">fliphub</a> and found there was no webpack documentation for the <a href="https://webpack.js.org/plugins/dll-plugin">DllPlugin</a>. As I researched and experimented with the plugin, I discovered how powerful it was but how clunky it was to configure it.</p>
<p>To expand on what I mean by clunky, the DllPlugin requires two separate webpack configurations! The order is important - the DLL config has to be built before the normal config. If the normal config uses the <a href="https://webpack.js.org/plugins/dll-plugin">DLLReferencePlugin</a> before the DLL config has been built, the build will fail.</p>
<p>Adding even more commands to the build process wasn't going to happen, so <em>d-l-l</em> was born.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p><em>d-l-l</em> will be updated with more features. In an ideal future, the core solution it provides would be integrated into webpack core.</p>
<p>The minimum, most effective plan to integrate it into the core would involve the following changes for <em>d-l-l</em>:</p>
<ul>
<li>Trim down dependencies</li>
<li>Improve focus in logic and the code domain</li>
<li>Extract features enabling ease of use</li>
<li>Cover edge cases with air-tight tests</li>
<li>Merge to webpack core</li>
</ul>
<p>Once that would be done, the whole community could benefit from the functionality.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#chain-able" id="chain-able"></a><span class="text">chain-able</span><a class="header-anchor-select" href="https://survivejs.com/#chain-able">#</a></h3>
<p>All of the libraries I create use <a href="https://github.com/fluents/chain-able">chain-able</a>, which enables me to easily create interfaces that describe their intentions and make simple solutions for complex problems.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-wrap" id="webpack-wrap"></a><span class="text">webpack-wrap</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-wrap">#</a></h3>
<p>I plan to create a wrapper library around webpack (webpack-wrap), allowing easy and smart configuration by following this plan:</p>
<ul>
<li>Abstract the <a href="https://github.com/fliphub/d-l-l">d-l-l</a> wrapper</li>
<li>Simplify splitting with the <a href="https://github.com/aretecode/webpack-plugin-split">webpack-split-plugin</a></li>
<li>Enable webpack merging using <a href="https://github.com/mozilla-neutrino/neutrino-dev">neutrino</a> presets in your webpack config</li>
<li>Finish <a href="https://www.npmjs.com/package/happypack2">happypack2</a> and <a href="https://github.com/fluents/chain-able-webpack">chain-able-webpack</a> which allows for:<ul>
<li>Automatic wrapping of configs in a similar fashion</li>
<li>Automatic traversable path resolving (resolving all relative paths in your config)</li>
<li>Integration with <a href="https://github.com/webpack/webpack-cli">webpack-cli</a></li>
<li>Hints for common misconfigurations</li>
</ul>
</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<ul>
<li>Tools and language support can be improved. Developers want to use the coolest hottest sugar syntax which sometimes still needs advanced skills.</li>
<li>Companies competing in open source for developers will promote their particular flavor of the latest and greatest tech.</li>
<li>Artificial intelligence will be easier to use and more widespread in both open source and private code.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I couldn't fit it reasonably in this block, so I made it into a repo: <a href="https://github.com/aretecode/awesome-advice">awesome-advice</a>.</p>
<ul>
<li>15-minute rule (proverbial)<ul>
<li>If you ask for help on a problem before doing at least 15 minutes of work researching, debugging, and defining your problem, you're doing the other person a disservice.</li>
<li>If you wait longer than 45 minutes and you are stuck, you are doing yourself a disservice.</li>
</ul>
</li>
<li>The three essential skills in programming:<ul>
<li>#1. how to research</li>
<li>#2. how to research</li>
<li>#3. how to research</li>
</ul>
</li>
<li>The better the problem is defined, the better the solution will be</li>
<li>Have <a href="https://twitter.com/svensauleau/status/856424137493008384">variable names describe their intention</a></li>
<li>Premature optimization is the root of all evil</li>
<li>Make it debuggable</li>
<li>Join the community and contribute</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ol>
<li><a href="https://github.com/eliperelman">Eli Perelman</a></li>
<li><a href="https://github.com/nchanged">nchanged</a></li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview James! I hope this work eventually finds its way to webpack proper. That would make the approach more approachable to a lot of people.</p>
<p>You can find <a href="https://github.com/fliphub/d-l-l">d-l-l on GitHub</a>.</p>
<p>See also the following resources for further information:</p>
<ul>
<li><a href="https://github.com/webpack/webpack/tree/master/examples/dll">Official webpack DLL example</a></li>
<li><a href="https://robertknight.me.uk/posts/webpack-dll-plugins/">Robert Knight's article on the DllPlugin</a></li>
<li><a href="http://engineering.invisionapp.com/post/optimizing-webpack/">InVision on optimizing webpack builds with the DllPlugin</a></li>
<li><a href="https://medium.com/connect-the-dots/caching-assets-long-term-with-webpack-5ad24a4c39bd">Caching assets long term with the DllPlugin</a></li>
<li><a href="https://stackoverflow.com/questions/36986460/selecting-webpack-dll-bundle-via-scope-mode">DllPlugin question and answer on Stack Overflow</a></li>
</ul>
Material-UI - React Components that Implement Google's Material Design - Interview with Olivier Tassinariamaterialuireactcomponentsthatimplementgoogle39smaterialdesigninterviewwitholiviertassinari2017-07-21t00:00:00z2017-07-21T00:00:00Z<p>Design is difficult as you have to come up with a set of rules to describe it – a system. You don't always have to devise one yourself, and <a href="https://material.io/">Material Design</a> by Google is one starting point.</p>
<p>To understand the topic better, I'm interviewing <a href="https://twitter.com/olivtassinari">Olivier Tassinari</a>, one of the authors of <a href="https://github.com/callemall/material-ui">Material UI</a>. It's a collection of React components which implement the system.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/e2b3127c877367bce1892635ffe153d0?s=200" alt="Olivier Tassinari" class="author" width="100" height="100" />
</span>
I spent my childhood mastering LEGO, but I ended up as a software engineer. I started with web development back in 2008. I went on to graduate from one of the most prestigious and selective <em>grandes écoles</em> in France with a Master's Degree in computer science.
</p>
<p>Sometime later I worked at Doctolib, the leading booking platform, and management software provider for doctors in France.</p>
<p>Besides coding I love sports, swimming, running and from time to time climbing.
I'm training to beat my 10k record next year.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-material-ui-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-material-ui-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Material-UI</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-material-ui-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/callemall/material-ui">Material-UI</a> provides user interface components which can be reused in different contexts. That's our core mission - we are a UI library.</p>
<p>The React, Angular, Vue, Ember and Polymer ecosystems all have the concept of components.
We have chosen to implement the <a href="https://material.io/guidelines/">Material Design Specification</a> in <a href="https://facebook.github.io/react/">React</a> components.</p>
<p>Let's say you want to display a nice button, all you need to do is the following (example for Material-UI v1):</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> Button <span class="token keyword keyword-from" >from</span> <span class="token string" >'material-ui/Button'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >MyApp</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token operator" ><</span>Button<span class="token operator" >></span>I Will Survive<span class="token operator" ><</span><span class="token operator" >/</span>Button<span class="token operator" >></span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> MyApp<span class="token punctuation" >;</span>
</code></pre>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> This would be a good chance to use <a href="https://www.npmjs.com/package/babel-plugin-transform-imports">babel-plugin-transform-imports</a> as it can rewrite <code>import { Button } from 'material-ui';</code> to above while still pulling the same amount of code to the project.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-material-ui-work-" id="how-does-material-ui-work-"></a><span class="text">How does <em>Material-UI</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-material-ui-work-">#</a></h2>
<p>Most of the heavy lifting in <em>Material-UI</em> is done by React and <a href="https://github.com/cssinjs/jss">JSS</a>.
While we bet on React early in 2014 and have stuck with it,
we are already at our <strong>third iteration</strong> on our choice of a styling solution.
We started with Less, tried inline styles, and now are switching to <strong>CSS in JS</strong> thanks to JSS.</p>
<p>One of the first things people ask when they find out about the library is how to customize the style of it.
In the past our answer to that question was not ideal, but it's improving now.
Through the evolution of components in different contexts, we have identified and addressed four types of customization going (ordered from most specific to most generic):</p>
<ul>
<li><a href="https://material-ui-1dab0.firebaseapp.com/customization/overrides#1-specific-variation-for-a-one-time-situation">Specific variation for a one-time situation</a></li>
<li><a href="https://material-ui-1dab0.firebaseapp.com/customization/overrides#2-specific-variation-of-a-component">Specific variation of a component made by a user and used in different contexts</a></li>
<li><a href="https://material-ui-1dab0.firebaseapp.com/customization/overrides#3-material-design-variations">Material Design variations like with the buttons</a></li>
<li><a href="https://material-ui-1dab0.firebaseapp.com/customization/overrides#4-user-global-theme-variation">User global theme variation</a></li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about JSS, see <a href="https://survivejs.com/blog/jss-interview/">the interview of Oleg Slobodskoi</a>, the author of the tool.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-material-ui-differ-from-other-solutions-" id="how-does-material-ui-differ-from-other-solutions-"></a><span class="text">How does <em>Material-UI</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-material-ui-differ-from-other-solutions-">#</a></h2>
<p>It helps to understand the tradeoffs we have made.
At some point when building a UI library or even a presentational component, one aspect will need to be prioritized over another.
So let's see what we have prioritized and what we have not.</p>
<p>I believe that <strong>most of the value of using a UI library comes from the API contract it provides</strong>. But at the same time, API design is one of the hardest things to do when building a UI library.</p>
<ol>
<li>We want the API to be consistent. We want to reduce the cognitive overhead of learning our API. Doing this is prioritized over an API tuned for specific contexts.</li>
<li>We want the API to be low-level. By low-level, we mean close to the DOM elements.
<strong>It's simpler to work with no abstraction than the wrong abstraction</strong> and low-level APIs more easily allow composition. We encourage users to build on top of it. If they create something that is helpful for more users, it can be integrated into the library. We have prioritized these things over a higher-level API.</li>
</ol>
<p>However, sometimes we have to trade consistency and level of abstraction to have a good enough implementation.</p>
<ol>
<li>We want our components to work in isolation as much as possible.
For instance, we consider global styles an anti-pattern, not to mention their implications for code splitting.
Also, developers should be able to use only one of our components without paying a large overhead.</li>
<li>We want the implementation to be performant.</li>
<li>We want our components to be easily customizable from the outside.</li>
<li>We want our components to be accessible.</li>
</ol>
<p>Finally, we would rather support fewer use-cases well and allow people to build on top of the library than supporting more use-cases poorly.
You can read further in our <a href="https://material-ui-1dab0.firebaseapp.com/discover-more/vision#material-ui-s-vision">vision for the project</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-material-ui-" id="why-did-you-develop-material-ui-"></a><span class="text">Why did you develop <em>Material-UI</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-material-ui-">#</a></h2>
<p>The credit for creating <em>Material-UI</em> goes to <a href="https://twitter.com/haicea">Hai Nguyen</a>.
I have been contributing since six months after the first release.</p>
<p>Ironically, my original motivation for choosing <em>Material-UI</em> for a <a href="https://github.com/oliviertassinari/SplitMe">fun-side project</a> (to save time by using an existing React implementation of Material Design) is at odds with the effort I put in as a maintainer now. I have spent a lot of time improving the library.</p>
<p>But I don't regret it as I have learned a lot in the process, ranging from how to conduct social interactions in a community to the ins and outs of the web stack, API design, <a href="https://www.argos-ci.com/callemall/material-ui">visual testing</a> and more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-comes-next-" id="what-comes-next-"></a><span class="text">What comes next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-comes-next-">#</a></h2>
<p>We are going to try to follow this plan:</p>
<ol>
<li>Publish the first beta releases.</li>
<li>Fix the last API inconsistencies (in beta we will still make breaking changes).</li>
<li>Merge the beta branch into master.</li>
<li>Publish the first pre-releases and fix any issues that come up.</li>
<li>Publish v1! 🎉</li>
</ol>
<p>At that point, some features and components from v0.x will be missing in v1.
So, what about them?</p>
<ul>
<li>Both versions can be used at the same time, meaning projects can progressively migrate to the new version, one component at the time.</li>
<li>Over time and with help from the community, more and more components will be implemented in v1.</li>
<li>Finally, in alignment with our vision, we would rather support fewer use-cases which may mean that some features and components will not be in the v1 core.</li>
</ul>
<p>All of the plans above are in <a href="https://github.com/callemall/material-ui/blob/master/ROADMAP.md">our roadmap</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-material-ui-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-material-ui-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Material-UI</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-material-ui-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p><em>Material-UI</em> is popular in the React ecosystem, but Google recently changed their strategy with <a href="https://github.com/material-components/material-components-web">material-components-web</a>.
Depending on how well <code>material-components-web</code> solves the problem, <em>Material-UI</em> <a href="https://github.com/callemall/material-ui/issues/6799">might use it internally</a>.</p>
<p>But at the same time, <em>Material-UI</em>'s goal goes further than just providing an elegant implementation of the Material Design guidelines.
The Material Design specification sets the bar quite high, and developers should be able to benefit from that while easily customizing it for their needs.</p>
<p>This customization work is what I have been collaborating on lately at work.
We have been taking advantage of <em>Material-UI</em>'s customization power to implement a brand-specific UI far from the Material Design specification. You can think of it as a Bootstrap theme. I believe this can be a useful strategy for other developers too.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<ul>
<li>Learn to focus on what matters. It's so easy to lose focus and work on the wrong thing.</li>
<li>Learn the ins and outs of the abstractions you use.</li>
<li>Keep the big picture in mind.</li>
<li>Be curious about the details. In a codebase, nothing exists by chance. Learn and understand the "why" behind things.</li>
<li>Sleep well.</li>
<li>Stay active with something like sports. It's always how I get my best ideas.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/arunoda">Arunoda Susiripala</a> for the awesome work he has been doing with the <strong>ZEIT</strong> team on <a href="https://github.com/zeit/next.js">Next.js</a>.
React was the last JavaScript project that I was as excited about as I am about Next.js. The user experience and developer experience is way beyond anything I have used before.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Special thanks to the core <em>Material-UI</em> team:</p>
<ul>
<li><a href="https://twitter.com/haicea">Hai Nguyen</a></li>
<li><a href="https://twitter.com/randomtechdude">Matt Brookes</a></li>
<li><a href="https://github.com/nathanmarks">Nathan Marks</a></li>
<li><a href="https://twitter.com/rosskevin">Kevin Ross</a></li>
</ul>
<p>Thank you <a href="https://twitter.com/oleg008">Oleg Slobodskoi</a> for open sourcing JSS.</p>
<p>And thanks for having me on the blog!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Olivier! It's great to see solid UI libraries for React as that has been traditionally a little weak point but looks like the situation is improving.</p>
<p>See <a href="http://www.material-ui.com/">Material UI site</a> and <a href="https://github.com/callemall/material-ui">Material UI GitHub</a> to learn more about the project.</p>
Fall Tour - Vienna Clinics, ReactNext, WebExpo, ReactiveConfafalltourviennaclinicsreactnextwebexporeactiveconf2017-07-19t00:00:00z2017-07-19T00:00:00Z<p>Even though I have traveled a lot this year already, it looks like more travel is in store. The travels so far have been valuable regarding experience. I've seen more places in this year than during my previous year alone. And I like to think it has made me better rounded as a person. Getting outside of your comfort zone can be a good thing even if it is a little painful.</p>
<p>As a result of my travels, I've gained a better insight on what to do next. And perhaps surprisingly I've won more good excuses to venture. Actions tend to generate reactions. Opportunities follow the brave ones and so on.</p>
<p>I have some clear steps ahead of me. There are still blanks, but it's not a bad thing!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-vienna-austria-23-7-26-8-" id="-vienna-austria-23-7-26-8-"></a><span class="text"><del>Vienna, Austria - 23.7-26.8</del></span><a class="header-anchor-select" href="https://survivejs.com/#-vienna-austria-23-7-26-8-">#</a></h2>
<p>I'll begin this trip from Vienna. To slow down a bit, I'll stay there an entire month. I like the city a lot, and there seem to be business opportunities available if you know where to find them. One advantage is that this also allows me to reach most of the central Europe quickly if some business comes up.</p>
<p>I'll be running <a href="https://survivejs.com/clinic/">clinics</a> during my time in Vienna. They are three-hour sessions focused on webpack. I have <a href="https://presentations.survivejs.com/webpack-the-good-parts/">a particular set of slides</a> to guide the discussion. Also, discussion over React is possible. The point of a clinic is to provide as much value as I can in two hours, and it can be adapted based on your needs.</p>
<p>A clinic session of two hours costs 500 euros (VAT 0) for a company. I offer the same for individual developers for the price of 150 euros (capped to four developers per session). 20% of the income goes to Tobias Koppers as I want to support his efforts on webpack. You'll also have a chance to ask questions from him at the end of the session. I'll get the answers to you afterwards.</p>
<p>I can also organize <a href="https://survivejs.com/workshop/">full day workshops</a> in Vienna and nearby cities, even further. If you are interested, get in touch, and we'll make the schedule work.</p>
<p>My schedule for Vienna is relaxed, and it gives me time to do certain technical work that has been pending a while. It's also an excellent opportunity to write and prepare two presentations!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-tel-aviv-israel-reactnext-6-9-12-9-" id="-tel-aviv-israel-reactnext-6-9-12-9-"></a><span class="text"><del>Tel Aviv, Israel - ReactNext - 6.9-12.9</del></span><a class="header-anchor-select" href="https://survivejs.com/#-tel-aviv-israel-reactnext-6-9-12-9-">#</a></h2>
<p>I was invited to participate in <a href="http://react-next.com/">ReactNext</a> this year. I'll be talking about how to use webpack, particularly with React. I think it won't be a slide show and I hope to pull off something practical! So live coding might be in store with a high probability.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-prague-czech-republic-webexpo-19-25-9-" id="-prague-czech-republic-webexpo-19-25-9-"></a><span class="text"><del>Prague, Czech Republic - WebExpo - 19-25.9</del></span><a class="header-anchor-select" href="https://survivejs.com/#-prague-czech-republic-webexpo-19-25-9-">#</a></h2>
<p>I will give a presentation discussing how I built my business at <a href="https://www.webexpo.net/">WebExpo</a>. It's going to be a mix of business, technical, and personal bits. A good time for a retrospective.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-bratislava-slovakia-reactiveconf-25-27-10-" id="-bratislava-slovakia-reactiveconf-25-27-10-"></a><span class="text"><del>Bratislava, Slovakia - ReactiveConf - 25-27.10</del></span><a class="header-anchor-select" href="https://survivejs.com/#-bratislava-slovakia-reactiveconf-25-27-10-">#</a></h2>
<p>You'll see me in <a href="https://reactiveconf.com/">ReactiveConf</a> this year as well. I don't have a presentation scheduled, but we'll do a webpack workshop on the third day.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>It looks like this will be travel filled year for me. It has been one of those personal growth years for me, and it has shaped the direction of the next years for sure. It is possible this isn't the last year of travel for me.</p>
<p>Note that I have plenty of room in my schedule. So if you want to see me in your meetup or conference and are willing to cover my costs while providing me a chance to turn a profit, it might be difficult for me to say no! I'm especially open to opportunities available in Europe, and I may be able to bring some other developers with me.</p>
dont-break - Check if you break dependents - Interview with Gleb Bahmutovadontbreakcheckifyoubreakdependentsinterviewwithglebbahmutov2017-07-17t00:00:00z2017-07-17T00:00:00Z<p>Releasing new versions of npm modules is an <code>npm publish</code> away. But how do you make sure you don't accidentally break a dependent project? Even if you are careful and test your module well, someone may be depending on a behavior you are not testing.</p>
<p><a href="https://www.npmjs.com/package/dont-break">dont-break</a>, a tool by <a href="https://twitter.com/bahmutov">Gleb Bahmutov</a>, was designed to address this problem.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/4ca757a644d8fa2518f6308c6dfe6b24?s=200" alt="Gleb Bahmutov" class="author" width="100" height="100" />
</span>
I have a degree in computer vision. I did panorama stitching and 3D scanners for a while which meant heavy duty C++ programming. At a certain point, I wanted to expand the areas of the business that I worked in: beyond image acquisition and processing. I also wanted to show results and make them useful to the users, for which I needed JavaScript. Now I mostly do Node.js and JS hacks.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-dont-break-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-dont-break-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>dont-break</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-dont-break-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Here is the problem with software development today: there are <del>thousands</del> millions of software modules in the world, and every language has its own public registry: Maven for Java, npm for JavaScript, and so on. Each module has multiple versions. Your module probably depends on some modules (upstream dependencies) and other modules may depend on your module (downstream dependencies).</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#updating-upstream-dependencies" id="updating-upstream-dependencies"></a><span class="text">Updating Upstream Dependencies</span><a class="header-anchor-select" href="https://survivejs.com/#updating-upstream-dependencies">#</a></h3>
<p>If there are new versions of upstream dependencies, you should probably upgrade versions carefully. I wrote <a href="https://github.com/bahmutov/next-update">next-update</a>, a CLI tool that tries each new version of an upstream dependency, runs your tests and if the tests pass, upgrades the dependencies to their new versions.</p>
<p>There are services that automate this, like GreenKeeper and <a href="https://www.npmjs.com/package/renovate">renovate</a>. The feedback loop is pretty quick: the tool installs a new version of an upstream dependency, runs your tests and displays the result given the new version is compatible or breaks your module.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> <a href="https://survivejs.com/blog/renovate-interview/">Read the interview about renovate</a> to learn more about it.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-problem-of-downstream-dependencies" id="the-problem-of-downstream-dependencies"></a><span class="text">The Problem of Downstream Dependencies</span><a class="header-anchor-select" href="https://survivejs.com/#the-problem-of-downstream-dependencies">#</a></h3>
<p>However, this does not address issues in downstream dependencies caused by new versions of your module. Maybe you changed the API or released a bug with the new version, and the downstream dependencies cannot upgrade without breaking their tests.</p>
<p>The feedback loop is super long - you publish a new version, a while later maintainers of a downstream dependency try to upgrade to the new version, their tests fail, and finally a bug is opened in your project (if they feel generous).</p>
<p><a href="https://github.com/bahmutov/dont-break">dont-break</a> turns the tables - you can test downstream dependencies with new, unpublished versions of your module to see if the new code breaks them or not.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-dont-break-work-" id="how-does-dont-break-work-"></a><span class="text">How does <em>dont-break</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-dont-break-work-">#</a></h2>
<p><em>dont-break</em> is a CLI tool that can find and test downstream dependencies of your npm module. Here's the basic algorithm:</p>
<ol>
<li>For each downstream dependency, firstly the repository will be found and cloned.</li>
<li>To ensure the dependency's tests run from a new clone, the tests will be run once using <em>the dependency's version of your module</em>.</li>
<li>If they pass, the new, unpublished version of your module will be copied into the dependency's <code>node_modules</code> directory, and the tests run again.</li>
<li>If the tests also pass with your unpublished version, this dependency can be considered functional with your new version.</li>
</ol>
<p>This can be done for as many downstream dependencies as you'd like, and if no relevant issues are found, the new version of your module can be safely published.</p>
<p>A good example is <a href="https://github.com/bahmutov/snap-shot-core">snap-shot-core</a>, which is checked against its downstream dependencies <em>snap-shot</em> and <em>schema-shot</em>, among others. The project <em>snap-shot</em> is in turn checked against its downstream dependencies <em>snap-shot-jest-test</em>, <em>snap-shot-ava-test</em>, etc. In diagram form it looks like this:</p>
<p><figure><img src="/c7224d21bb861fb849db26d952073c1a.png" alt="snap-shot in a diagram form" class="" width="" height="" /><figcaption>snap-shot in a diagram form</figcaption></figure></p>
<p>The above slide is from my presentation that I highly recommend to anyone working in the npm ecosystem: <a href="https://slides.com/bahmutov/self-improving-software-node-week">Self Improving Software</a>. It demonstrates <em>dont-break</em> via the <em>dont-crack</em> wrapper (see below).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-dont-break-differ-from-other-solutions-" id="how-does-dont-break-differ-from-other-solutions-"></a><span class="text">How does <em>dont-break</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-dont-break-differ-from-other-solutions-">#</a></h2>
<p>As far as I know, there are no similar tools. Few people like publishing new versions of their modules that are compatible with previously published ones as much as I do (just kidding). Hopefully, in the near future, each project will always stay up to date and will be carefully tested against existing "users" (downstream dependencies) before releasing a patch version for example.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-dont-break-" id="why-did-you-develop-dont-break-"></a><span class="text">Why did you develop <em>dont-break</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-dont-break-">#</a></h2>
<p>I love, love, love writing new software (you can find links to my open source projects at <a href="https://glebbahmutov.com/">https://glebbahmutov.com/</a>), but I am lazy too. In my opinion, the easiest way to produce a lot of useful software is to do two things:</p>
<ol>
<li>Use existing modules rather than writing your own</li>
<li>Keep dependencies up to date to benefit from new features and bug fixes written by others</li>
</ol>
<p>After publishing some modules, I noticed that I would routinely set up a lot of the same tools for each of them, so I <a href="https://glebbahmutov.com/blog/quick-solid-module/">automated my project setup</a>. By using <a href="https://github.com/semantic-release/semantic-release">semantic-release</a>, I also achieved an automated publishing process.</p>
<p>The problem was that I still had to write tests to make sure minor and patch releases didn't cause issues for existing "users" (downstream dependencies). To avoid extra testing work, I started cloning downstream projects, copying my new code into those folders and running the tests. Bingo! The idea was born: why don't I automate this?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I have two things planned for the future (well, one is well under way, the other is still just a vague idea).</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#-dont-crack-" id="-dont-crack-"></a><span class="text"><em>dont-crack</em></span><a class="header-anchor-select" href="https://survivejs.com/#-dont-crack-">#</a></h3>
<p>There is a <em>semantic-release</em> plugin I wrote called <a href="https://github.com/bahmutov/dont-crack">dont-crack</a> that wraps <em>dont-break</em> to avoid having to run it locally. My Continuous Integration setup looks at the commits since the last release, and if it decides that it should publish a new <code>minor</code> or <code>patch</code> version (meaning, there should be no breaking API changes), it runs <em>dont-break</em> to confirm that downstream dependencies do not break.</p>
<p>If a downstream dependency does break, that means our change was <em>incompatible</em>, and it should be published as a <em>breaking major</em> change. Doing this lets the downstream maintainers know there is an update, but it will require some work. Otherwise, we are all good and can safely publish a <code>minor</code> or <code>patch</code> version.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#sending-reports-back-to-other-projects" id="sending-reports-back-to-other-projects"></a><span class="text">Sending Reports Back to Other Projects</span><a class="header-anchor-select" href="https://survivejs.com/#sending-reports-back-to-other-projects">#</a></h3>
<p>I am interested in how to send good bug reports back to your module if one of the downstream dependencies suddenly breaks. Imagine a new version of your module is breaking someone else's module. Do I just see a stack trace from their module - a project I do not maintain or know? Or can we somehow show precisely <em>what behaves differently</em> between the previous version of your module and the latest code?</p>
<p>Solving the second problem will finally enable large source code monorepos to be split up. Working on an individual component and being able to test it against its dependencies in a nice, fast and useful way would be huge!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-trends-do-you-see-in-the-future-what-advice-would-you-give-to-someone-starting-with-web-development-" id="what-trends-do-you-see-in-the-future-what-advice-would-you-give-to-someone-starting-with-web-development-"></a><span class="text">What trends do you see in the future? What advice would you give to someone starting with web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-trends-do-you-see-in-the-future-what-advice-would-you-give-to-someone-starting-with-web-development-">#</a></h2>
<p>I see a huge push towards immutable <em>everything</em>. I see this in data structures (you cannot modify an object because someone else relies on it), deployment (Docker, immutable infrastructure) and the npm registry (cannot unpublish a version already there).</p>
<p>The concept of "this artifact is permanent and is not going to disappear" is nice. Thus my advice would be to learn how to update objects without mutating the original ones, find out how to deploy many times per day and learn about deploying a new system instead of <em>tinkering with a running system</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Please, please interview my coworker, <a href="https://twitter.com/be_mann">Brian Mann</a> the founder of <a href="https://www.cypress.io/">Cypress.io</a>. Of course, it is a shameless plug, since we work together on the fantastic E2E testing tool (it is going to be open sourced soon, I promise). He has a good sense of what makes web application feature testing hard and why existing solutions like Selenium are not enough. Also, I disagree with Brian a lot, but love hearing his take on things!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Gleb! I think if the community adopted tools like <em>dont-break</em>, that would be one step forward in solving the npm package quality problem. Perhaps some of these problems could be pushed to a service level to help people improve the quality of their work while enhancing the ecosystem.</p>
<p>To learn more about <em>dont-break</em>, <a href="https://github.com/bahmutov/dont-break">check out the GitHub project</a>.</p>
Rollup - Next-generation ES6 module bundler - Interview with Rich Harrisarollupnextgenerationes6modulebundlerinterviewwithrichharris2017-07-10t00:00:00z2017-07-10T00:00:00Z<p>Given JavaScript application source cannot be consumed easily through the browser "as is" just yet, the process of <strong>bundling</strong> is needed. The point is to convert the source into a form the browser can understand. This is the reason why bundlers, such as Browserify, Rollup, or webpack exist.</p>
<p>To dig deeper into the topic, I'm interviewing <a href="https://twitter.com/Rich_Harris">Rich Harris</a>, the author of Rollup.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I <a href="https://survivejs.com/blog/svelte-interview/">interviewed Rich earlier about Svelte</a>, a UI framework of his.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/329f9d32fe20b186838ee237d3eb2d43?s=200" alt="Rich Harris" class="author" width="100" height="100" />
</span>
I'm a graphics editor at the New York Times, working on the investigations team — part journalist, part developer. Before that I did a similar job at the Guardian. Part of my role historically has been to build tools that allow us to create and deploy projects at the speed of news, which can be pretty aggressive — <a href="https://rollupjs.org">Rollup</a>, <a href="https://buble.surge.sh">Bublé</a> and <a href="https://svelte.technology">Svelte</a>, among others, are all products of that.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-rollup-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-rollup-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Rollup</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-rollup-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Rollup is a module bundler. Basically, it concatenates JavaScript files, except you don't have to manually specify the order of them or worry about variable names in one file conflicting with names in another. Under the hood it's a bit more sophisticated than that, but in essence that's all it's doing — concatenating.</p>
<p>The reason you'd use it is so that you can write software in a modular way — which is better for your sanity for lots of reasons — using the <code>import</code> and <code>export</code> keywords that were added to the language in ES2015. Since browsers and Node.js don't yet support ES2015 modules (ESM) natively, we have to bundle our modules in order to run them.</p>
<p>Rollup can create self-executing <code><script></code> files, AMD modules, Node-friendly CommonJS modules, UMD modules (which are a combination of all three), or even ESM bundles that can be used in <em>other</em> projects.</p>
<p>Which is ideal for libraries. In fact, most major JavaScript libraries that I can think of — React, Vue, Angular, Glimmer, D3, Three.js, PouchDB, Moment, Most.js, Preact, Redux, etc — are built with Rollup.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rollup-work-" id="how-does-rollup-work-"></a><span class="text">How does <em>Rollup</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rollup-work-">#</a></h2>
<p>You give it an entry point — let's say <code>index.js</code>. Rollup will read that file and parse it using Acorn — this gives us something called an abstract syntax tree (AST). Once you have the AST you can discover lots of things about the code, such as which <code>import</code> declarations it contains.</p>
<p>Let's say <code>index.js</code> has this line at the top:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> foo <span class="token keyword keyword-from" >from</span> <span class="token string" >'./foo.js'</span><span class="token punctuation" >;</span>
</code></pre>
<p>That means that Rollup needs to resolve <code>./foo.js</code> relative to <code>index.js</code>, load it, parse it, analyse it, lather, rinse and repeat until there are no more modules to import. Crucially, all these steps are pluggable, so you can augment Rollup with the ability to import from <code>node_modules</code> or compile ES2015 to ES5 in a sourcemap-aware way, for example.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rollup-differ-from-other-solutions-" id="how-does-rollup-differ-from-other-solutions-"></a><span class="text">How does <em>Rollup</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rollup-differ-from-other-solutions-">#</a></h2>
<p>Firstly, there's zero overhead. The traditional approach to bundling is to wrap every module in a function, put those functions in an array, and implement a <code>require</code> function that plucks those functions out of the array and executes them on demand. It turns out <a href="https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/">this is terrible</a> for both bundle size and startup time.</p>
<p>Instead, Rollup essentially just concatenates your code — there's no waste, and the resulting bundle minifies better. Some people call this 'scope hoisting'.</p>
<p>Secondly, it removes unused code from the modules you import, which is called 'treeshaking' for reasons that no-one is certain of.</p>
<p>It's worth noting that webpack implements a form of scope hoisting and treeshaking in the most recent version, so it's catching up to Rollup in terms of bundle size and startup time (though we're still ahead!). Webpack is generally considered the better option if you're building an app rather than a library, since it has a lot of features that Rollup doesn't — code splitting, dynamic imports and so-on.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To understand the difference between the tools, <a href="https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c">read "Webpack and Rollup: the same but different"</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-rollup-" id="why-did-you-develop-rollup-"></a><span class="text">Why did you develop <em>Rollup</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-rollup-">#</a></h2>
<p>Necessity. None of the existing tools were good enough.</p>
<p>A few years ago, I was working on a project called <a href="https://ractive.js.org">Ractive</a>, and I was frustrated with our build process. The more we split the codebase up into modules, the larger the build got, because of the overhead I described earlier. We were effectively being penalised for doing the right thing.</p>
<p>So I wrote a module bundler called Esperanto and released it as a separate open source project. Lo and behold, our builds shrank. But I wasn't satisfied, because I'd read something <a href="https://twitter.com/jo_liss">Jo Liss</a> had written about how ESM — being designed with static analysis in mind — would allow us to do treeshaking. Esperanto didn't have that ability.</p>
<p>Adding treeshaking to Esperanto would have been very difficult, so I burned it all and started over with Rollup.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about ESM, <a href="https://survivejs.com/blog/es-modules-interview/">read the interview of Bradley Farias</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I would love to get Rollup to a place where we can call it 'done', so that I don't have to think about it any more. It's not an exciting project to work on, since module bundling is an incredibly boring subject. It's basically just plumbing — essential but unglamorous.</p>
<p>There's a fair distance to go before we get there though. And I feel a certain responsibility to keep the community looked after, since I've been such a vocal advocate for ESM.</p>
<p>We're getting to an exciting place though — browsers are just starting to add native module support, and now that webpack has scope hoisting, there are very tangible benefits to using ESM everywhere. So we'll hopefully see ESM take over from CommonJS modules very soon. (If you're still writing CommonJS, stop! You're just creating technical debt.)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-rollup-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-rollup-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Rollup</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-rollup-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>For one thing, Rollup will become increasingly obsolete. Once browsers support modules natively, there'll be a large class of applications for which bundling (and everything that goes with it — compiling, minifying and so on) will just be an optional performance optimisation, as opposed to a necessity. That's going to be <em>huge</em>, particularly for newcomers to web development.</p>
<p>But at the same time we're increasingly using our build processes to add sophisticated capabilities to our applications. I'm a proponent of that — <a href="https://svelte.technology">Svelte</a> is a compiler that essentially writes your app for you from a declarative template — and it's only going to get more intense with the advent of WASM and other things.</p>
<p>So we have these two seemingly contradictory trends happening simultaneously, and it'll be fascinating to see how they play out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Watch other programmers over their shoulders. Read source code. Develop taste by building things, and being proud of them but never satisifed. Learn the fundamentals, because all abstractions are leaky. Learn what 'all abstractions are leaky' means. Turn your computer off and go outside, because most of your best programming will happen away from your keyboard.</p>
<p>Most importantly, take programming advice with a pinch of salt. As soon as someone reaches the stage where people start asking them to offer advice, they forget what it was like to be a new developer. No-one knows anything anyway.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I really like following the work of people who straddle the line between JavaScript and disciplines like dataviz, WebGL, cartography and animation — people like <a href="https://twitter.com/mourner">Vladimir Agafonkin</a>, <a href="https://twitter.com/mathisonian">Matthew Conlen</a>, <a href="https://twitter.com/sarah_edo">Sarah Drasner</a>, <a href="https://twitter.com/monfera">Robert Monfera</a>, and <a href="https://twitter.com/tmcw">Tom MacWright</a>.</p>
<p>On the web development front more generally, I've been enjoying playing around with <a href="https://rill.site">Rill</a> by <a href="https://twitter.com/dylan_piercey">Dylan Piercey</a>. It's a universal router that lets you write Express-style apps that also work in the browser, and it's really well thought through. For me it hits the sweet spot between boosting productivity and not being overly opinionated.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Rollup would love your help! It's a fairly important part of the ecosystem nowadays, but I don't have nearly enough time to give it the attention it deserves, and the same is true for all our contributors. If you're interested in helping out with a tool that indirectly benefits millions (perhaps billions!) of web users, get in touch with us.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Rich! Rollup is an amazing tool and well worth learning especially for library authors. I hope we can skip the entire bundling step one day as that would make things simpler.</p>
<p>To learn more about Rollup, <a href="https://rollupjs.org/">check out the online documentation</a>. You can also <a href="https://github.com/rollup/rollup">find the project on GitHub</a>.</p>
JSS - Author CSS Using JavaScript as a Host Language - Interview with Oleg Slobodskoiajssauthorcssusingjavascriptasahostlanguageinterviewwitholegslobodskoi2017-07-07t00:00:00z2017-07-07T00:00:00Z<p>If there's one thing that divides web developers, it's styling. A part of this has to do with the different requirements of websites and web applications. What is good in another domain, is an anti-pattern in another.</p>
<p>To understand the topic better, I am interviewing <a href="https://twitter.com/oleg008">Oleg Slobodskoi</a>, the author of <a href="http://cssinjs.org">JSS</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p><span class="author">
<img src="https://avatars1.githubusercontent.com/u/52824?v=3&s=200" alt="Oleg Slobodskoi" class="author" width="100" height="100" /></p>
<p>Working on web UIs for over a decade, I have realized there are two significant challenges in frontend engineering: understanding the state and styling its representation. Unidirectional data flow has made managing state much easier, but styling components is still painful. </span></p>
<p>To improve the situation, I started JSS back in 2014 and haven't stopped learning and developing the project since. Currently, I am working at <a href="https://www.chatgrape.com/">Chatgrape</a> where we are building a sophisticated client using NLP and deep services integration. All CSS is managed using JSS. Also, I try to talk at conferences from time to time, even if I know I suck at this haha.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-jss-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-jss-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe JSS to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-jss-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>In general, "CSS in JS" libraries are authoring tools which allow you to generate CSS. The paradigm is similar to Sass, Less or Stylus in this regard, the difference being that the host language JavaScript is well-standardized.</p>
<p>JSS is a set of libraries for writing CSS in JavaScript. They address a wide spectrum of issues. The most significant features are class names scoping, critical CSS extraction, significantly improved maintenance, code reuse and sharing, theming, co-location and state-driven styles.</p>
<p>It is important to understand though that not every product has all of the issues that these features address, so not every developer can relate to them or even confirm that they are real. If you don't get it - don't worry, the time for you just hasn't come yet.</p>
<p>One general truth you could take away from this is that JSS is a more powerful abstraction over CSS, which is good and bad at the same time. Less powerful abstractions may be of benefit for less experienced developers because less can be done incorrectly, but they certainly have limitations.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-jss-work-" id="how-does-jss-work-"></a><span class="text">How does JSS work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-jss-work-">#</a></h2>
<p>The essential libraries in JSS are core, React-JSS, and Styled-JSS. Low level and library-agnostic, the core is responsible for compilation and rendering of a stylesheet.</p>
<p>The core is used by both React-JSS and Styled-JSS internally. React-JSS is a higher-order component providing an interface for React. Styled-JSS is an alternative interface for React which implements the styled primitives factory.</p>
<p>Styled primitive or styled component is a component which has initial styles applied when created. There is no need to provide class names when you use it. It has been very actively promoted by the <a href="https://www.styled-components.com">Styled Components</a> library and is worth looking into as an alternative to other interfaces. Our implementation, in fact, combines both styled primitives and a classes map in one solid interface.</p>
<p>The general process goes like this:</p>
<ol>
<li>Declaration: Styles are described by the user in JavaScript. By default we use <a href="http://cssinjs.org/json-api">JSON Syntax</a>.</li>
<li>Processing: Styles are processed by JSS plugins. Plugins do vendor prefixing, implement syntactic sugar for user styles and can be made to do any other transformations, similar to PostCSS.</li>
<li>Injection: Once you call the <code>.attach</code> method, styles are compiled to a CSS string and injected into the DOM using a <code>style</code> element.</li>
</ol>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#examples" id="examples"></a><span class="text">Examples</span><a class="header-anchor-select" href="https://survivejs.com/#examples">#</a></h3>
<p><strong>Example using the low level <a href="https://github.com/cssinjs/jss">core library</a></strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> jss <span class="token keyword keyword-from" >from</span> <span class="token string" >"jss"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> preset <span class="token keyword keyword-from" >from</span> <span class="token string" >"jss-preset-default"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// One-time setup.</span>
jss<span class="token punctuation" >.</span><span class="token function" >setup</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >preset</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> styles <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
button<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"red"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Compile and render the styles.</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> classes <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> jss<span class="token punctuation" >.</span><span class="token function" >createStyleSheet</span><span class="token punctuation brackets-parentheses" >(</span>styles<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >attach</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
document<span class="token punctuation" >.</span>body<span class="token punctuation" >.</span>innerHTML <span class="token operator" >=</span> `
<span class="token operator" ><</span>button <span class="token keyword keyword-class" >class</span><span class="token operator" >=</span><span class="token string" >"${classes.button}"</span><span class="token operator" >></span>
My Button
<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
`<span class="token punctuation" >;</span>
</code></pre>
<p><strong>Example using <a href="http://cssinjs.org/react-jss">React-JSS</a></strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> injectSheet <span class="token keyword keyword-from" >from</span> <span class="token string" >"react-jss"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> styles <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
button<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"red"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Button</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> classes <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>button className<span class="token operator" >=</span><span class="token punctuation brackets-braces" >{</span>classes<span class="token punctuation" >.</span>button<span class="token punctuation brackets-braces" >}</span><span class="token operator" >></span>My Button<span class="token operator" ><</span><span class="token operator" >/</span>button<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Function injectSheet generates a HOC, which uses JSS and passes `classes` to the `Button`.</span>
<span class="token keyword keyword-const" >const</span> StyledButton <span class="token operator" >=</span> <span class="token function" >injectSheet</span><span class="token punctuation brackets-parentheses" >(</span>styles<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span>Button<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>Example using <a href="http://cssinjs.org/styled-jss">Styled-JSS</a></strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> styled <span class="token keyword keyword-from" >from</span> <span class="token string" >"styled-jss"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Produces a button which has the styles already applied.</span>
<span class="token keyword keyword-const" >const</span> MyButton <span class="token operator" >=</span> <span class="token function" >styled</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"button"</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"red"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-jss-differ-from-other-solutions-" id="how-does-jss-differ-from-other-solutions-"></a><span class="text">How does JSS differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-jss-differ-from-other-solutions-">#</a></h2>
<p>There are too many differences to name them all. To name a few:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#it-is-not-one-monolithic-library" id="it-is-not-one-monolithic-library"></a><span class="text">It is not one monolithic library</span><a class="header-anchor-select" href="https://survivejs.com/#it-is-not-one-monolithic-library">#</a></h3>
<p>JSS is a set of libraries, each designed to solve a specific set of tasks strongly decoupled from each other. As a result, the user enjoys greater flexibility and cleaner abstractions. For example, the core is not coupled to React, which means it can be used with any framework.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#-plugin-api-http-cssinjs-org-plugins-" id="-plugin-api-http-cssinjs-org-plugins-"></a><span class="text"><a href="http://cssinjs.org/plugins">Plugin API</a></span><a class="header-anchor-select" href="https://survivejs.com/#-plugin-api-http-cssinjs-org-plugins-">#</a></h3>
<p>The plugin API allows you to manipulate sheets, rules and react on updates. In fact, most features are implemented internally as plugins as well.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#focus-on-performance" id="focus-on-performance"></a><span class="text">Focus on performance</span><a class="header-anchor-select" href="https://survivejs.com/#focus-on-performance">#</a></h3>
<p>Focus on performance has always been of the highest importance. JSS is one of the most performant libraries available. That said, it is hard to compare accurately because some features and implementation details differ a lot between libraries. We benchmark every possible small detail, and we track regressions for each change.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#-function-values-http-cssinjs-org-json-api-v-v8-0-0-function-values-" id="-function-values-http-cssinjs-org-json-api-v-v8-0-0-function-values-"></a><span class="text"><a href="http://cssinjs.org/json-api/?v=v8.0.0#function-values">Function values</a></span><a class="header-anchor-select" href="https://survivejs.com/#-function-values-http-cssinjs-org-json-api-v-v8-0-0-function-values-">#</a></h3>
<p>Function values are now widely supported by other CSS in JS libraries. However, JSS differs in that it allows for high-performance JavaScript controlled animations like in the <a href="http://cssinjs.org/function-values">function value example</a>.</p>
<p>It is possible because JSS doesn't generate new CSS rules for each animation step. It is updating CSS values, the same way it would be done using inline styles. I wrote <a href="https://medium.com/dailyjs/high-performance-dynamic-styles-db28c873940">an article to give you more implementation details</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#counter-based-class-names-generation-by-default" id="counter-based-class-names-generation-by-default"></a><span class="text">Counter based class names generation by default</span><a class="header-anchor-select" href="https://survivejs.com/#counter-based-class-names-generation-by-default">#</a></h3>
<p>The main problem with auto-generated class names is that they need to be deterministic. In case you generate HTML and CSS from the server and then want to update both at runtime dynamically, you need to make sure the class names generated at runtime will always match those on the server.</p>
<p>To solve these most libraries use hashes, though they have limitations:</p>
<ol>
<li><strong>Performance:</strong> To create a hash the CSS rule declaration needs to be stringified and a hashing algorithm run, incurring overhead.</li>
<li><strong>Source order specificity:</strong> A number of equal CSS rules will be generated with identical class names, which will override each other. The problem is that application logic might expect the CSS rules in a certain order in the case that one rule is designed to override another rule based on the order of occurrence in the source code. In this case, source order can't be guaranteed and will result in rare but very unpleasant bugs.</li>
<li><strong>High-performance function values:</strong> these wouldn't be possible, because after update of any values, the hash would need to be recreated and the class name on the DOM node updated, leading to an unacceptable degradation in performance.</li>
<li><strong>Payload:</strong> Counter-based class names include a simple number which is incremented by each added rule. The number is the most compact, unique identifier available. Hashes are long and bloat the overall CSS size.</li>
</ol>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#no-inline-styles" id="no-inline-styles"></a><span class="text">No Inline Styles</span><a class="header-anchor-select" href="https://survivejs.com/#no-inline-styles">#</a></h3>
<p>JSS does not use any inline styles. Inline styles are slow if you overuse them. They are particularly slow in React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-jss-" id="why-did-you-develop-jss-"></a><span class="text">Why did you develop JSS?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-jss-">#</a></h2>
<p>It is funny because initially I just wanted to use JavaScript as a language to describe styles because I didn't want to learn Sass. Secondly, I didn't want to think how to name my classes in the global scope, because enforcing BEM is hard.</p>
<p>Also, I wanted to eliminate the fear of changing any CSS and breaking unexpected things. Now it has become way more than that, but to put it in one sentence: it is the right abstraction for my tasks, and I enjoy using it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The foremost focus is on making the DX better: better documentation, auto-completion, syntax highlighting, React Native integration, a better CLI tool. The team has done a lot in the past, but a significant amount of work is still ahead of us, and we need highly skilled, motivated contributors to tackle all the challenges.</p>
<p>I am trying to establish a distributed team of people responsible for different parts of this story. To give you an idea, consider the following contributions:</p>
<ul>
<li>Styled-JSS was written mostly by <a href="https://twitter.com/_lttb">@_lttb</a> and theming support is being added now by <a href="https://twitter.com/iamstarkov">@iamstarkov</a>.</li>
<li><a href="https://twitter.com/wikiwi_io">@wikiwi_io</a> is working on the next version of our vendor prefixer and documentation site and the jss-expand plugin was developed by <a href="https://twitter.com/typical001">@typical001</a>.</li>
<li>Our logo was created by <a href="https://twitter.com/okonetchnikov">@okonetchnikov</a>.</li>
</ul>
<p>I would love to continue this with more people on board with more dedication. I am seeing all the time how much they struggle to find time to work on it. For this reason, we recently started <a href="https://github.com/ossfriendly/open-source-sponsors">open source sponsor initiative</a> to shape our industry.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-jss-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-jss-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for JSS and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-jss-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>One problem <strong>all</strong> CSS solutions have in common but that is especially problematic for CSS in JS is the lack of interoperability between the libraries. All CSS in JS solutions use a slightly different DSL to express the styles, which means that the styles are tightly coupled with the library which can parse them.</p>
<p>The big picture looks quite bad right now. Upon installation any package from npm which uses any CSS in JS library different than what's used in the project already, one more library will be installed. Given the fact that currently there are 5-10 well-known CSS in JS solutions, the chances are good that your build will contain all of them at some point.</p>
<p>To solve this, we started to work on <a href="https://github.com/cssinjs/istf-spec">the ISTF (Interoperable Styling Transfer Format) standard</a>. The specification describes a CSS notation designed for high-performance parsing and will serve as an intermediate format for publishing. It is a layer between the consumer library and the authoring library/tool.</p>
<p>Publishers will be able to transpile styles to this format before publishing a package to npm similar to what we do with Babel for ES6. Consumer libraries will then be able to use this format to render CSS most efficiently.</p>
<p>I think this format is the future not only for all CSS in JS libraries but also for well-established languages like Sass. For the end-user, it means that they will be able to use any interface with any syntactic sugar they like to produce CSS, and the result can still be processed by just one library of their choice implementing ISTF, no matter whether it's on the server or the client.</p>
<p>To those who prefer static CSS, don't worry, this case is on top of our priorities. We are not going to force you to generate CSS at runtime.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Take open source seriously. I learned 90% of what I know about computers and programming from it. Also, it is the best way to share the knowledge and become a better engineer and ultimately a better person. I am still learning and trying to become better. It is a lifelong process, so it is important to choose the way we do it wisely.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ul>
<li><a href="https://twitter.com/iamstarkov">@iamstarkov</a> created a <a href="https://github.com/iamstarkov/theming">unified theming solution</a> for React which will be soon used by all the key CSS in JS libraries.</li>
<li><a href="https://twitter.com/olivtassinari">@olivtassinari</a> is doing a great job persistently maintaining Material UI library.</li>
<li><a href="https://twitter.com/_developit">@_developit</a> is pushing the boundaries of what is possible within 3Kb.</li>
<li><a href="https://twitter.com/iamsapegin">@iamsapegin</a> created a tool called <a href="https://react-styleguidist.js.org/">React Styleguidist</a> which provides the best dev environment to write components.</li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> I <a href="https://survivejs.com/blog/styleguidist-interview/">interviewed Artem earlier about Styleguidist</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Oleg! I share your sense of design when it comes to plugin systems. Composition seems like a strong way to solve a lot of problems even if you get certain news in return.</p>
<p>You can <a href="https://github.com/cssinjs/jss">learn more about JSS in GitHub</a> and <a href="http://cssinjs.org/">the official site of JSS</a>.</p>
renovate - Keep npm dependencies up-to-date - Interview with Rhys Arkinsarenovatekeepnpmdependenciesuptodateinterviewwithrhysarkins2017-07-03t00:00:00z2017-07-03T00:00:00Z<p>There's one pain most JavaScript developers share - dependency management. More specifically, how to keep them up to date. Sometimes even one month is a long time as improvements keep coming and the dependencies changing.</p>
<p>To understand a potential solution to this problem, I'm interviewing <a href="https://twitter.com/rarkins">Rhys Arkins</a>, the author of <a href="https://www.npmjs.com/package/renovate">renovate</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/3cf3527d1ff144dd61717720c458802b?s=200" alt="Rhys Arkins" class="author" width="100" height="100" />
</span>
For the past few years I've been building a rental information site in Singapore called <a href="https://keylocation.sg">Key Location</a>. Prior to this I was lucky to catch the tail end of a great period in "telecoms" via a startup that IPO'd and was later acquired.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-renovate-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-renovate-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>renovate</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-renovate-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Renovate provides a way to automate the updating of <code>package.json</code> dependencies within a project's workflow via the use of branches, CI testing and pull requests.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-renovate-work-" id="how-does-renovate-work-"></a><span class="text">How does <em>renovate</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-renovate-work-">#</a></h2>
<p>Renovate scans each repository for all <code>package.json</code> files, and checks with the npm registry if any existing dependencies have newer versions available.</p>
<p>Once <em>renovate</em> has a list of upgrade candidates, it creates branches in the repository for testing each upgrade individually, and can also open pull requests - either immediately after the branch is created or after tests have completed.</p>
<p>By default it also separates major releases into their own branches / pull requests. For example, you might be testing a patch update to webpack 2.x while also seeing if / where webpack 3.0 breaks in your build.</p>
<p>It's somewhat configurable and tries not to be too opinionated, so almost every step above could be accompanied with a "...unless you configure it to..." disclaimer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-renovate-differ-from-other-solutions-" id="how-does-renovate-differ-from-other-solutions-"></a><span class="text">How does <em>renovate</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-renovate-differ-from-other-solutions-">#</a></h2>
<p>The main alternative that many are familiar with is <a href="https://greenkeeper.io/">Greenkeeper</a>, a commercial <em>service</em> for a similar purpose that has deservedly become fairly well known and used.</p>
<p>Philosophically, <em>renovate</em> differs by being an "open source first" project where the primary aim is to allow people to run it themselves easily (e.g. with <code>npm i -g renovate</code>). Existing commercial services had / have the approach of "telling you when updates to your dependencies break your software".</p>
<p>I prefer a default approach of locking down exactly what dependencies are present and not upgrading unless they pass tests. For instance, these other solutions pin dependency versions if something breaks, whereas I prefer to pin the versions by default, including using yarn or npm lock files.</p>
<p>Technically, <em>renovate</em> has a few nice features which I believe are currently unique:</p>
<ul>
<li>Support for both GitHub and GitLab</li>
<li>Autodiscovery of all <code>package.json</code> files in a monorepo</li>
<li>Configurable options at global-, repository-, package file-, dependency <em>type</em>- and package-level (including using regex matching patterns to group related updates)</li>
<li>Fully configurable branch, commit and pull request strings, via handlebars templates</li>
<li>Automatic generation of <code>yarn.lock</code> and <code>package-lock.json</code> files with any <code>package.json</code> updates, if they already existed</li>
<li>Policy-based automerge of dependencies (e.g. minor updates only, <code>devDependencies</code>-only, etc) once they pass tests, to reduce human work</li>
<li>Branch-only automerges: Automerges can also be done with branch commits or merge pushes - no pull request necessary - which greatly reduces the daily GitHub notifications "noise"</li>
<li>Keeping dependencies versions in a <code>yarn.lock</code> updated even if <code>package.json</code> versions haven't changed</li>
<li><em>renovate</em> is itself stateless and bases its logic solely on the npm registry and whatever is in the <code>repository</code>. So if there's a crash or resumption, there is no need to rebuild anything or worry about duplicates.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-renovate-" id="why-did-you-develop-renovate-"></a><span class="text">Why did you develop <em>renovate</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-renovate-">#</a></h2>
<p>Like many others, I had a personal itch to scratch.</p>
<p>I previously had needed to <em>disable</em> automatic dependency updates on my main website project because none of the existing services supported monorepo repository structures. After subsequently wasting half a day troubleshooting a browser issue which turned out to be caused and already fixed by a dependency I had missed updating, I decided I'd hack together a script to manage monorepo <code>package.json</code> updates from the CLI.</p>
<p>Once I found out that it could be done relatively elegantly using the GitHub REST API (not requiring any <code>git</code> cloning), I decided to make it less hacky and open source it for others in a similar situation. So primarily this was driven by a technical need rather than any particular desire to build an open source version of something.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I've recently added <a href="https://github.com/apps/renovate">renovate as a free GitHub app</a>. Again, the code for this is completely open source and I was happy to find out how simple it was to add the integration. As simple as running the script is, I think a lot of people prefer not to maintain yet another server or cron job in their routines so this is another option.</p>
<p>Functionality-wise, I'm looking into:</p>
<ul>
<li>Improved traceability of logs, e.g. being able to filter to just a single dependency to work out why or why it wasn't updated to X</li>
<li>Native "semantic" commit message support. Currently users can edit/override templates as they wish, but it would be nice to automatically support Angular-style semantic commits out of the box, for instance.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-renovate-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-renovate-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>renovate</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-renovate-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The draw of open source continues to be strong, and not just for any philosophical reasons. I now feel hesitant to adopt any libraries where I can't see the source and the issues or know what's going on under the hood, even if I don't intend to actively contribute. I was happy to see GitHub open source their Firebase JavaScript SDK recently, for example - a huge improvement on their previous approach which was closed in every way.</p>
<p>One related trend I would <em>like</em> to see is the end to "snippets" for embedding closed-source third party libraries into websites. Developers need to seize back more control in terms of bundling, loading timing and priority, etc. The whole "this won't slow down your website" disclaimer that most use is obviously a load of bunk.</p>
<p>There are few vendors supporting this approach so far (i.e. open sourcing their client JS code as an alternative to loading via snippet) and market forces would suggest this is because customer developers aren't asking loud enough.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>You would be surprised at how much experience and exposure you can get by contributing small patches and fixes to existing open source libraries.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Once you start noticing certain prolific open source authors, it's like <a href="https://www.inc.com/lee-colan/how-to-use-the-yellow-car-phenomenon.html">the yellow car phenomenom</a> and you start noticing the same people everywhere. <a href="https://github.com/bahmutov">Gleb Bahmutov</a> is one of those for me, although I'm not sure if he could easily decide which of his libraries to make a focus of an interview.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Naturally I need to thank the hundreds of authors and maintainers of software I use every day, including as a part of <em>renovate</em>. And thanks for having me on the blog!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Rhys! <em>renovate</em> certainly looks like a solid solution to an important problem.</p>
<p>Learn more about <a href="https://github.com/singapore/renovate">the project at GitHub</a>.</p>
Most.js - Monadic streams for reactive programming - Interview with Brian Cavalieramostjsmonadicstreamsforreactiveprogramminginterviewwithbriancavalier2017-06-26t00:00:00z2017-06-26T00:00:00Z<p>If there's one trend that has been nice to notice, it's the rise of reactive programming. You can see this in technologies like <a href="http://reactivex.io/rxjs/">RxJS</a> and <a href="https://cycle.js.org/">cycle.js</a>.</p>
<p>To learn more about the topic, I'm interviewing <a href="https://twitter.com/briancavalier">Brian Cavalier</a>, one of the authors of <a href="https://github.com/cujojs/most">Most.js</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/4835a1b9196924c966678610de051071.jpg" alt="Brian Cavalier" class="author" width="100" height="100" /><figcaption>Brian Cavalier</figcaption></figure>
I'm a software engineer at Yelp in Pittsburgh, PA, where I work on Node-based web services and distributed systems. I had done all kinds of stuff before I started writing JavaScript: Basic, Assembly, C, C++, Ruby, ML, and way more Java than I want to admit. Recently, I've done a decent amount of Haskell, and have been actively digging into Purescript, Rust, and Idris. I love learning about how to solve problems in different ways.
</p>
<p>In 2007, I was working for a Pittsburgh startup as a Java server-side engineer. They wanted to create an ambitious web UI, and I ended up diving into the role of front-end JavaScript developer. A few years later, John Hann (unscriptable) and I created cujojs, and I became hooked on doing open source work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-most-js-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-most-js-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Most.js</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-most-js-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Most.js is a library for reactive programming. It helps you combine streams of events, like DOM Events, to create highly interactive applications. Asynchronous programming is hard because trying to reason about when things happen and in what order is hard. Most.js makes this easier by giving you a declarative DSL for explicitly describing how asynchronous events relate to each other.</p>
<p>For example, if your goal is to log all the <code>mousemove</code> events until the user clicks the mouse, you can declare that's what you want:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> mousemove<span class="token punctuation" >,</span> click <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token template-string" ><span class="token string" >`@most/dom-event`</span></span>
<span class="token function" >mousemove</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >until</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >click</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >observe</span><span class="token punctuation brackets-parentheses" >(</span>e <span class="token operator" >=></span> console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>The ability to describe <em>what</em> the result should be, rather than having to try to detail all the steps of <em>how</em> to achieve it, is a central idea of Most.js's declarative functional API.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-most-js-work-" id="how-does-most-js-work-"></a><span class="text">How does <em>Most.js</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-most-js-work-">#</a></h2>
<p>The primary architectural concept in Most.js is the <code>Stream</code>, which represents an asynchronous sequence of discrete events, like mouse clicks, or WebSocket messages. Under the hood, a Most.js <code>Stream</code> is a composition of two other important concepts: <code>Source</code> and <code>Sink</code>. A <code>Source</code> produces events, and a <code>Sink</code> consumes them.</p>
<p>For example, a particular kind of <code>Source</code> may represent DOM events, like <code>mousemove()</code> and <code>click()</code> above, which produce DOM <code>mousemove</code> and <code>click</code> events on the <code>document</code>. In contrast, <code>observe()</code> is an example of a particular kind of <code>Sink</code> that consumes events, and passes them to a function you provide.</p>
<p>The vast majority of operations involve both a <code>Source</code> and a <code>Sink</code>. For example. <code>map()</code>, which transforms all the events in a stream, acts as a <code>Sink</code> by consuming events, and as a <code>Source</code> then producing new event values after applying a function to them.</p>
<pre><code class="lang-js"><span class="token function" >mousemove</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >until</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >click</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>event <span class="token operator" >=></span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>event<span class="token punctuation" >.</span>clientX<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >, </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>event<span class="token punctuation" >.</span>clientY<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >observe</span><span class="token punctuation brackets-parentheses" >(</span>e <span class="token operator" >=></span> console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>So, when you create and transform a Most.js <code>Stream</code>, you're building up a chain of <code>Sources</code> and <code>Sinks</code> that represent the behavior of the <code>Stream</code>. However, Most.js <code>Streams</code> are not active until you consume them, by using one of the "terminal" combinators, <code>observe</code>, <code>drain</code>, or <code>reduce</code>. When you call one of those, the <code>Stream</code> sends a signal to the <code>Source</code>-<code>Sink</code> chain to the <code>Source</code> at the very beginning of the chain. That producer <code>Source</code> will then begin producing events.</p>
<p>Events are then propagated synchronously from the <code>Source</code> through the <code>Source</code>-<code>Sink</code> chain by a simple method call. In the example above:</p>
<ol>
<li>The <code>mousemove</code> producer <code>Source</code> propagates a <code>mousemove</code> DOM event by calling the <code>until</code> Sink's <code>event</code> method.</li>
<li>If the mouse hasn't yet been clicked on the <code>document</code>, the <code>until</code> Sink propagates an event to the <code>map</code> <code>Sink</code> by calling its <code>event</code> method.</li>
<li>The <code>map</code> <code>Sink</code> then applies the mapping function to the event value and calls the <code>observe</code> <code>Sink</code>'s <code>event</code> method.</li>
</ol>
<p>This direct synchronous method call event propagation model is one of the keys to Most.js's simple and performant internal architecture.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Check out the <a href="https://github.com/cujojs/most/wiki/Architecture">Architecture wiki</a>, to read more about the details of the Source-Sink chain, including how error handling works, and avoids having to <code>try</code>/<code>catch</code> in every combinator.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-most-js-differ-from-other-solutions-" id="how-does-most-js-differ-from-other-solutions-"></a><span class="text">How does <em>Most.js</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-most-js-differ-from-other-solutions-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#performance" id="performance"></a><span class="text">Performance</span><a class="header-anchor-select" href="https://survivejs.com/#performance">#</a></h3>
<p>I think many people know Most.js because of its performance characteristics, and that was certainly a goal from the beginning, along with modularity and a simple API. The simple call stack event propagation architecture, plus hoisting <code>try</code>/<code>catch</code> out of combinator implementations were two of the earliest and biggest performance improvements.</p>
<p>Most.js performs several other optimizations automatically, based on algebraic equivalences. A relatively well-known example is combining multiple <code>map</code> operations, e.g. <code>map(g, map(f, stream))</code>, into a single <code>map</code> by doing function composition on <code>f</code> and <code>g</code>.</p>
<p>The operation also combines multiple <code>filter</code> operations, multiple <code>merge</code> operations, multiple <code>take</code> and <code>skip</code>, among others. These optimizations reduce the number of method calls needed to propagate an event from producer to consumer.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#unapologetically-declarative" id="unapologetically-declarative"></a><span class="text">Unapologetically Declarative</span><a class="header-anchor-select" href="https://survivejs.com/#unapologetically-declarative">#</a></h3>
<p>To me, though, Most.js's more strict adherence to a smaller declarative API is even more important, and maybe even a bigger differentiator.</p>
<p>Asynchronous programming is complicated in general. JavaScript programs often deal with many interleaving asynchronous events, and as programmers, we have to try to coordinate all of them. Using imperative approaches, especially those that rely on the developer to manage shared mutable state, to try to coordinate highly asynchronous systems is difficult because we have to think carefully about the operational semantics of the system.</p>
<p>We have to look at our static code and execute it in our heads to figure out the order(s) in which things might happen. Then, we have to convince ourselves that our code is correct for each possible ordering.</p>
<p>As one example, Most.js event streams' core API doesn't provide an imperative "unsubscribe" function. Instead, you use combinators such as <code>until</code>, <code>take</code>, <code>takeWhile</code>, and <code>skipAfter</code> to declare, up front, the slice of an event stream you want. You declare what your intentions are, and Most.js takes care of the how and when.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-most-js-" id="why-did-you-develop-most-js-"></a><span class="text">Why did you develop <em>Most.js</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-most-js-">#</a></h2>
<p>Two big personal reasons are learning, and that reactive programming is the way I want to be building front-end JS apps.</p>
<p>I believe in learning by doing. I wanted to find out more about reactive programming and Functional Reactive Programming (FRP) because they just seemed like such a great fit for front-end JS development. After I had discovered reactive programming concepts, I started reading all the papers and source code I could find. Finally, I decided that the best way to learn even more was to try to implement something. That's basically how the project started.</p>
<p>As for technical motivations, there were several. Performance, architectural and API simplicity, and modularity have been driving factors from the beginning.</p>
<p>A while back, there was a GitHub issue asking why someone might pick Most.js over other reactive libs. I <a href="https://github.com/cujojs/most/issues/96#issuecomment-77769425">wrote a longer answer there</a> with more detail about the technical reasons and differences with other libs. It's still a good read and sums up my motivation pretty well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#-most-core" id="-most-core"></a><span class="text">@most/core</span><a class="header-anchor-select" href="https://survivejs.com/#-most-core">#</a></h3>
<p>There are a few exciting things on the horizon. The Most.js team is working on <a href="https://github.com/mostjs/core"><code>@most/core</code></a>, where we've extracted a minimal core of the Most.js architecture and combinators. It's a base reactive events package that has a strict focus on a lean, declarative API, and incorporates more functional programming concepts. For example, it has a functions-only API, where every function is curried, so you get partial application and function composition.</p>
<p>It's also even more modular and exposes more pieces that other developers can use in building new event sources and combinators. For example, Most.js's high-performance scheduler is available in the <code>@most/scheduler</code> package. And we're planning to expose many of Most.js's internal testing tools as a part of <code>@most/core</code>.</p>
<p>You can <code>npm install --save @most/core</code> to try it today. It's not yet 1.0, and we have some work to do on documentation and examples, but they're very usable.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#most-js-2-0" id="most-js-2-0"></a><span class="text">Most.js 2.0</span><a class="header-anchor-select" href="https://survivejs.com/#most-js-2-0">#</a></h3>
<p>These new <code>@most/core</code> packages will for the basis of Most.js 2.0. They're a separate project at the moment, but once they hit 1.0, we'll start the work of building Most.js 2.0 on top of them.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#experimental-packages" id="experimental-packages"></a><span class="text">Experimental packages</span><a class="header-anchor-select" href="https://survivejs.com/#experimental-packages">#</a></h3>
<p>We're also experimenting with a <a href="https://www.npmjs.com/package/@briancavalier/most-behavior">package of continuous values</a>, aka "Behaviors" or "Properties", values that vary over time, as a companion to Most.js's discrete event streams. The notion of continuous values is quite common in FRP in other functional languages, like Haskell and PureScript, and a few other JS reactive libraries, such as <a href="https://baconjs.github.io/">Bacon.js</a> and <a href="https://rpominov.github.io/kefir/">kefir</a>, provide continuous them.</p>
<p>Some things can be modeled more simply as values that vary over time rather than as discrete occurrences (events). For example, a mouse click is fairly clearly a thing that occurs, an event. However, the position of a spaceship in a game is a value. It varies over time as the ship moves but doesn't <em>occur</em> per se.</p>
<p>We're very use case driven, and we love feedback, so we encourage folks to <a href="https://www.npmjs.com/package/@briancavalier/most-behavior">try it out</a> and <a href="https://gitter.im/cujojs/most">give us feedback in gitter</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-most-js-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-most-js-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Most.js</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-most-js-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I see a trend toward functional programming techniques in the JavaScript community. I think it's fascinating how JavaScript, being such a flexible language, can support both OO and functional techniques fairly effectively. Declarative (vs. imperative) programming seems to be on the rise and fits real with the similar swell in reactive programming techniques.</p>
<p>Typescript and Flow have also raised the awareness of the benefits of strong static type systems. I think we'll continue to see more tooling around type checking: better IDE support, better type systems, code generators, tools for dealing with foreign data (like <a href="https://pursuit.purescript.org/packages/purescript-foreign-generic/4.1.0/docs/Data.Foreign.Class">PureScript's foreign package</a>). These technologies make everything safer by reducing the kinds of mistakes that can make it through to deployment.</p>
<p>We plan to continue embracing these things in Most.js. For example, Most.js has a full set of TypeScript type definitions, and <code>@most/core</code> has a complete set of <em>both</em> TypeScript and Flow type definitions. We use type checking in the development of Most.js and <code>@more/core</code>, and even type check our unit tests.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>There are a few things that have become very important to me in every bit of programming I do now - that transcend any project, library, framework, or programming paradigm du jour.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#be-fearless-about-learning" id="be-fearless-about-learning"></a><span class="text">Be fearless about learning</span><a class="header-anchor-select" href="https://survivejs.com/#be-fearless-about-learning">#</a></h3>
<p>The first is learning by doing, or perhaps more accurately in my case, learning by trying and failing! One key has been learning that it's ok to fail. It's ok to read about a concept, or algorithm, or data structure in a blog or paper, and then write code solely to try to learn more about how the thing works. Make lots of mistakes trying to get the thing to work.</p>
<p>Not everything has to become a long-lived project. If you learn something (even if its the best way <em>not</em> to do something!), you can take that with you no matter what happens to the code.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#focus-on-simplicity" id="focus-on-simplicity"></a><span class="text">Focus on simplicity</span><a class="header-anchor-select" href="https://survivejs.com/#focus-on-simplicity">#</a></h3>
<p>Simplicity has become the most important guiding principal in everything programming-related I do. Simplicity in code, API design, directory structure, project management, communicating with other team members ... everything.</p>
<p>Simple is hard. It requires think time and sometimes trying and failing. Simple helps others. Sometimes it takes a while to reap the benefits of simple.</p>
<p>On the other hand, "easy" may feel like it helps right now, but often lays a complexity land mine you (or someone else) will step on later. Often, you have to find a balance between the two. I always try to err on the side of simple when I can.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#be-kind" id="be-kind"></a><span class="text">Be kind</span><a class="header-anchor-select" href="https://survivejs.com/#be-kind">#</a></h3>
<p>I've gotten way more from the open source web community than I've given to it. In many cases, that's been due to interacting with and learning from other developers who have treated me with respect and kindness. I'm very thankful for the excellent people in the web community who help others.</p>
<p>At some point, you'll be the one who knows more than someone else. When it happens, be one of that kind, awesome people.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think an interview with <a href="https://github.com/TylorS167">Tylor Steinberger</a>, creator of <a href="https://github.com/motorcyclejs">Motorcycle.js</a>, and a Most.js contributor would be great. It's amazing that he's completely self-taught.</p>
<p>I've become a huge fan of <a href="https://rollupjs.org">Rollup</a>, and I think it'd be cool to interview <a href="https://github.com/Rich-Harris">Rich Harris</a> about it, and about modern JavaScript build tooling in general.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> Brian suggested interviewing <a href="https://github.com/paf31">Phil Freeman</a>, the author <a href="http://www.purescript.org">PureScript</a>. As it happens, <a href="https://survivejs.com/blog/purescript-interview/">I interviewed him earlier</a>. So go check out the interview.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I really want to thank the Most.js core team: <a href="https://github.com/TylorS167">Tylor Steinberger</a>, <a href="https://github.com/davidchase">David Chase</a>, and <a href="https://github.com/frikki">Frederik Krautwald</a>. They've contributed a ton of ideas and code, and they proposed the idea of <code>@most/core</code>.</p>
<p>Given that Most.js started as a project to help me learn about reactive programming, I never expected it to become as popular as it has. Thanks to everyone who has supported it, who has sent a PR, and who is using it to build cool things!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Brian! It's refreshing to see reactive approaches make their way to JavaScript. I feel a lot of these ideas are slowly but surely beginning to enter the mainstream as people discover their value. By changing your thinking you can forget about older problems while gaining more powerful constructs to use.</p>
<p>To learn more about Most.js, head to <a href="https://github.com/cujojs/most">Most.js GitHub page</a> and study especially the examples.</p>
React Alicante - The international React.js conference in Spain - Interview with Victoria Quiranteareactalicantetheinternationalreactjsconferenceinspaininterviewwithvictoriaquirante2017-06-23t00:00:00z2017-06-23T00:00:00Z<p>There are plenty of events out there. What is it like to organize one? I know it's hard work based on what I've seen.</p>
<p>To get more perspective, I'm interviewing <a href="https://twitter.com/vicqr">Victoria Quirante</a>, one of the organizers of <a href="http://reactalicante.es/">React Alicante</a>, a new React conference organized late September in Spain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/318e6153fb28db314d4ee01964e55f59?s=200" alt="Victoria Quirante" class="author" width="100" height="100" />
</span>
I’m a Telecom Engineer from Murcia, Spain. I graduated from the Polytechnic University of Catalonia, doing my master thesis in computer vision at the ETH, in Zurich.
</p>
<p>I started as a web developer back in 2008 and founded <a href="http://limenius.com/">Limenius</a> together with <a href="http://twitter.com/nacmartin">Nacho Martín</a> in 2011. There we provide consulting, training and development services to other companies, working mainly with React, React Native, Elixir, and Symfony.</p>
<p>Apart from coding, I love playing football (soccer), swimming outdoors, and reading. I have run a couple of half-marathons, and this summer I plan to kayak around the island of Menorca in eight days.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-alicante-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-alicante-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>React Alicante</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-alicante-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="http://reactalicante.es/">React Alicante</a> is an international conference focused on React.js and React Native hosted in sunny Alicante, Spain. Its first edition is going to take place on September 28-30, 2017. There will be one workshop day for beginners and two conference days with more advanced talks and case studies.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-react-alicante-offer-" id="what-does-react-alicante-offer-"></a><span class="text">What does <em>React Alicante</em> offer?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-react-alicante-offer-">#</a></h2>
<p>It offers the opportunity of spending a few days improving your developer skills, meeting people from around the world, and enjoying the food and warm weather from the Mediterranean coast of Spain.</p>
<p>Regarding the content, the event will start with two workshops on Thursday, where participants will learn the fundamentals of React and React Native and code their first application in both technologies. The conference itself will take place on Friday and Saturday. It will be single-tracked, with 7-8 talks each day.</p>
<p>The venue is a nice hotel (with a terrace pool!) close to Alicante’s port. Lunches and coffee breaks will be served at the hotel. We will also have refreshments at the end of each day, and a closing party on Saturday.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-react-alicante-differ-from-other-events-" id="how-does-react-alicante-differ-from-other-events-"></a><span class="text">How does <em>React Alicante</em> differ from other events?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-react-alicante-differ-from-other-events-">#</a></h2>
<p>Our idea is to make sure that the atmosphere is delightful for everyone. In my opinion, when organizing an event like this, there are two things that you need to care of: the quality of the talks and the quality of the networking opportunities.</p>
<p>People attending want to learn, but they also want to have a good time and the chance to meet other developers. I think it is important to make that easy for them. If they finish the weekend not only with lots of new ideas but also with a few new friends, the experience is much more valuable.</p>
<p>With that in mind, we are trying to attract people from as many different countries as possible. I honestly believe that things are more fun when you are surrounded by people from different places, and we are trying to create an event with an emphasis on that.</p>
<p>Apart from that, three keywords: sun, beach, and paella. ;)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-decide-to-arrange-react-alicante-" id="why-did-you-decide-to-arrange-react-alicante-"></a><span class="text">Why did you decide to arrange <em>React Alicante</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-decide-to-arrange-react-alicante-">#</a></h2>
<p>It has been a combination of a few things.</p>
<p>After trying other front-end options in the past, we have been working with React already for a couple of years, and we are thrilled with it. We believe that both the React and the React Native developer communities should be growing in the next years, and we thought about helping a bit with that.</p>
<p>On the other hand, in the last times, we have been attending a good amount of international conferences as speakers. Thanks to that, we have got a good picture of what other events offer, as well as an idea of what things work best for all parts involved: attendees, speakers, and sponsors.</p>
<p>Finally, I think that in Spain there is room for an event like this and that Alicante is the perfect place to host it -because of the weather and the good connections by train and plane, thanks to being a popular tourist destination.</p>
<p>To sum up, we thought that it was the right time and the right place to do it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The conference has just been announced, and the initial feedback has been really good, we are excited about it. But there is still a lot to do.</p>
<p>We already have some confirmed speakers, and the <a href="https://docs.google.com/forms/d/1iH4oHEsgoCcM-HNphjyCvPowp_vQ9hRxepkzt7j2bBk">call for papers</a> will be open until June 30th. We plan to announce the full program on July 4th. After that, we need to make sure that everything gets in place for this first edition.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-alicante-" id="what-does-the-future-look-like-for-react-alicante-"></a><span class="text">What does the future look like for <em>React Alicante</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-alicante-">#</a></h2>
<p>We would like to turn it into a yearly event that many front-end developers out there want to attend.</p>
<p>But of course, the first step is to focus on making this first edition a great experience for everyone attending and taking part.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Do not get obsessed with just one technology or too focused on only a particular task. Specialization is good, but the web development world changes fast, and at the beginning, it is more important to get a good foundation, rather that to learn a few libraries by heart.</p>
<p>My advice would be to start trying to understand how everything works from a high level, then be able to implement a simple back-end and front-end by yourself.</p>
<p>Try a few different technologies, be open, and then start choosing what things you like most. Specialization should be the last step, not the first one. And being open to the changes and new things coming is key.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I would suggest you interview <a href="http://twitter.com/forbeslindesay">Forbes Lindesay</a>. He is the creator of <a href="http://pugjs.org/api/getting-started.html">pug</a>, <a href="http://cabbiejs.org/">cabbie</a> and <a href="http://esdiscuss.org/">ESDiscuss</a>. He has been working on large-scale React applications on Facebook, and he will be giving the workshop “Introduction to React.js” at <a href="http://reactalicante.es">React Alicante 2017</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>One of the most enjoyable things about being a software developer is to meet others like you, share your success and horror developer stories with them, and learn from each other. Attending events like React Alicante is one of the best ways of doing it. I hope to see you there! :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Victoria! I hope you get a lot of great people at React Alicante. Maybe I get to participate a React conference one day. :)</p>
<p>To learn more about the conference, <a href="http://reactalicante.es/">go check React Alicante site</a>.</p>
Hard-cover Edition of the Webpack Book and Trainingahardcovereditionofthewebpackbookandtraining2017-06-22t00:00:00z2017-06-22T00:00:00Z<p>Print on Demand services like <a href="https://kdp.amazon.com/">KDP</a> are ideal for self-publishers like me as they take a lot of pain out of the process. You don't have to worry about printing or distribution. It's not free money as you still have to worry about marketing and getting your work noticed.</p>
<p>To experiment with an option, I had a hard-cover edition of the <a href="https://survivejs.com/webpack/">webpack book</a> made a while ago. Doing this gave me insight into the process and helped me to understand the cost structure, so it's easier to repeat the process if it seems worthwhile.</p>
<p>It is surprisingly expensive to get a thick book (499 pages) printed and delivered from a remote location like Finland. My trial run was 40 copies of the book, and I have twenty copies left to sell.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-to-get-a-copy-" id="how-to-get-a-copy-"></a><span class="text">How to Get a Copy?</span><a class="header-anchor-select" href="https://survivejs.com/#how-to-get-a-copy-">#</a></h2>
<p>To account for the logistics and "rarity", I decided to price this edition at $100 per piece. You can get two for $150. To keep it fair, I include 30 minutes remote consulting in the price. Let me solve a hard problem for you or at least push you in the right direction.</p>
<p>If you want one of the remaining copies, <a href="https://survivejs.typeform.com/to/LUQK0T">let me know</a> and I'll get one sent to you after payment has gone through.</p>
<blockquote>
<p>Due to logistic issues, the books don't come with a signature. But if we meet, I'll be happy to sign the book for you.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-training" id="webpack-training"></a><span class="text">Webpack Training</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-training">#</a></h2>
<p>As I've been completing <a href="https://survivejs.com/blog/euro-summer-tour-2017/">my second tour</a>, this has been a good chance to improve my <a href="https://survivejs.com/training/">training offering</a>. I've pushed it to include more exercises, and I also redid most of my React material. I also have a two-day version of the webpack material. One day can be too intense especially with a mixed group of people.</p>
<p>I'm organizing workshops in three places with the help of local partners. See the links below if you want to participate. The pricing depends on the location.</p>
<ul>
<li><del>webpack in Vienna, Austria - 100 euros or more for beginner workshop (full day), 200 euros or more for advanced workshop. I'm going to try kind of "pay what you want" pricing based on satisfaction here. Both take a full day.</del></li>
<li><del><a href="https://ti.to/peerigon/webpack-workshop">webpack in Augsburg, Germany</a></del> - Prices for a full day begin from 399 euros. It is cheaper when you participate to both.</li>
<li><del><a href="https://skillsmatter.com/conferences/8264-fullstack-2017-the-conference-on-javascript-node-and-internet-of-things#program">webpack in London, UK</a></del> - Two-hour super-condensed workshop for FullStack 2017.</li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>Let me know if you want a workshop in your city (preferably within Europe). Maybe we can organize something. We should also do a free meetup session then too.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-book-extras" id="webpack-book-extras"></a><span class="text">Webpack Book Extras</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-book-extras">#</a></h2>
<p>To reward the paying readers of my <a href="https://survivejs.com/webpack/">webpack book</a>, I've added two extras to <a href="https://leanpub.com/survivejs-webpack">Leanpub edition</a>.</p>
<p>The first extra contains a two-page cheat sheet with the book essentials in a condensed format you can print out. I give signed copies to my workshop participants and random people I might encounter during my travels.</p>
<p>I compiled the second extra based on QA sessions I've been running with Tobias. It's a roughly twenty-page document full of answers to hard webpack questions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>There is still more work for me to do (next book for instance) but things are rolling in a good direction. I hope to announce more in the next status update! Enjoy the extras.</p>
Working with Junior Developers - Interview with Aimee Knightaworkingwithjuniordevelopersinterviewwithaimeeknight2017-06-20t00:00:00z2017-06-20T00:00:00Z<p>Even though software development is often seen from a technical perspective, there's a softer side to it. It is hard to avoid not having to work with people unless you are a mythical programmer living in a cave somewhere in Finland.</p>
<p>To understand the topic better, I'm interviewing <a href="https://twitter.com/aimee_knight">Aimee Knight</a> about working with junior developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://avatars1.githubusercontent.com/u/2165184?v=3&s=460" alt="Aimee Knight" class="author" width="100" height="100" />
</span>
I'm a former competitive figure skater, graduate of the Nashville Software School, and software engineer at DramaFever, a subsidiary of Warner Bros.
</p>
<p>Outside of work, I'm a weekly panelist on the JavaScript Jabber podcast, and I regularly participate in a variety others. In my spare time I love speaking at conferences, playing with new technology, running, working out, and trying new flavors of Kombucha!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-you-work-with-junior-developers-" id="how-do-you-work-with-junior-developers-"></a><span class="text">How do you <em>work with junior developers</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-you-work-with-junior-developers-">#</a></h2>
<p>My work with junior developers comes mostly in the form of mentorship. Indirectly, I also believe I'm able to reach juniors on a deep level by being a panelist on JavaScript Jabber and, through my conference talks and blog posts.</p>
<p>As far as mentorship, I've worked one on one with developers in a more formal sense where we set up weekly chats, and I also devote a substantial amount of time each week making myself available for more one of conversations on the phone, through Twitter DM or email. I've found the latter to be the most common.</p>
<p>In regards to JavaScript Jabber, I usually spend a bit of time prepping for each episode, and I always try to write down the questions that I initially have since I know others getting started will probably be in the same boat!</p>
<p>For my conference talks, I spend a lot of time brainstorming ideas and organizing my content in a way that will make it approachable to newbies, but also valuable to someone who's been programming for a decade. That is the most challenging aspect of speaking for me, but as someone newer, it's essential to me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-working-with-junior-developers-differ-from-working-with-senior-developers-" id="how-does-working-with-junior-developers-differ-from-working-with-senior-developers-"></a><span class="text">How does <em>working with junior developers</em> differ from working with senior developers?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-working-with-junior-developers-differ-from-working-with-senior-developers-">#</a></h2>
<p>Working with junior developers is only slightly different from working with a mid-level or senior developer in my opinion. With junior developers, it's imperative to have a level of awareness in the situation.</p>
<p>In other words, a lot of juniors feel intimidated, so it's important to check in often and ask direct questions like, "does that make sense"? It's far too common for newer developers to not speak up due to the intimidation factor. I also advise when pairing to resist the urge to take over and let the junior drive!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-to-work-with-junior-developers-" id="why-to-work-with-junior-developers-"></a><span class="text">Why to <em>work with junior developers</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-to-work-with-junior-developers-">#</a></h2>
<p>I hear senior developers express to me how valuable and thought to provoke it's been for them when a junior presents them with carefully thought out questions. Statistically, it's also precious for seniors to work with juniors. Mentors are six times more likely to be promoted, and 20% more likely to get a raise.</p>
<p>Besides that, working with a junior can do wonders for burnout. Most juniors, especially those from boot camps are extremely hungry. The energy and passion they have for the field are contagious!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>There are so many things I could name, but personally, I'm most excited about PWA's and AI! As far as PWA's, I've always wanted to build for mobile, and even in web development, I think AI is going to have a huge impact.</p>
<p>There are already things like <a href="https://www.youtube.com/embed/aEfpARsP8Fg?rel=0#">The Grid</a> that use machine learning to build websites! I recently bought <a href="https://www.manning.com/books/grokking-deep-learning">Grokking Deep Learning</a> and am excited to dive into it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>My advice is to get comfortable being uncomfortable. I have a <a href="https://youtu.be/B22o_yeDE_s">talk</a> on this... that's how strongly I feel about it being the key to success. For me, some of the hardest obstacles in my journey have been with my self-doubt. If you're aware of that though, you can shift your focus.</p>
<p>We are all human, and we have a finite amount of mental energy. So, it's important that you spend it wisely! If you can learn to become comfortable with the feeling of not knowing, you're able to focus solely on the challenge at hand, and you'll inevitably be able to tackle it that much faster!</p>
<p>I also encourage juniors to try and find a mentor or programming buddy. If you can find a mentor, it's probably the fastest way to progress. Developers who received mentoring were promoted five times more often than those who didn’t.</p>
<p>If nothing else, you can try to work on some small open source projects and get mentorship in the form of code reviews there. <a href="https://yourfirstpr.github.io/">Your First PR</a> is an excellent resource for finding newbie friendly projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I'm a huge fan of Kyle Simpson, so I'd be excited to see an interview with him next! I love his approach to learning vanilla JavaScript over focusing on a framework when you're getting started, and his content is comprehensive while also being completely approachable!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>My latest deep dive topic has been CSS and browser internals. I spent two years as a full-stack JavaScript developer and made the switch to front end last summer. Working for an affiliate of Warner Bros means that design implementation is critical! It wasn't like the previous applications I'd worked on where the designs could be fudged a little. Applications for Warner Bros properties need to be pixel perfect!</p>
<p>I quickly realized I struggled with debugging CSS in the same systematic way I debugged my JavaScript. So, whether you're a newer developer or you've been programming a while you may be interested in a <a href="http://www.aimeemarieknight.com/It's-Not-Dark-Magic-Pulling-Back-the-Curtains-From-Your-Stylesheets/">blog post</a> I just finished all about this!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Aimee! I've found working with people from different backgrounds helps to give you perspective. Magic happens when you combine the views and find something new.</p>
vx - The Power of D3 with the Benefits of React - Interview with Harrison Shoffavxthepowerofd3withthebenefitsofreactinterviewwithharrisonshoff2017-06-12t00:00:00z2017-06-12T00:00:00Z<p>Data visualization is a big topic itself. When it comes to the web, <a href="https://d3js.org/">D3</a> is perhaps the most well-known solution. Even though you can wrap it with React quite quickly, there is value in having specific solutions.</p>
<p>This is where <a href="https://github.com/hshoff/vx">vx</a> by <a href="https://twitter.com/hshoff">Harrison Shoff</a> comes in.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/96383e1a07b37e9d5d0360416f81dbf9?s=200" alt="Harrison Shoff" class="author" width="100" height="100" />
</span>
I've been doing frontend at Airbnb since 2010. Along the way, I've helped make <a href="https://techcrunch.com/2012/06/27/airbnb-wish-lists-redesign/">wish lists</a>, <a href="https://www.airbnb.com/help/article/1257/how-do-star-ratings-work">reviews</a>, <a href="https://thenextweb.com/apps/2011/06/21/airbnbs-new-referral-program-could-double-its-member-base/#.tnw_aooztlbz">referrals</a>, <a href="https://techcrunch.com/2014/05/16/airbnb-experiences/">experience marketplace</a>, the <a href="https://thenextweb.com/apps/2011/10/06/airbnb-launches-its-photography-program-with-13000-verified-properties/#.tnw_ISpMS8RO">professional photography tool</a>, customer support chat, and the old m.airbnb.com.</p>
<p>Regarding open source, I created the <a href="https://github.com/airbnb/javascript">Airbnb JavaScript Style Guide</a> and worked on <a href="https://gigaom.com/2015/03/05/airbnb-open-sources-sql-tool-built-on-facebooks-presto-database/">Airpal</a> with Andy Kramolisch, and <a href="https://techcrunch.com/2013/03/15/airbnb-open-sources-its-chronos-scheduler-a-more-flexible-cron-replacement-with-a-web-based-gui/">Chronos</a> with Florian Leibert and Andy again.</p>
<p>Currently, I'm on the Observability team at Airbnb, working on monitoring tools, data visualization, and a new open source project called <a href="https://github.com/hshoff/vx">vx</a>.</p>
<p>Outside of work, I enjoy playing golf poorly, reading programming books I don't understand, and going on adventures with my beautiful wife.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-vx-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-vx-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>vx</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-vx-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>vx</em> is a library of low-level react components that can be used to build up reusable charts, those one-off requests, or that particular idea you had for a visualization that you’ve never seen done before.</p>
<p><em>vx</em> combines the power of <a href="https://d3js.org/">D3</a> with the joy of <a href="https://facebook.github.io/react/">React</a>. It's mainly unopinionated, and the idea is that you build on top of it, keep your bundle sizes down and use only the packages you need. You don't need to know D3 to use <em>vx</em>, but it helps.</p>
<p><em>vx</em> stands for visualization components.</p>
<p>Below is a flow diagram that illustrates how <em>vx</em> could fit in at your organization:</p>
<p><figure><img src="/c6d223916688e7e78408493593913390.png" alt="vx flow diagram" class="" width="" height="" /><figcaption>vx flow diagram</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-vx-work-" id="how-does-vx-work-"></a><span class="text">How does <em>vx</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-vx-work-">#</a></h2>
<p>Under the hood, <em>vx</em> is using D3 for the calculations and math. D3 is the visualization kernel used to generate the data that flows to your components. If you’re creating your chart library on top of <em>vx</em>, it’s easy to create a component API that hides D3 entirely. Because of this you and your team could set up and share charts as quickly as using reusable React components.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-vx-differ-from-other-solutions-" id="how-does-vx-differ-from-other-solutions-"></a><span class="text">How does <em>vx</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-vx-differ-from-other-solutions-">#</a></h2>
<p>To create a complete charting library, you would need to anticipate the needs of every chart out there. Instead of doing that, you tell <em>vx</em> what you want to make, and away you go. You only need to pull in the packages you need.</p>
<p>No matter how you handle styling your components, how you store your state, or how you update your data, <em>vx</em> should feel familiar in any React codebase.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-vx-" id="why-did-you-develop-vx-"></a><span class="text">Why did you develop <em>vx</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-vx-">#</a></h2>
<p>Charting libraries are great until they’re not. And mixing two mental models for updating the DOM is never a right time. Copy and pasting D3 code into <code>componentDidMount()</code> is just that. The <em>vx</em> collection of components lets you easily build your reusable visualization charts or library without having to learn d3.</p>
<p>I wanted to make my D3 code feel at home in my react codebase, keep filesize down, and not predict all of the different charts I would have to make in the future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We're on the road to a production ready <code>v1</code> release, and it includes the following features:</p>
<ul>
<li>Accessibility.</li>
<li>Increased browser support.</li>
<li>More shapes.</li>
<li>Animations and transitions.</li>
<li>Easy interactions.</li>
</ul>
<p>Follow our progress here: <a href="https://github.com/hshoff/vx/projects/1">https://github.com/hshoff/vx/projects/1</a></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-vx-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-vx-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>vx</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-vx-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>For <em>vx</em>: <em>vx</em> should work on the web, native, vr, everywhere. The current implementation depends on react-dom which means it's only available on the web. I'd like to explore using <a href="https://github.com/lelandrichardson/react-primitives-art">react-primitives-art</a> for cross-platform support. Check out this talk by my colleague <a href="https://twitter.com/intelligibabble">Leland Richardson</a> about <a href="https://www.youtube.com/watch?v=hNwQPJy-XZY">React as a Platform</a>.</p>
<p>In general: the world continues to shift towards browsing the internet on their phone. Most of the world isn't on wi-fi and doesn't have latest phone hardware. We should start to see more companies treat performance as a feature and not an afterthought.</p>
<p>It's never been more exciting to be working on the frontend.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>You don't need a computer science degree.</p>
<p>You'll throw away 99% of the code you write over the first few years.</p>
<p>There are no shortcuts. You just have to show up and put in the work.</p>
<p>It's a lot of fun.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>My colleague <a href="https://twitter.com/jongold">Jon Gold</a>! He's working on the future of design tools at Airbnb. Check out his latest work <a href="https://airbnb.design/painting-with-code/">React Sketch.app</a>. It melts minds. And it's well made.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>vx stands on the shoulders of giants. Special thanks to:</p>
<ul>
<li><a href="http://twitter.com/mbostock">Mike Bostock</a> + the d3 community and the react team + community for all of their lovely work!</li>
<li>All of my colleagues at Airbnb for reviewing my code over the years!</li>
</ul>
<p>Shoutout to Issaquah, WA and the University of Washington.</p>
<p>Thanks for having me on the blog!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Harrison! I have a soft spot for computer graphics due to my background and combining React with D3 through <em>vx</em> seems like a fantastic idea to me.</p>
<p>To learn more about the project, see <a href="https://github.com/hshoff/vx">vx GitHub page</a> and <a href="https://vx-demo.now.sh/">study the online demos</a>.</p>
unmarshaller - Toolbox for configuration - Interview with Sven Sauleauaunmarshallertoolboxforconfigurationinterviewwithsvensauleau2017-06-05t00:00:00z2017-06-05T00:00:00Z<p>Serialization, or the process of transforming data from a shape to another, is a common problem you encounter eventually when programming. Perhaps you want to store some state to the hard drive from memory or restore it. Or you may want to share it across the wire and consume it somehow on the other end. That's where a related concept, marshalling, comes in.</p>
<p>In this interview you will learn more about the topic as <a href="https://twitter.com/svensauleau">Sven Sauleau</a> discusses the ideas behind his library, <a href="https://github.com/xtuc/unmarshaller">unmarshaller</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Remember to check <a href="https://survivejs.com/blog/async-reactor-interview">Sven's previous interview about async-reactor</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-unmarshaller-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-unmarshaller-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>unmarshaller</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-unmarshaller-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>If you are not familiar with the term of marshalling, here is an <a href="https://en.wikipedia.org/wiki/Marshalling_%28computer_science%29">excerpt from Wikipedia</a>:</p>
<blockquote>
<p>In computer science, marshalling [...] is the process of transforming the memory representation of an object to a data format suitable for storage or transmission, and it is typically used when data must be moved between different parts of a computer program or from one program to another. Marshalling is similar to serialization and is used to communicate to remote objects with an object, in this case, a serialized object. It simplifies complex communication, using custom/complex objects to communicate instead of primitives. [...]</p>
</blockquote>
<p>When you have a lot of configuration, it's not easy to maintain or even to understand.</p>
<p><em>unmarshaller</em> enables you to <strong>describe</strong> your configuration in a <strong>flexible</strong> way. It also provides tools to improve configuration usage.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-unmarshaller-work-" id="how-does-unmarshaller-work-"></a><span class="text">How does <em>unmarshaller</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-unmarshaller-work-">#</a></h2>
<p>To use <em>unmarshaller</em>, you have to define lookups against your data. These can be custom, or you can use ones provided with <em>unmarshaller</em>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#lookup-function" id="lookup-function"></a><span class="text">Lookup Function</span><a class="header-anchor-select" href="https://survivejs.com/#lookup-function">#</a></h3>
<p>During the unmarshalling process the lookup <code>function</code> will be called to get the value for a given key.</p>
<p>If you want to extract values from an object the lookup will look like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >lookupFn</span> <span class="token operator" >=</span> key <span class="token operator" >=></span> myObject<span class="token punctuation brackets-square" >[</span>key<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
</code></pre>
<p>How to provide the values is up to you. You could get them from the URL, looking for DOM nodes, network requests, and so on.</p>
<p>First, you need to declare your configuration in the unmarshaller object, here is an example:</p>
<p><strong>unmarshaller.js:</strong></p>
<pre><code class="lang-js"><span class="token comment" spellcheck="true" >// The builder is a set of helper functions to build</span>
<span class="token comment" spellcheck="true" >// the unmarshaller object.</span>
<span class="token comment" spellcheck="true" >// It has the builtin types: `string`, `number`,</span>
<span class="token comment" spellcheck="true" >// `boolean`, `object` and `holder` that is used to</span>
<span class="token comment" spellcheck="true" >// nest configurations.</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> builder <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'unmarshaller'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> unmarshaller <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// `person_name` will be the key used as argument</span>
<span class="token comment" spellcheck="true" >// in the lookup function</span>
name<span class="token punctuation" >:</span> builder<span class="token punctuation" >.</span><span class="token function" >string</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'person_name'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// `description` is used for documentation</span>
<span class="token comment" spellcheck="true" >// generation</span>
description<span class="token punctuation" >:</span> <span class="token string" >'Name of the person'</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// If the lookup function didn't returned a value,</span>
<span class="token comment" spellcheck="true" >// the default value will be used instead</span>
defaultValue<span class="token punctuation" >:</span> <span class="token string" >'Sven'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
customProps<span class="token punctuation" >:</span> builder<span class="token punctuation" >.</span><span class="token function" >object</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'custom_props'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
description<span class="token punctuation" >:</span> <span class="token string" >'Custom properties'</span><span class="token punctuation" >,</span>
defaultValue<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
showAge<span class="token punctuation" >:</span> builder<span class="token punctuation" >.</span><span class="token function" >boolean</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'person_show_age'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
description<span class="token punctuation" >:</span> <span class="token string" >'Show age of the person'</span><span class="token punctuation" >,</span>
defaultValue<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> builder<span class="token punctuation" >.</span><span class="token function" >number</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'person_age'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
description<span class="token punctuation" >:</span> <span class="token string" >'Age of the person'</span><span class="token punctuation" >,</span>
defaultValue<span class="token punctuation" >:</span> <span class="token operator" >-</span><span class="token number" >1</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
backgroundColor<span class="token punctuation" >:</span> builder<span class="token punctuation" >.</span><span class="token function" >string</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'background_color'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
description<span class="token punctuation" >:</span> <span class="token string" >'Background color of the card'</span><span class="token punctuation" >,</span>
defaultValue<span class="token punctuation" >:</span> <span class="token string" >'#69b0dc'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
textColor<span class="token punctuation" >:</span> builder<span class="token punctuation" >.</span><span class="token function" >string</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'font_color'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
description<span class="token punctuation" >:</span> <span class="token string" >'Font color'</span><span class="token punctuation" >,</span>
defaultValue<span class="token punctuation" >:</span> <span class="token string" >'black'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>index.js:</strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> unmarshal <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'unmarshaller'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// This is the unmarshaller object from the file above</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> unmarshaller<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'./unmarshaller.js'</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >lookupFn</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>key<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> myObject<span class="token punctuation brackets-square" >[</span>key<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> config <span class="token operator" >=</span> <span class="token function" >unmarshal</span><span class="token punctuation brackets-parentheses" >(</span>lookupFn<span class="token punctuation" >,</span> unmarshaller<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// `config` is a regular JavaScript object containing your configuration:</span>
<span class="token comment" spellcheck="true" >//</span>
<span class="token comment" spellcheck="true" >// {</span>
<span class="token comment" spellcheck="true" >// name: ...,</span>
<span class="token comment" spellcheck="true" >// backgroundColor: ...,</span>
<span class="token comment" spellcheck="true" >// textColor: ...,</span>
<span class="token comment" spellcheck="true" >// }</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span>config<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#custom-types" id="custom-types"></a><span class="text">Custom types</span><a class="header-anchor-select" href="https://survivejs.com/#custom-types">#</a></h3>
<p>To be able to use custom types you need to extend the default builder.</p>
<p>Here is an example of a <code>color</code> type:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span>
builder <span class="token keyword keyword-as" >as</span> defaultBuilder
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'unmarshaller'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> builder <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token operator" >...</span>defaultBuilder<span class="token punctuation" >,</span>
color<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span>name<span class="token punctuation" >,</span> options<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >,</span>
parser<span class="token punctuation" >:</span> parseColor<span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// custom parser function</span>
type<span class="token punctuation" >:</span> <span class="token string" >'color'</span><span class="token punctuation" >,</span>
<span class="token operator" >...</span>options
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<p>You can find more information about custom types in the documentation in <a href="https://github.com/xtuc/unmarshaller">the project repository</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#error-handling" id="error-handling"></a><span class="text">Error handling</span><a class="header-anchor-select" href="https://survivejs.com/#error-handling">#</a></h3>
<p>In the case of a casting error, <code>unmarshaller</code> will always return the type you defined.</p>
<p>For example, if you pass an invalid JSON string in <code>builder.object</code> it will return <code>{}</code> unless you have defined a <code>defaultValue</code>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-unmarshaller-differ-from-other-solutions-" id="how-does-unmarshaller-differ-from-other-solutions-"></a><span class="text">How does <em>unmarshaller</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-unmarshaller-differ-from-other-solutions-">#</a></h2>
<p>I didn't find an alternative solution to <em>unmarshaller</em>. There are some libraries which also adopt the idea of declarative configuration, but they only focus on one usage.</p>
<p>For example, <a href="https://www.npmjs.com/package/ajv">ajv</a> uses a declarative configuration, but it doesn't serve the same goal since it's only for validations.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To understand ajv better, <a href="https://survivejs.com/blog/ajv-interview/">read the interview with Evgeny Poberezkin</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-unmarshaller-" id="why-did-you-develop-unmarshaller-"></a><span class="text">Why did you develop <em>unmarshaller</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-unmarshaller-">#</a></h2>
<p>I made <em>unmarshaller</em> while I was working for a company. On some projects, we would use highly customizable React components (up to 70 different parameters). The configuration needed to be able to be set both by developers (passing props) and remotely by non-developers.</p>
<p>Our <em>unmarshaller</em> lookup function got the configuration either from query parameters in the URL or by calling a function in our proprietary SDK.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#better-syntax-" id="better-syntax-"></a><span class="text">Better syntax?</span><a class="header-anchor-select" href="https://survivejs.com/#better-syntax-">#</a></h3>
<p>The <code>unmarshaller</code> could also be JSX based (<a href="https://webpack.js.org/concepts/configuration/#using-jsx">example for Webpack</a>).
The configuration could look like this:</p>
<pre><code class="lang-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>unmarshaller</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>string</span>
<span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>name<span class="token punctuation" >"</span></span>
<span class="token attr-name" >defaultValue</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Sven<span class="token punctuation" >"</span></span>
<span class="token attr-name" >description</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Name of the person<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>holder</span> <span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>colors<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>color</span>
<span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>background_color<span class="token punctuation" >"</span></span>
<span class="token attr-name" >defaultValue</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>#69b0dc<span class="token punctuation" >"</span></span>
<span class="token attr-name" >description</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Background color<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>color</span>
<span class="token attr-name" >name</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>font_color<span class="token punctuation" >"</span></span>
<span class="token attr-name" >defaultValue</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>black<span class="token punctuation" >"</span></span>
<span class="token attr-name" >description</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>Font color<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>holder</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>unmarshaller</span><span class="token punctuation" >></span></span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#most-common-lookup-functions" id="most-common-lookup-functions"></a><span class="text">Most common lookup functions</span><a class="header-anchor-select" href="https://survivejs.com/#most-common-lookup-functions">#</a></h3>
<p>Provide standard <code>lookup functions</code>, for example, to extract configuration values from URLs as this would allow users to use the functions that come with <code>unmarshaller</code> instead of having to write them themselves.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#ahead-of-time-processing" id="ahead-of-time-processing"></a><span class="text">Ahead of time processing</span><a class="header-anchor-select" href="https://survivejs.com/#ahead-of-time-processing">#</a></h3>
<p>Create a Babel plugin to inline constant values in the <em>unmarshaller</em> object to avoid doing this at runtime.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-unmarshaller-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-unmarshaller-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>unmarshaller</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-unmarshaller-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Since <em>unmarshaller</em> is flexible, I could imagine various tools built on top of it (for example, form validations).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>We have a few extra modules which are located in a second repository <a href="https://github.com/xtuc/unmarshaller-extra">unmarshaller-extra</a>:</p>
<p><strong>unmarshaller-generator-markdown</strong></p>
<p>Generate markdown documentation from a given unmarshaller object, containing the name, type, default value and a description of each configuration.</p>
<p>In our use case, we display the documentation of our React component on GitHub and in a panel in our Storybook.</p>
<p>The documentation will look like this:</p>
<table>
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>default value</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>background_color</code></td>
<td><code>string</code></td>
<td><code>#69b0dc</code></td>
<td>Background color of the card</td>
</tr>
<tr>
<td><code>font_color</code></td>
<td><code>string</code></td>
<td><code>black</code></td>
<td>Font color</td>
</tr>
<tr>
<td><code>name</code></td>
<td><code>string</code></td>
<td><code>Sven</code></td>
<td>Name of the person</td>
</tr>
</tbody>
</table>
<p>You can find an example <a href="https://github.com/xtuc/unmarshaller/tree/master/examples/component-config-readme">here</a>.</p>
<p><strong>unmarshaller-generator-storybook-knobs</strong></p>
<p>Generate Storybook <a href="https://github.com/storybooks/storybook/tree/master/addons/knobs">addons/knobs</a> from the unmarshaller object.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>There's an example showing how to do this <a href="https://github.com/xtuc/unmarshaller/tree/master/examples/component-config-storybook-knobs">in the repository</a>.</blockquote><p>More extras to come soon. <em>unmarshaller</em> is a flexible tool, I'm excited to see tools built on top of it soon.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Sven! <em>unmarshaller</em> seems to handle the problem of marshalling admirably. To learn more about the project, see <a href="https://github.com/xtuc/unmarshaller">unmarshaller on GitHub</a>.</p>
Popper.js - Easy Tooltips and Popovers - Interview with Federico Zivoloapopperjseasytooltipsandpopoversinterviewwithfedericozivolo2017-05-29t00:00:00z2017-05-29T00:00:00Z<p>There are times when a vanilla <code><abbr></code> or <code><acronym></code> doesn't cut it. What if you want to do something more complex?</p>
<p><a href="https://popper.js.org/">Popper.js</a> by <a href="https://twitter.com/FezVrasta">Federico Zivolo</a> achieves exactly this. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/52648ca9bee250edf351385c1e87416c?s=200" alt="Federico Zivolo" class="author" width="100" height="100" />
</span>
I'm Federico (Fez) Zivolo, UI Specialist at Quid. Born in Italy, I live in Budapest now. I like to help with open source projects on GitHub and I maintain some created by me.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-popper-js-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-popper-js-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Popper.js</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-popper-js-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Popper.js is a library to help you position tooltips, popovers, dropdowns and any contextual element that should appear near a button or similar (I call them "poppers").
In short, it's a piece of code that saves you hours of work on any of your projects, since almost all of them end up featuring some "popper".</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-popper-js-work-" id="how-does-popper-js-work-"></a><span class="text">How does <em>Popper.js</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-popper-js-work-">#</a></h2>
<p>That's a good question; I'm still trying to figure it out!</p>
<p>Jokes apart, the principle is pretty straightforward. It takes a reference element (usually a button) and a popper element (any element you want to position), it finds out a common offset parent, computes the position of the reference element relative to such parent, and then generates a set of coordinates use to position the popper element.</p>
<p>The hardest part is to consider a whole set of edge cases which range from cross browser compatibilities to box model capillarities, including taking care of the scrollable elements.</p>
<p>The usage is simple:</p>
<pre><code class="lang-js"><span class="token keyword keyword-new" >new</span> <span class="token class-name" >Popper</span><span class="token punctuation brackets-parentheses" >(</span>referenceElement<span class="token punctuation" >,</span> popperElement<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>This code will position the <code>popperElement</code> on the bottom of the provided <code>referenceElement</code>. Also, you already have access to all the built-in features of the library.</p>
<p>The line also achieves the following:</p>
<ul>
<li>If the <code>referenceElement</code> is too close to the bottom of the viewport, the <code>popperElement</code> will be positioned on top of it instead.</li>
<li>If the two elements are positioned in two different parents, Popper.js will take care of it and will still properly position the popper element correctly.</li>
<li>It handles scrollable elements and page resizes.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-popper-js-differ-from-other-solutions-" id="how-does-popper-js-differ-from-other-solutions-"></a><span class="text">How does <em>Popper.js</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-popper-js-differ-from-other-solutions-">#</a></h2>
<p>There aren't a lot of available solutions and they all cover a small subset of cases that are instead adequately addressed by Popper.js. The main difference is in the fact that my library doesn't need to manipulate the DOM directly to work.</p>
<p>This fact leads to two strengths: it doesn't have to move the popper node in a different context to properly work and can be integrated into frameworks and view libraries such as React and AngularJS with ease.</p>
<p>You can easily do this to delegate the DOM manipulation:</p>
<pre><code class="lang-js"><span class="token keyword keyword-new" >new</span> <span class="token class-name" >Popper</span><span class="token punctuation brackets-parentheses" >(</span>referenceElement<span class="token punctuation" >,</span> popperElement<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
modifiers<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
applyStyle<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> enabled<span class="token punctuation" >:</span> <span class="token boolean" >false</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
updateReactData<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
order<span class="token punctuation" >:</span> <span class="token number" >900</span><span class="token punctuation" >,</span>
<span class="token function" >fn</span><span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> data <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> data<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>We have disabled the built-in <code>applyStyle</code> modifier (they are like middleware, and most of the functionalities provided by Popper.js are provided by them), and defined our custom modifier that only proxies the computed popper coordinates and information to our React component.</p>
<p>Now that you have all the knowledge provided by Popper.js, you can do whatever you need to apply the needed styles to the popper element.</p>
<p>You may have noticed that my custom modifier is returning the <code>data</code> object at the end. This object is needed because other modifiers may run after it and read the <code>data</code> object.
This chain-based approach makes Popper.js extensible; you can inject any custom function before or after any of the existing modifiers, disable the ones you don't need, and alter the behavior of others simply modifying the data stored in the <code>data</code> object.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-popper-js-" id="why-did-you-develop-popper-js-"></a><span class="text">Why did you develop <em>Popper.js</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-popper-js-">#</a></h2>
<p>At the time of the creation of Popper.js, I worked for a company which made large use of tooltips and popovers in their Ember.js application. We had an internal implementation of a positioning library similar to Popper.js, written mostly by two other team members and me. Its code was pretty messy because it had been developed just to work in our particular cases and it was deeply tied to the Ember.js internals.</p>
<p>The time needed to maintain such library became a problem because we spent a significant portion of our time fixing bugs related to it.
We then decided to outsource it and use an existing open source library to do the job.</p>
<p>I performed the investigations to find a suitable alternative; the only available choices were Tether and jQuery UI Position. The latter, after some quick tests, ended up being too basic to be used in our context. The only way to use it would have been to fork it and add the missing features.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#tether-was-promising-but-not-enough" id="tether-was-promising-but-not-enough"></a><span class="text">Tether Was Promising But Not Enough</span><a class="header-anchor-select" href="https://survivejs.com/#tether-was-promising-but-not-enough">#</a></h3>
<p>Tether was very promising, it supported a lot of features and performed quite well. But it had some pretty limiting constraints as the library arbitrarily moved our components away from their original DOM tree context to have them positioned as direct children of the <code>body</code> tag.</p>
<p>This fact was a major problem because it interfered with the way Ember handled the DOM. One of the problems I remember is that our tests couldn't work because the testing environment of Ember looked for the DOM nodes only inside the root node of the Ember.js application.</p>
<p>The other problem was the limited customizability of it; we couldn't add any additional behavior or feature to it. For instance, we couldn't make a tooltip switch from "right" to "bottom" in case there wasn't enough space on its right. It only allowed "right - left" and "top - bottom".</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#a-custom-library-was-needed" id="a-custom-library-was-needed"></a><span class="text">A Custom Library Was Needed</span><a class="header-anchor-select" href="https://survivejs.com/#a-custom-library-was-needed">#</a></h3>
<p>I wanted to use an existing solution because I just wanted to get the job done, but with these premises, the only viable solution I found was to write my library. My company didn't have time to allocate to write it, so I ended up writing it during a weekend...</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Popper.js is getting adopted by more projects every day, and that's cool.
My biggest "competitor" discontinued its library (Tether) and <a href="https://github.com/HubSpot/tether/#rotating_light-project-status-rotating_light">they now point to Popper.js</a>, I hope to be able to serve their users as they deserve.</p>
<p>Bootstrap <a href="https://github.com/twbs/bootstrap/pull/22444">recently merged a PR</a> to use my library in their code base. I hope to see a larger number of contributions on my project as a result.</p>
<p>Other great developers have developed <a href="https://github.com/FezVrasta/popper.js/blob/master/MENTIONS.md#integration-in-frameworks-and-view-libraries">integrations for Popper.js</a> to use it in the most popular libraries such as React, Preact, and Vue.js; others are working to create one for Ember.js. Only Angular is behind and needs a proper integration.</p>
<p>Certain outstanding issues that have to be fixed to handle all the edge cases. More tests have to be written to assure a high quality and reliability, and the API will probably need some makeover in the future.
There is a lot of work and not much time available, but I'll do my best to maintain the library and improve it continuously. Some help would be very welcome. 😉</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-popper-js-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-popper-js-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Popper.js</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-popper-js-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The most innovative idea behind Popper.js is the modularity of it, no other similar libraries let you completely de-opt from any DOM manipulation and delegate them to your code.
I think we may see more libraries follow this direction and make the life of other developers easier.</p>
<p>Since the current front-end scenario is populated by a lot of different technologies, the library authors must adopt a model that allows the consumers to integrate them with the existing frameworks and libraries without compromises.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>It may sound childish, a lot of folks will tell you that it's a matter of preferences and blah blah... But I think the future of the web development is in the functional, data-driven, development as promoted by Facebook with React. The whole idea of state management "introduced" [1] by those guys saved my team and me hundreds of hours of development already.</p>
<p>If you are getting into web development, first learn the basics of the web: HTML, JavaScript, and CSS. Then, move to any framework or library that follows the data driven and functional principles, if not React, anything wich shares the same idea. Doing this will set you a mindset that will help you to handle and resolve any situation.</p>
<p>[1]: Necessary note, Facebook didn't invent it, they simply promoted within the web development environment.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<ol>
<li>Travis Arnold (<strong>@souporserious</strong>), he is working on some cool responsive components libraries and worked on react-popper, he knows better than anyone else how to integrate libraries into React.</li>
<li>Gajus Kuizinas (<strong>@kuizinas</strong>), he works on a lot of awesome stuff, but I especially like his ideas about CSS Modules vs. CSS in JS solutions.</li>
<li>Nik Graf (<strong>@nikgraf</strong>), for his work with React VR!</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you want to be a great developer, remember to have fun along the way. 🙃</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Federico! If I need tooltips or popovers, I know where to look now.</p>
<p>Remember to check <a href="https://popper.js.org/">Popper.js demos</a> and <a href="https://github.com/FezVrasta/popper.js">Popper.js on GitHub</a>.</p>
SurviveJS Euro Summer Tour 2017asurvivejseurosummertour20172017-05-28t00:00:00z2017-05-28T00:00:00Z<p>It's time for another tour. This time around I'll be focusing on <a href="https://survivejs.com/training/">training</a>. I have material specifically for webpack and React and this will be a good excuse to improve my book offerings while at it. I've found working on training material forces you to think carefully and this work flows back to writing.</p>
<p>This time around I'll spend time particularly in Slovakia, Germany, Austria, and the United Kingdom. I'll spend a few weeks at Vienna and there's room in the schedule.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-31-5-12-6-ko-ice-slovakia-" id="-31-5-12-6-ko-ice-slovakia-"></a><span class="text"><del>31.5-12.6 - Košice, Slovakia</del></span><a class="header-anchor-select" href="https://survivejs.com/#-31-5-12-6-ko-ice-slovakia-">#</a></h2>
<p>I'll start the tour from Košice and I'll be offering at least two sessions there, one of which will be public.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-12-6-14-6-prague-czech-republic-" id="-12-6-14-6-prague-czech-republic-"></a><span class="text"><del>12.6-14.6 - Prague, Czech Republic</del></span><a class="header-anchor-select" href="https://survivejs.com/#-12-6-14-6-prague-czech-republic-">#</a></h2>
<p>I get to spend a day at Prague, one of my favorite cities in Europe. I don't have any specific plans yet but I might go and see some Mucha art.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-14-6-18-6-berlin-germany-" id="-14-6-18-6-berlin-germany-"></a><span class="text"><del>14.6-18.6 - Berlin, Germany</del></span><a class="header-anchor-select" href="https://survivejs.com/#-14-6-18-6-berlin-germany-">#</a></h2>
<p>Most of my time in Berlin has been reserved by a client but I'll have time especially on 14th, 17th, and 18th.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-18-6-2-7-vienna-austria-" id="-18-6-2-7-vienna-austria-"></a><span class="text"><del>18.6-2.7 - Vienna, Austria</del></span><a class="header-anchor-select" href="https://survivejs.com/#-18-6-2-7-vienna-austria-">#</a></h2>
<p>I'll spend most of my time in Vienna. This is actually a good time for you to book me as it's easy to reach places from there. In the worst case I get some vacation time in a great city!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-2-7-10-7-augsburg-germany-" id="-2-7-10-7-augsburg-germany-"></a><span class="text"><del>2.7-10.7 - Augsburg, Germany</del></span><a class="header-anchor-select" href="https://survivejs.com/#-2-7-10-7-augsburg-germany-">#</a></h2>
<p>The purpose of the Augsburg week is to focus on training through a local partner.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-10-7-15-7-london-uk-" id="-10-7-15-7-london-uk-"></a><span class="text"><del>10.7-15.7 - London, UK</del></span><a class="header-anchor-select" href="https://survivejs.com/#-10-7-15-7-london-uk-">#</a></h2>
<p>I'll participate <a href="https://skillsmatter.com/conferences/8264-fullstack-2017-the-conference-on-javascript-node-and-internet-of-things">FullStack 2017</a> as an invited speaker. I'll have a short, two hour workshop on 14th based on <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> material.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Compared to <a href="https://survivejs.com/blog/euro-tour-2017-recap/">the previous tour</a> this one will be more relaxed and I'll have more time available. The earlier experience will come in handy this time around and I'll be open to opportunities!</p>
<p>If you are interested in my services, please check out my <a href="https://survivejs.com/training/">training offering</a>. You can also try to invite me to your meetup if we can find some interesting topic and you are willing to cover associated costs.</p>
ES Modules - Interview with Bradley Fariasaesmodulesinterviewwithbradleyfarias2017-05-22t00:00:00z2017-05-22T00:00:00Z<p>Even though ES6 (ES2015) brought modules to the language, it missed one important thing - a loading method. Proper support is <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">currently being implemented for browsers</a>.</p>
<p>To learn more about the topic, I'm interviewing <a href="https://twitter.com/bradleymeck">Bradley Farias</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/0b22453288cedbe28d53e89e0e0b793d?s=200" alt="Bradley Farias" class="author" width="100" height="100" />
</span>
I am a Software Engineer at GoDaddy these days but have been at several startups before that. My childhood was mostly running around outside in the Texas heat and enjoying video games. At the end of high school, I started programming and have been doing it since then.
</p>
<p>TiddlyWiki was the first open source project that I worked on in college. It was a single page wiki that could save to disk back in 2005. That is what got me interested in JavaScript. I spent many hours trying to recreate various things such as a spreadsheet editor and a polyfill for Range in IE6.</p>
<p>After college I have worked at different companies, eventually seeing Node at the end of 2009 and joining Nodejitsu in 2011 through 2013. Since then I have bounced around between front-end development with a focus on accessibility and lots of backend tooling workflows.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> I used <a href="http://tiddlywiki.com/">TiddyWiki</a> years ago as my personal wiki on a USB stick.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-es-modules-to-someone-who-has-never-heard-of-them-" id="how-would-you-describe-es-modules-to-someone-who-has-never-heard-of-them-"></a><span class="text">How would you describe <em>ES Modules</em> to someone who has never heard of them?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-es-modules-to-someone-who-has-never-heard-of-them-">#</a></h2>
<p>They are a new mode of JavaScript code that allows you to link JavaScript variables between files. ES Modules are statically linked, meaning that when you import variables; the engine must link those variables before evaluating the module.</p>
<p>The nature of if ES Modules are async or sync is unspecified in the JavaScript specification; so even though all environments are targeting making async module systems, someone could make a sync module system using them.</p>
<p>Consider the example below:</p>
<p><strong>index.js</strong></p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// Request the `foo` variable from `./foo` be put into scope</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> foo <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'./foo'</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>foo.js</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> foo <span class="token operator" >=</span> <span class="token string" >'foo'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Mark `foo` as being exported</span>
<span class="token keyword keyword-export" >export</span> <span class="token punctuation brackets-braces" >{</span> foo <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-es-modules-work-" id="how-do-es-modules-work-"></a><span class="text">How do <em>ES Modules</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-es-modules-work-">#</a></h2>
<p>Being a new mode of JavaScript, the first thing is that you have to get your environment to parse ES Modules. In ES2015 the plans for how to use ES Modules was in the specification. However, with no loading mechanism, there was no clear plan for browsers or servers as to how to load modules.</p>
<p>It wasn't until sometime later that WHATWG proposed <code><script type=module></code> and Node proposed a new <code>.mjs</code> file extension to clarify to the environment how modules are loaded.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#shared-variables-have-to-be-linked-together" id="shared-variables-have-to-be-linked-together"></a><span class="text">Shared Variables Have to Be Linked Together</span><a class="header-anchor-select" href="https://survivejs.com/#shared-variables-have-to-be-linked-together">#</a></h3>
<p>After being loaded, the engine needs to link together all the variables that are shared between modules. That means, all the modules in the dependency graph need to be available. The engine recursively reads each source text for the modules and finds all of the dependencies of the modules until there are none left.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#throw-an-error-on-failure-or-proceed-and-hoist" id="throw-an-error-on-failure-or-proceed-and-hoist"></a><span class="text">Throw an Error on Failure or Proceed and Hoist</span><a class="header-anchor-select" href="https://survivejs.com/#throw-an-error-on-failure-or-proceed-and-hoist">#</a></h3>
<p>If some modules cannot be found, the engine throws an error. Otherwise, it takes all variables marked with <code>export</code> and puts read-only views of them in the modules that <code>import</code> those exported variables.</p>
<p>At this point, JavaScript's hoisting takes place, and function declarations and variables are hoisted and allocated. These functions can be called before the module evaluating, but might encounter errors from other variables not being initialized.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linked-graph-will-be-evaluated" id="linked-graph-will-be-evaluated"></a><span class="text">Linked Graph Will Be Evaluated</span><a class="header-anchor-select" href="https://survivejs.com/#linked-graph-will-be-evaluated">#</a></h3>
<p>Now that the module graph is linked, it is time to start evaluating it. The engine takes a depth-first traversal from the entry module in the order which the import declarations appear in the source text and starts evaluating. If any module throws an error while evaluating, the engine stops evaluating modules and leaves them in the current state of evaluation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-es-modules-differ-from-other-solutions-" id="how-do-es-modules-differ-from-other-solutions-"></a><span class="text">How do <em>ES Modules</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-es-modules-differ-from-other-solutions-">#</a></h2>
<p>First and foremost, I need to preface this by stating transpilers don't implement ES Modules. They implement a transform of ES Modules <em>syntax</em> to CommonJS semantics and APIs. What I am talking about probably doesn't work the same as a transpiler.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#new-parser-and-evaluation-system" id="new-parser-and-evaluation-system"></a><span class="text">New Parser and Evaluation System</span><a class="header-anchor-select" href="https://survivejs.com/#new-parser-and-evaluation-system">#</a></h3>
<p>ES Modules use a new parser and evaluation system in the JavaScript specification. They automatically make your code have the same rules as <code>"use strict"</code>, reserve <code>await</code> as a keyword, and have some changes to how scoping works.</p>
<p>ES Modules are a statically linked module system. Unlike CommonJS or AMD, all dependencies must be known and parsed before <em>any</em> user code evaluating.</p>
<pre><code class="lang-javascript">console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'Hello World!'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// Never evaluates</span>
<span class="token keyword keyword-import" >import</span> <span class="token string" >'./doesNotExist'</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// Will error</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> doesNotExist <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'./doesExist'</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// Will error</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#variable-bindings-not-value-bindings" id="variable-bindings-not-value-bindings"></a><span class="text">Variable Bindings, Not Value Bindings</span><a class="header-anchor-select" href="https://survivejs.com/#variable-bindings-not-value-bindings">#</a></h3>
<p>ES Modules work with variable bindings, not values. Other module systems share values, ES Modules share variables. That means, if a variable is updated, all files sharing that variable see the update.</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// Every file will see `uptime` change over time</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-let" >let</span> uptime <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token function" >setInterval</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> uptime<span class="token operator" >++</span><span class="token punctuation" >,</span> <span class="token number" >1000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>ES Modules are being implemented as asynchronous. CommonJS is a synchronous module system that stops executing code while dependencies load.</p>
<p>To be compatible with performance concerns on the web, ES Modules are asynchronous in all future implementations. Due to this, you can have code executing while loading a module graph. It also means that ES Module graphs can be loaded in parallel, even if they overlap.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#specifiers-are-url-based-strings" id="specifiers-are-url-based-strings"></a><span class="text">Specifiers are URL Based Strings</span><a class="header-anchor-select" href="https://survivejs.com/#specifiers-are-url-based-strings">#</a></h3>
<p>ES Modules specifiers are being treated as URL based strings. In some module systems like CommonJS <code>./hello?world=earth</code> would be treated as a file path. These are now always URLs.</p>
<p>ES Modules always evaluate for each URL that is different. That means implementations would always load the file for <code>./hello</code> but then add the query string to the file metadata. <code>./hello?world=moon</code> would load a second time after <code>earth</code>!</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token string" >'./echo?msg=hi'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token string" >'./echo?msg=there'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Prints:</span>
<span class="token comment" spellcheck="true" >// > hi</span>
<span class="token comment" spellcheck="true" >// > there</span>
</code></pre>
<p>ES Modules are idempotent. Within a given source text, <code>import { foo } from "./foo";</code> will <em>always</em> return the same variable <code>foo</code>. Tools can treat multiple imports are referring to the same variable and it also means that even if someone uses <code>import('foo');</code> it will return the same set of variables every time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-to-use-es-modules-" id="why-to-use-es-modules-"></a><span class="text">Why to use <em>ES Modules</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-to-use-es-modules-">#</a></h2>
<p>Removing build steps. With ES Modules, people can write applications without needing to use a tool like <strong>webpack</strong> or <strong>Browserify</strong>. However, browsers are still figuring out how they want to import things like <code>import 'react';</code>; for now, use relative or absolute paths.</p>
<p>Code splitting. Having ES Modules be asynchronous and able to load in parallel, module graphs can have multiple entry points that only touch the parts of a codebase that are needed.</p>
<p>Enhanced tooling capabilities. Tools like <strong>rollup</strong> can combine ES Modules with a technique called "Tree Shaking" that removes unused code from a bundle's output. Editors can check if a variable is exported when a developer uses an <code>import</code> since ES Modules use a new syntax.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<ul>
<li><code>import()</code> is coming to both Module and Script modes of JavaScript and will allow Modules to be loaded dynamically.</li>
<li>A way to get the URL of the Module for a source text <a href="https://github.com/whatwg/html/issues/1013">is being standardized</a>.</li>
<li>Browsers are rolling out the <code><script type=module></code> ES Module loader allowing people to start testing ES Modules and figuring out workflows.</li>
<li>Tools are landing <code>.mjs</code> support allowing interoperability with both Node and the web.</li>
<li>Node is going to expose the <code>.mjs</code> based ES Module loader allowing people to start testing ES Modules and figuring out workflows.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-es-modules-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-es-modules-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>ES Modules</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-es-modules-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>It looks pretty exciting; there will be a definite transition time while bare URLs are figured out in the browser, and people start using <code>.mjs</code>. I think that one day, we will have development servers that can run ES Modules without any build step, but it is probably ways away.</p>
<p>Even in development, people may want to use code transforms for things like JSX or other templating. The web is moving towards a more tooling heavy ecosystem, and that has caused some difficulty.</p>
<p>I think that this trend is likely to continue as things like WASM become integrated with JavaScript. Tools should be embraced so that they can be improved to the point where they are not thought about when using them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Do not despair! The web is one of the most challenging and complex programming environments out there. There are many ways to do things, so don't be afraid of your code looks different from any other code. Make your code work and enjoy what you have done.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>This is a bit of a rough one; I would say Caridy Patiño is a good choice. He has a lot of involvement in places like internationalization and TC39.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Try and stay true to yourself, whoever you are. People can get very heated on technical topics, but don't let them pressure you into anything. Stay open to criticism, listen to others, and become stronger in your beliefs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Bradley! I think we live in interesting times and pushing module loading to the browser level feels like one of the last missing bits. It will change the way people think about web development again.</p>
Blue Arrow Awards - Finnish Code Ambassador of 2017abluearrowawardsfinnishcodeambassadorof20172017-05-21t00:00:00z2017-05-21T00:00:00Z<p>In the beginning, there was a swamp, a hoe, and Jussi. Originally a large part of Finland was swamp and life were hard, but as Jussi worked on the swamp, it paid off eventually.</p>
<p>Interestingly you can still see the same pattern. You can always find a problem (your swamp) in which you apply a tool and determination. That seems to be the core of being a Finn and even entrepreneurship.</p>
<p>I found my swamp in late 2014 as I commented on Christian Alfoni's blog post about webpack. Since then a lot has changed, and no doubt will change still. The years since have been a period of personal growth, and I'm happy to announce that the efforts haven't gone unnoticed.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#finnish-code-ambassador-of-2017" id="finnish-code-ambassador-of-2017"></a><span class="text">Finnish Code Ambassador of 2017</span><a class="header-anchor-select" href="https://survivejs.com/#finnish-code-ambassador-of-2017">#</a></h2>
<p>I was chosen as the <a href="https://www.bluearrowawards.com/blog/chabla-winner-blue-arrow-award-2017/">Finnish Code Ambassador of 2017 by Blue Arrow Awards</a>. It's an honorary title I carry with great pride. The win doesn't mean the work is over; maybe it has only just begun.</p>
<p>The contest itself is quite new, and it was arranged the second time in a row. Historically us Finns have been more of doers instead of tellers, but the culture appears to be changing.</p>
<p>The win wouldn't have been possible without you, the community. It's the interaction and constant feedback that keeps the effort living. I want to especially thank my patient editors <a href="https://github.com/foxandxss">Jesús Rodríguez</a>, <a href="https://github.com/undistraction">Pedr Browne</a>, and <a href="https://github.com/sapegin">Artem Sapegin</a> for help during tough times.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>There are still challenges ahead but it's recognition like this that tells you, you might be on the right track. I hope to grow the effort further and live to my new title of code ambassador. It could be my chance to put Finland on the map.</p>
<p>It's a win I consider more of a community win instead of a personal one. During this process, <a href="https://presentations.survivejs.com/re-imagining-webpack">we helped a major web technology to emerge</a> and perhaps we can go a bit further.</p>
async-reactor - Render Async Stateless Functional Components in React - Interview with Sven Sauleauaasyncreactorrenderasyncstatelessfunctionalcomponentsinreactinterviewwithsvensauleau2017-05-15t00:00:00z2017-05-15T00:00:00Z<p>One common way to deal with asynchronous concerns (fetching for example) in React is to push the problem to a state manager or handling it through life cycle methods. Sometimes that can feel a bit much, though, and a lighter solution would be nice.</p>
<p><strong>async-reactor</strong> by <a href="https://twitter.com/svensauleau">Sven Sauleau</a> has been designed exactly for this purpose.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/414f1942b9cb139e430fa864c276646b?s=200" alt="Sven Sauleau" class="author" width="100" height="100" />
</span>
Hi, my name is Sven Sauleau, and I'm a French software engineer. OSS enthusiast and a member of the Babel team. I consider myself as a Vim master.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-async-reactor-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-async-reactor-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>async-reactor</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-async-reactor-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><strong>async-reactor</strong> gives you the possibility to render async functional component in React. It has simple and concise syntax using <code>async</code>/<code>await</code> as illustrated below:</p>
<pre><code class="lang-js"><span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Component</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >asyncA</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-await" >await</span> <span class="token function" >asyncB</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token operator" ><</span>html<span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>html<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>It's useful at least in the following ways:</p>
<ul>
<li>Code splitting with the <code>import()</code> function (<a href="https://github.com/tc39/proposal-dynamic-import">currently stage 3 of the TC39 process</a>).</li>
<li>Requesting using the <code>window.fetch()</code> function.</li>
<li>Waiting for DOM event (for example using <a href="https://www.npmjs.com/package/p-event">p-event</a> by <strong>@sindresorhus</strong>).</li>
<li>Awaiting asynchronous browser APIs or your logic that returns a <code>Promise</code>.</li>
</ul>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can find examples in the <a href="https://github.com/xtuc/async-reactor">GitHub repository</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-async-reactor-work-" id="how-does-async-reactor-work-"></a><span class="text">How does <em>async-reactor</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-async-reactor-work-">#</a></h2>
<p>async-reactor is a small library for React implementing the API below:</p>
<pre><code class="lang-js"><span class="token function" >asyncReactor</span><span class="token punctuation brackets-parentheses" >(</span>
component<span class="token punctuation" >:</span> Function<span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// The `async` component you want to render</span>
loader<span class="token operator" >?</span><span class="token punctuation" >:</span> Component<span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// Shown until the first component renders</span>
error<span class="token operator" >?</span><span class="token punctuation" >:</span> Component <span class="token comment" spellcheck="true" >// Shown when an error occurred</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >:</span> Component
</code></pre>
<p>For better user experience you can show a loading component while waiting for your main component to render and an error component when an error occurs.</p>
<p>Components returned by async-reactor are just regular React components, you can use them across your app.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-async-reactor-differ-from-other-solutions-" id="how-does-async-reactor-differ-from-other-solutions-"></a><span class="text">How does <em>async-reactor</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-async-reactor-differ-from-other-solutions-">#</a></h2>
<p>I didn't find an alternative solution to async-reactor.</p>
<p><strong>@thejameskyle</strong> made an excellent package named <a href="https://www.npmjs.com/package/react-loadable">react-loadable</a>. It's a higher order React component for remote loading components. You can have an equivalent behavior using async-reactor with a concise syntax and a simpler error handling:</p>
<pre><code class="lang-js"><span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Component</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> DynamicComponent <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> <span class="token keyword keyword-import" >import</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'./DynamicComponent.js'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>div<span class="token operator" >></span>
<span class="token operator" ><</span>DynamicComponent <span class="token operator" >/</span><span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You can add a regular <code>try</code>/<code>catch</code> block around the import and a loader component using the async-reactor API.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-async-reactor-" id="why-did-you-develop-async-reactor-"></a><span class="text">Why did you develop <em>async-reactor</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-async-reactor-">#</a></h2>
<p>I mentioned the boilerplate code that I needed to write to handle an HTTP request. The first solution was a high order component, but it wasn't simple to use.</p>
<p>Here is an example of one of my project that I refactored to use async-reactor.</p>
<p><strong>Before:</strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> React<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> Component<span class="token punctuation" >,</span> cloneElement <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-class" >class</span> <span class="token class-name" >FetchIssues</span> <span class="token keyword keyword-extends" >extends</span> <span class="token class-name" >Component</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >constructor</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-super" >super</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> isLoading<span class="token punctuation" >:</span> <span class="token boolean" >true</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >componentWillMount</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> issues <span class="token operator" >=</span> <span class="token keyword keyword-import" >import</span><span class="token punctuation brackets-parentheses" >(</span><span class="token template-string" ><span class="token string" >`../issues-</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>process<span class="token punctuation" >.</span>env<span class="token punctuation" >.</span>LANG<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >.json`</span></span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
issues<span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> data<span class="token punctuation" >,</span> isLoading<span class="token punctuation" >:</span> <span class="token boolean" >false</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> <span class="token punctuation brackets-braces" >{</span> data<span class="token punctuation" >,</span> isLoading <span class="token punctuation brackets-braces" >}</span> <span class="token operator" >=</span> <span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>isLoading<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >cloneElement</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>loader<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >cloneElement</span><span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>props<span class="token punctuation" >.</span>children<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> data <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><strong>After:</strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> cloneElement <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> FetchLoader <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'./FetchLoader'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> asyncReactor <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'async-reactor'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-async" >async</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >Component</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>children<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> data <span class="token operator" >=</span> <span class="token keyword keyword-await" >await</span> <span class="token keyword keyword-import" >import</span><span class="token punctuation brackets-parentheses" >(</span><span class="token template-string" ><span class="token string" >`../issues-</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>process<span class="token punctuation" >.</span>env<span class="token punctuation" >.</span>LANG<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >.json`</span></span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >cloneElement</span><span class="token punctuation brackets-parentheses" >(</span>children<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> data <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-const" >const</span> FetchIssues <span class="token operator" >=</span> <span class="token function" >asyncReactor</span><span class="token punctuation brackets-parentheses" >(</span>Component<span class="token punctuation" >,</span> FetchLoader<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm using Preact a lot, and I would like to make an async-reactor version which would work out of the box with it.</p>
<p>I was also asked to make a Vue.js version.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-async-reactor-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-async-reactor-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>async-reactor</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-async-reactor-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>async-reactor relies on the <code>async</code>/<code>await</code> syntax heavily. Major browsers support it already, and with the native support, transpilation and the overhead are not needed anymore. I expect the number of users will increase as the support increases.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I didn't learn development in school, I learned it by myself. The best advice I could give to a new developer is to read documentation about what they are using, reading books and watching conference videos.</p>
<p>Contributing to an open source project is also an excellent way to improve your skills and learn new things. You can find issues for a beginner on <a href="https://contributor.ninja">contributor.ninja</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have a few in mind:</p>
<ul>
<li>Federico Zivolo (<strong>@FezVr4sta</strong>) develops a library called <a href="https://www.npmjs.com/package/popper.js">popper.js</a>. Since recently Bootstrap uses his library for dropdown, tooltips or popover.</li>
<li>Bradley Farias (<strong>@bradleymeck</strong>) is the one pushing ES modules since over a year.</li>
<li>Henry Zhu (<strong>@left_pad</strong>) maintainer of Babel, he knows a lot about how OSS works.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you want, read more about <a href="https://babeljs.io/docs/plugins/transform-async-to-generator/">async functions</a> and the <a href="https://babeljs.io/docs/plugins/transform-async-to-generator/">await operator</a>. I recommend using Babel's <a href="https://babeljs.io/docs/plugins/transform-async-to-generator/">async-to-generator transformation</a> if your platform is missing this syntax.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you are using <a href="https://www.npmjs.com/package/babel-preset-env">babel-preset-env</a>, you are set.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Sven! <strong>async-reactor</strong> looks almost too easy to use. It definitely cuts down the amount of boilerplate related to performing asynchronous operations on component level.</p>
<p>Check out the <a href="https://github.com/xtuc/async-reactor">GitHub project</a> to learn more.</p>
WebpackBin - Webpack Code Sandbox - Interview with Christian Alfoniawebpackbinwebpackcodesandboxinterviewwithchristianalfoni2017-05-09t00:00:00z2017-05-09T00:00:00Z<p>Online tools are great for prototyping ideas and even workshops. You avoid the pain of setup while giving up some degree of control. Often this is a good trade-off, though.</p>
<p>The interview series covered <a href="https://survivejs.com/blog/codesandbox-interview">CodeSandbox, an online React playground</a> earlier. This time around it's time to look into another alternative, WebpackBin by <a href="https://twitter.com/christianalfoni">Christian Alfoni</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you have been following the series, you might remember an earlier interview of Christian. That time around we <a href="https://survivejs.com/blog/cerebral-interview">discussed his state management solution, cerebral</a>.</blockquote><blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> WebpackBin isn't online anymore. You can still read the blog post but don't expect the service to work!</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/a3ec41be3805962e3c90ccdbbb8e32fb.jpg" alt="Christian Alfoni" class="author" width="100" height="100" /><figcaption>Christian Alfoni</figcaption></figure>
For sure! :) I am a 33-year-old JavaScript hacker, developer, OSS enthusiast and due to that an emotional wreck. Living in Trondheim, Norway. I spend my days at Ducky, a startup I joined last year.
</p>
<p>We are trying to save the planet, and my part in that is making technology choices and informally running a small development team to support the constant changes and ambitions of the company.</p>
<p>Related to this I do a lot of open source. The <a href="http://www.cerebraljs.com">cerebral</a> project, which we have talked about before, is about to hit 2.0 release and has been a great tool to handle the complexity and constant changes in our project.</p>
<p>I also have other smaller projects, like <a href="https://github.com/cerebral/marksy">marksy</a>, I write articles from time to time on <a href="http://www.christianalfoni.com">www.christianalfoni.com</a>, and I have built a bin service that uses webpack bundling on the server side. My biggest project these days though is my six months year old daughter, Emma.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-webpackbin-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-webpackbin-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>WebpackBin</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-webpackbin-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>You have probably heard about bin services like JSBin, Codepen, etc. These are certainly excellent services, but the way we write our code has changed a lot the last few years. We transpile pretty much everything we write.</p>
<p>The JavaScript code itself to a more modern syntax, JSX, templates, CSS, etc. We do not add libraries as script tags anymore either; we install them from npm. Lastly, we bundle all this together using a build tool, like webpack, using a single entry point. Webpackbin does its best to be a bin service that gives you these features directly in the browser.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-webpackbin-work-" id="how-does-webpackbin-work-"></a><span class="text">How does <em>WebpackBin</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-webpackbin-work-">#</a></h2>
<p>Webpackbin is split up into different services.</p>
<ul>
<li>Webpackbin Client</li>
<li>webpack-sandbox</li>
<li>webpack-dll</li>
<li>webpack-packager</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpackbin-client" id="webpackbin-client"></a><span class="text">Webpackbin Client</span><a class="header-anchor-select" href="https://survivejs.com/#webpackbin-client">#</a></h3>
<p>The client itself is just a JavaScript application that is served from Firebase and connects directly to it. It is built with Cerebral and Inferno. When the client loads up, it will contact the <strong>webpack-sandbox</strong> service.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-sandbox" id="webpack-sandbox"></a><span class="text">webpack-sandbox</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-sandbox">#</a></h3>
<p>The request contains information about the files, npm packages and Webpack loaders that have to be activated on the bin. The <strong>webpack-sandbox</strong> will spin up a webpack middleware on your personal session based on these details, much like the webpack-dev-middleware. What is unique about this middleware though is that it runs entirely in memory.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-dll" id="webpack-dll"></a><span class="text">webpack-dll</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-dll">#</a></h3>
<p>If the request contains npm packages, the <strong>webpack-sandbox</strong> service will make a request to <strong>webpack-dll</strong>. The request is specifically for a <em>manifest.json</em> file. If the compilation of packages has been requested before, this file is either returned by the CDN or the database of the <strong>wepback-dll</strong> service. If it is a new compilation of packages <strong>webpack-dll</strong> will contact one of multiple <strong>webpack-packager</strong> instances.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-packager" id="webpack-packager"></a><span class="text">webpack-packager</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-packager">#</a></h3>
<p>The <strong>webpack-packager</strong> takes the list of packages, runs them with Yarn, uses Webpack to bundle up a DLL bundle, cleans up after itself and responds to the <strong>webpack-dll</strong> service. The <strong>webpack-dll</strong> service now puts the bundle into a database and also responds with the requested manifest.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>A DLL bundle is a JavaScript file that your app file can hook into to load modules, typically packages from npm.</blockquote><p>Now <strong>webpack-sandbox</strong> has a manifest it bundles together with your middleware instance and any loaders configured. It responds with an OK, and the webpackbin client will now refresh an iframe also pointing to <strong>webpack-sandbox</strong>, but now it is a get request.</p>
<p>The session is picked up, points to the middleware, extracts the bundled files and injects a script in the <em>index.html</em> to the <em>dll.js</em> file related to the manifest that was requested earlier. The iframe loads the returned index.html which grabs the dll file, your particular bin app bundle and voilà your bin is displayed.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#design-the-hardest-part" id="design-the-hardest-part"></a><span class="text">Design - The Hardest Part</span><a class="header-anchor-select" href="https://survivejs.com/#design-the-hardest-part">#</a></h3>
<p>Now, it was not like I took a shower or woke up one night and had a clear picture of this. There have been many showers and many sleepless nights thinking about and tweaking this. And what I just explained now is the easy part. The hardest part will most certainly come as a surprise, and it is two-fold.</p>
<p><strong>1. Webpack DLL bundles are not as straightforward as you might think</strong></p>
<p>They require the npm packages to be installed locally to resolve entrypoints, but there is no local install in the browser. So the way this is solved is by analyzing the npm packages and finding relevant entrypoints beforehand. These entry points are then defined as <em>externals</em>, so your code grabs the correct module when asked.</p>
<p><strong>2. npm packages are a complete mess</strong></p>
<p>It feels like every single npm package out there has their little tweak on <strong>package.json</strong> property names, directory names, file names and what is included in the published npm package.</p>
<p>The <strong>webpack-packager</strong> service has a lot of logic to figure out what should be included, mostly by figuring out what should <strong>not</strong> be included. Doing this is still a challenge, but it is under control.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-webpackbin-differ-from-other-solutions-" id="how-does-webpackbin-differ-from-other-solutions-"></a><span class="text">How does <em>WebpackBin</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-webpackbin-differ-from-other-solutions-">#</a></h2>
<p>When it comes to features, Webpackbin has a cool LIVE feature. You can just hit a button and share your URL and others can see your code live. You can give control to your participants, and the idea is to provide a teaching tool.</p>
<p>Another beautiful thing is that you can download your BIN at any time as a zip file, ready to be npm installed and npm started. It includes the packages, loaders and a webpack config based on that.</p>
<p>But where it is rather unique is its ability to configure Webpack loaders. Which means you can use css-modules, Vue templates, handlebars, etc. pretty much any loader that transpiles can be used.</p>
<p>That said, this has to be pre-configured on the server, due to the nature of running it in-memory with middleware. But if you can not find your loader a PR is always welcomed.</p>
<p>I am not sure about other bin services, but Webpackbin is <a href="https://github.com/cerebral/webpackbin">completely open source</a>. All the parts of the architecture is up for grabs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-webpackbin-" id="why-did-you-develop-webpackbin-"></a><span class="text">Why did you develop <em>WebpackBin</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-webpackbin-">#</a></h2>
<p>Yeah... why did I... hm. First of all, it was a huge technical challenge, and I had somewhere to start, I had an idea, and the webpack-dev-middleware project would very likely help me produce a proof of concept, which it did.</p>
<p>I do not have grand plans with the stuff I do, I just like to follow my obsessions and intuition, and in this case, it resulted in something that could help people... which is the ultimate reward for me.</p>
<p>And working on these kinds of projects usually opens up new doors. Like the <strong>webpack-dll</strong> and <strong>webpack-packager</strong> service is now being used by Codesandbox.io as well, allowing me to meet and work together with a guy who is just as enthusiastic as me about open source, the community, creating things...</p>
<p>Ives makes me feel incredibly old though. Can you believe he is like 20 years old and has built Codesandbox.io? It is pretty crazy. In my defense, and anyone else reading this who is also feeling old now, the web was pretty different 13 years ago.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I worked on a project a while back, using Cerebral, where I was able to record audio and interaction together in the browser allowing you to replay code interactions, pause it, change it, continue where it left off, etc.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpackbin-as-a-teaching-tool" id="webpackbin-as-a-teaching-tool"></a><span class="text">Webpackbin as a teaching tool</span><a class="header-anchor-select" href="https://survivejs.com/#webpackbin-as-a-teaching-tool">#</a></h3>
<p>I hope to find some time to implement this into Webpackbin, making it a teaching tool. You can just create a bin, hit the record button, start talking and coding. When opened by others it is completely transparent what is recorded and what you do as a user, I think that could be a powerful thing.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#npm-package-analysis" id="npm-package-analysis"></a><span class="text">npm package analysis</span><a class="header-anchor-select" href="https://survivejs.com/#npm-package-analysis">#</a></h3>
<p>Other than that Ives and I are tightening the screws on <strong>webpack-packager</strong>, creating a webpage for <strong>webpack-dll</strong> that shows the status of packagers, instructions to contribute or fire up your set of services, etc. We also want to build a service that analyzes your npm distribution, giving you hints about things you should not have there like tests, the source code, docs, benchmarks, etc. and also naming conventions, package.json properties etc.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> I hope npm can take the clue and integrate some of these features to npm client itself!</blockquote><p>We want to help to force some conventions on these things. We are also collaborating on other features that both our services can use. And who knows, maybe a path opens where we can combine forces on all parts of the stack.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-webpackbin-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-webpackbin-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>WebpackBin</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-webpackbin-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I am a bit sick and tired of listening to: "Use a type system, prevent runtime exceptions". "Use immutable data structures, prevent unwanted mutations". These are not good arguments in my opinion.</p>
<p>When I discovered that immutability gives you a history of state changes which could help me debug my app, or it allows you to verify with shallow checking to optimize rendering that is when immutability made sense.</p>
<p>I think the same about type systems. Like runtime exceptions are not the problem. That is not what we spend time on. But I can see self-documenting, safe refactoring and enhanced IDE experience are good arguments for type systems.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#managing-increasing-complexity" id="managing-increasing-complexity"></a><span class="text">Managing Increasing Complexity</span><a class="header-anchor-select" href="https://survivejs.com/#managing-increasing-complexity">#</a></h3>
<p>But my point is that these are not my primary pain points. What I think we struggle with is handling the increase of complexity in our applications. Compare what we did three years ago to what we do now, regarding animations, interaction, data and new technologies.</p>
<p>To handle all this stuff we need abstractions. We need abstractions for UI, animations, state management, flow control, etc. Even the technology itself, like CSS, service workers, etc. There are tons of projects working on improving their usability.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#more-abstractions-more-tooling" id="more-abstractions-more-tooling"></a><span class="text">More Abstractions, More Tooling</span><a class="header-anchor-select" href="https://survivejs.com/#more-abstractions-more-tooling">#</a></h3>
<p>So I think we are going to see a massive increase in abstractions to help us handle all this complexity. We are not going to write more code; we are going to write less. We are going to use a lot more tools, and they are going to be visual tools.</p>
<p>Just take a look at the significant innovations in dev tools for frameworks, Chrome dev tools, bundle analyzers, etc. I think we have only seen the beginning of this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>You only need two things:</p>
<ol>
<li>A subscription on <a href="https://frontendmasters.com/">www.frontendmasters.com</a></li>
<li>A mentor</li>
</ol>
<p>Some people like to say: "Learn the language". I do not agree with that. I think "Get productive and have fun" is more important. You can be insanely productive without understanding the inner workings of JavaScript, and getting into that stuff will come naturally to you as you take on more and more complex concepts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think you should get a hold of Amy Knight from <a href="https://devchat.tv/js-jabber">JavaScript Jabber</a>. As I understand she is relatively new to programming and I believe it would be interesting, especially here in Europe, to listen to what resources she had available to her and how she got going with programming. Maybe we can learn something over here.</p>
<p>We are trying to get to a place where we do not ask questions like "As a woman....", but the state of our community is that we severely lack women, and we need to understand what we are doing wrong. Like my old boss said, you need at least 30% women at the party because then the men behave.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Well, I guess I should encourage you to check out <a href="http://www.cerebraljs.com">Cerebral 2.0</a> which is closing in on release. It is a JS framework that goes head on with handling side effects and has a pretty excellent debugger.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Christian! I remember using WebpackBin on my early workshops and it was particularly great to see the recent upgrades made to the service. If you haven't tried it in a while, it's worth another look.</p>
<p>If you want to check out the source, see <a href="https://github.com/cerebral/webpackbin">webpackbin on GitHub</a>. The service itself isn't online anymore.</p>
SurviveJS Euro Tour 2017 Recapasurvivejseurotour2017recap2017-05-03t00:00:00z2017-05-03T00:00:00Z<p>In this post, I will go through the biggest realizations gained in my <a href="https://survivejs.com/blog/euro-tour-2017">Euro tour</a>. I know it's a cliché thing to say, but trips like this grow you as a person. Spending a month outside of your comfort zone leads to realizations you might not otherwise have.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#background" id="background"></a><span class="text">Background</span><a class="header-anchor-select" href="https://survivejs.com/#background">#</a></h2>
<p>It's not the easiest point of life for me as I'm struggling to find a sustainable direction. It's a similar crisis like the one <a href="https://survivejs.com/blog/the-story-so-far">I had early on</a> but on a different level. It's a crisis of identity. Having a business that runs is nice, but maybe there's more to life than that.</p>
<p>There's the never-ending battle of finding a good niche for your business while managing the personal side. These two go together, and some balance is needed. You cannot be an all business person and forget about the personal side. I guess in my case the business reflects my personality. No way to avoid that.</p>
<p>I saw the trip as an opportunity for a change of pace. The last few months were filled with <a href="https://survivejs.com/webpack">webpack book</a> related work, and I was fairly tired by the end of it. The trip itself came with responsibilities of its own, but at least it was something different.</p>
<p>I ended up giving twelve sessions around Europe within the span of a month. It sounds much, and it is. Interestingly enough I got used to the life of touring by the end and will miss it.</p>
<p>Monetarily the trip wasn't a great success, and I ended up making a solid loss, but despite this, I believe it was worth the investment. You cannot measure everything as money. It was the experience gained that was valuable for me, and it is possible I'll cover the losses regarding new opportunities.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Half of the trip was sponsored and arranged by <a href="https://reactiveconf.com/">Reactive Conf</a>. Thank you for your invaluable support. They also <a href="https://medium.com/@ReactiveConf/juho-veps%C3%A4l%C3%A4inen-webpack-gives-you-complete-control-over-your-app-88c148db18eb">interviewed me</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#presentations" id="presentations"></a><span class="text">Presentations</span><a class="header-anchor-select" href="https://survivejs.com/#presentations">#</a></h2>
<p>I prepared three presentations for the trip:</p>
<ul>
<li><a href="https://presentations.survivejs.com/re-imagining-webpack/">Re-imagining webpack</a> - 15-20 min short talk about my love story with webpack. How I found it, what I did with it, and where it's going.</li>
<li><a href="http://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From apprentice to journeyman</a> - First half of the book summarized.</li>
<li><a href="http://presentations.survivejs.com/webpack-from-journeyman-to-master/">Webpack - From journeyman to master</a> - Second half of the book summarized.</li>
</ul>
<p>Given I had already written a book and given <a href="http://presentations.survivejs.com/advanced-webpack/">an earlier presentation</a> about the topic earlier, my challenge was to convert all the information as slides. As it happens, this was hard to achieve.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#what-went-right" id="what-went-right"></a><span class="text">What Went Right</span><a class="header-anchor-select" href="https://survivejs.com/#what-went-right">#</a></h3>
<p>I considered my first week in Oslo as training. In addition to giving a public talk on the topic of "Re-imagining webpack", I managed to arrange a couple of free private sessions (one on one and a group session with a company). Doing this gave me a good chance to benchmark the content against people and improve the content.</p>
<p>I managed to find a speaker out of myself by the end of the tour. I enjoyed especially the Vienna session, and we had real interaction going on. I still made a few mistakes, but it was the most relaxed session for me and also the most enjoyable one. The irony is that once you find your pace, it all ends!</p>
<p>I think I made the right decision in splitting the main presentation into two halves. The first one took around 45 minutes while the latter was designed around 30 minutes. I implemented a ten-minute break in between the sections early on as otherwise, it's a little much to endure.</p>
<p>Another thing that went right was allowing questions within the presentations. I structured the parts of the presentations so that they map to the book and allowed questions after each. I think this is a good way as it gives you a lot of chances to interact with your audience and even clarify your thinking. Sometimes the same question comes by multiple times across different audiences, and you can improve your answer!</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#what-went-wrong" id="what-went-wrong"></a><span class="text">What Went Wrong</span><a class="header-anchor-select" href="https://survivejs.com/#what-went-wrong">#</a></h3>
<p>I made the mistake of including too much content on my early presentations. As presentations went by, I dropped more and more points while increasing focus. I did a special version of the "From journeyman to master" set for my last few presentations to keep it terse. It wasn't perfect but enough to give some idea of more advanced scenarios. The slides online contain more ideas than this special edition.</p>
<p>I got bitten by my native language. Finnish and English don't go well together, and that leads to problems with comprehension. By the end of the month, I had adapted to English quite well and even struggled a bit with Finnish by then. To resolve this fully, I would have to live abroad as otherwise, I won't get training. It looks like you have to choose between the two.</p>
<p>Without a fault of my own, there were technical difficulties along the way. I learned I struggle with traditional mics a lot. You have one hand less to code with and one more thing to worry about adding to the stress. There were also times when the mic just broke, and we had to replace it with another one a few times. I guess the lesson to learn is that if you are serious about touring, bring equipment you trust.</p>
<p>Another lesson to learn was that you should always have backup plans when it comes to the presentation itself. On one occasion the HDMI connection just wouldn't work, and I had to use someone else's Windows laptop. Even though challenging, it worked out somehow in the end even though I could not live code. It's good to make sure your presentation material is available online as you never know when you need a backup plan.</p>
<p>Sometimes issues beyond your control like these will affect you. Technical problems lead to rush and rush leads to poorer results. Maybe the lesson here is to keep your calm as there's not much you can do about technology above a certain point. Rushing will only make it worse. For this reason, it's a good idea to cut the amount of content you want to present as then there's slack in the schedule.</p>
<p>I was interested in having more free sessions in Berlin, but I probably didn't push that enough as there was no response to my initial tweet. But on the plus side, I had time to explore the city and its possibilities.</p>
<p><figure><img src="/c2635be554fcd60675286d5a0b7a1192.jpg" alt="Gnome" class="" width="" height="" /><figcaption>Gnome</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#trip" id="trip"></a><span class="text">Trip</span><a class="header-anchor-select" href="https://survivejs.com/#trip">#</a></h2>
<p>The trip itself was amazing. I spent time in a lot of cities and learn about different cultures. Being outside of your culture allows you to understand it better. I understood I've been taking things like clean air, water, sauna, solid internet connection, and honesty, for granted. It's not the same everywhere, and there are always trade-offs.</p>
<p>I also understood how expensive place Finland is. Only Norway was worse in this regard, and the other countries were cheaper, sometimes greatly so. A good example is a pasta dinner at Berlin which included appetizer, main course, dessert, and a drink for 7.5 euros. The comparable offering would cost between 20 and 30 euros in Finland while not matching the quality.</p>
<p><figure><img src="/c3df69a1075e284e757c81fa39a0bad6.jpg" alt="Oslo" class="" width="" height="" /><figcaption>Oslo</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#what-went-right" id="what-went-right"></a><span class="text">What Went Right</span><a class="header-anchor-select" href="https://survivejs.com/#what-went-right">#</a></h3>
<p>When you go abroad, you can forget certain axioms about yourself. Instead of being shy and reserved, as most Finns tend to be, I decided to be open to experiences. Sometimes this meant chatting a bit with another traveler or going to meetups. Doing both opened an entire world to me and gained experiences I would have missed otherwise. How else could you get a private underground tour in Berlin or get to see the quarries of Czech and end the day with a stunning dinner?</p>
<p>It seems to me that if you are open to experiences and willing to get out of your comfort zone a little, a lot of magical things can happen. The realization was perhaps the most mind altering of the trip for me. It's easier to build connections once you find a common interest let it be touring, hiking, or something else.</p>
<p>It's amazing how deep you can go in discussions when you find the right person. Maybe it's a form of therapy as you get to discuss topics you would otherwise skip in fear of losing face. I'm not the type of person that connects well so it was refreshing to see that I can do it given the right environment and courage.</p>
<p>I wasn't much of a subway person before this trip given my home town doesn't have one. This trip showed me how convenient it could be. I was particularly impressed by the systems of Oslo and Prague. Berlin worked too, but it felt complicated in comparison. The trick is to buy a day ticket or longer as this will save time and make your stay less stressful as you don't have to buy tickets all the time. It also gives you a degree of freedom.</p>
<p>Google Maps routing worked well in most cities. If you go to Vienna, you should install <strong>qando Wien</strong> as it works much better than Google's offering. To discover trekking routes, you should use <strong>mapy</strong> while in the Czech Republic.</p>
<p>Investing in good shoes before the trip ended up being one of the better decisions I've made. I bought an expensive pair of Mephistos by chance just to see if expensive shoes make a difference. Apparently, they do. I didn't have any significant problems with legs or feet despite walking roughly 200 km during the month. As a result, I'm in a better shape now and feel like running again as walking doesn't do the trick anymore. I also shed some winter weight while at it. Big win overall.</p>
<p>It was great to see nature in Czech and Austria. I can recommend groups like <a href="https://www.meetup.com/discoveringprague/">Discovering Prague</a> or <a href="https://www.meetup.com/Internationals-in-Wien/">Internationals in Wien</a> if you want to explore and meet new people. I'll miss their events for sure.</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/5DG3bxRT49U" frameborder="0" allowfullscreen></iframe>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#what-went-wrong" id="what-went-wrong"></a><span class="text">What Went Wrong</span><a class="header-anchor-select" href="https://survivejs.com/#what-went-wrong">#</a></h3>
<p>I made quite a phone bill at Norway by forgetting to disable data on my phone initially as modern phones are data hungry. On the plus side, I figured out the right way to deal with this problem while in Germany. I bought a prepaid SIM for 15 euros and used it solely for data. Even with 1 GB cap, it was enough for my purposes, and I bought another one in Austria.</p>
<p>If you travel in multiple countries, it is important to buy the right SIM. I think the cheaper one was constrained to Germany alone. The EU legislation will change and make this easier. I should be able to use my unlimited LTE connection without any extra costs <a href="https://ec.europa.eu/digital-single-market/en/roaming-tariffs">starting from June</a>.</p>
<p>I managed to lose my hat on a plane. I simply forgot to pick it up when leaving. Fortunately, this wasn't a great loss, and it gave me a good excuse to buy a nicer one. In short, anything that's not stored properly will likely get lost. I also had a little pocket issue with certain pants. Wear only pants with good pockets as otherwise, you are asking for trouble.</p>
<p>I should have spent more time researching restaurants and places to visit beforehand. Now I relied on tips by locals and intuition but perhaps doing work beforehand wouldn't be a bad idea. Sometimes you find the best places by exploring on your own, though.</p>
<p>It would have been a good idea to bring earplugs and a sleep mask to help with sleep quality. I did get sleep, but I could have done better in this department.</p>
<p><figure><img src="/6d1fb21d53f5c18aa728509e68b557a8.jpg" alt="Berlin" class="" width="" height="" /><figcaption>Berlin</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though not perfect, I think the trip was a personal success. I have a better idea on how to focus my energy and what to do next. Wheels are turning, and you may see me in more significant parts of Europe again sometime soon, but I'll announce the news separately with more details.</p>
Fluture - Fantasy Land compliant alternative to Promises - Interview with Aldwin Vlasblomafluturefantasylandcompliantalternativetopromisesinterviewwithaldwinvlasblom2017-05-02t00:00:00z2017-05-02T00:00:00Z<p>Dealing with the asynchronous code has always been a challenge in JavaScript. Callbacks are the classic way, and since then we've gained higher level abstractions and constructs for handling the problem.</p>
<p>This time around we'll discuss <a href="https://github.com/fluture-js/Fluture">Fluture</a>, a Fantasy Land specification compatible alternative to <code>Promises</code> by <a href="https://github.com/Avaq">Aldwin Vlasblom</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/e30745ae3be2e0792957c89d7460d57c?s=200" alt="Aldwin Vlasblom" class="author" width="100" height="100" />
</span>
I was born and raised in Rotterdam, the Netherlands. I got into programming at age eleven when I decided to make a website for my RuneScape clan and happened upon Macromedia Flash with ActionScript. At age fourteen I had made several small sites for family members and decided to do my internship at a digital agency.
</p>
<p>That's where I was introduced to PHP and realized I want to pursue an education in this area, which lead me to do a course in interactive media design and development.</p>
<p>During my second internship, I became responsible - and was later hired - to maintain the company's internal PHP framework. I loved making API's and abstractions for other developers and was fond of higher order functions.</p>
<p>It's, therefore, no surprise that I was drawn into the JavaScript functional programming world, and ended up creating an API which is based almost exclusively on higher order functions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-fluture-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-fluture-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Fluture</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-fluture-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>There are three approaches to introducing Fluture, depending on the background:</p>
<ul>
<li>To an inexperienced JavaScript programmer I might say that it's an abstraction which serves to reduce the complexity of dealing with JavaScripts asynchronous nature (also knows as callback-hell).</li>
<li>To an experienced JavaScript programmer I might say that it's like a Promise, but lazily evaluated, with cancellation, and with a more principled API which conforms to <a href="https://github.com/fantasyland/fantasy-land">Fantasy Land</a>.</li>
<li>To a functional programmer I might say that it's a Monad which encodes side-effects, delay, and possible failure.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-fluture-work-" id="how-does-fluture-work-"></a><span class="text">How does <em>Fluture</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-fluture-work-">#</a></h2>
<p>In it's simplest form, it's a function which takes a function and returns it wrapped in an object with the name "fork", perhaps best explained through code:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Future</span> <span class="token operator" >=</span> fork <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>fork<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >Future</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>rej<span class="token punctuation" >,</span> res<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >res</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >fork</span><span class="token punctuation brackets-parentheses" >(</span>
console<span class="token punctuation" >.</span>error<span class="token punctuation" >,</span> console<span class="token punctuation" >.</span>log
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// 1</span>
</code></pre>
<p>This structure becomes interesting once you add higher order functions like <code>map</code>:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Future</span> <span class="token operator" >=</span> fork <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
fork<span class="token punctuation" >,</span>
map<span class="token punctuation" >:</span> f <span class="token operator" >=></span> <span class="token function" >Future</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token punctuation brackets-parentheses" >(</span>reject<span class="token punctuation" >,</span> resolve<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >fork</span><span class="token punctuation brackets-parentheses" >(</span>
reject<span class="token punctuation" >,</span>
x <span class="token operator" >=></span> <span class="token function" >resolve</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >f</span><span class="token punctuation brackets-parentheses" >(</span>x<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >Future</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>reject<span class="token punctuation" >,</span> resolve<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >resolve</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>x <span class="token operator" >=></span> x <span class="token operator" >+</span> <span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >fork</span><span class="token punctuation brackets-parentheses" >(</span>console<span class="token punctuation" >.</span>error<span class="token punctuation" >,</span> console<span class="token punctuation" >.</span>log<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// 2</span>
</code></pre>
<p>The idea that you can <code>map</code> over a Future similarly to how one might <code>map</code> over an <code>Array</code> comes from the research into "algebraic data types" brought to JavaScript most prominently by <a href="https://github.com/fantasyland/fantasy-land">Fantasy Land</a>.</p>
<p>Fluture builds on top of these ideas to add:</p>
<ul>
<li>Full conformity to Fantasy Land Monad</li>
<li>Other utilities and transformations</li>
<li>Cancellation</li>
<li>Input type checking</li>
<li>And <a href="https://github.com/fluture-js/Fluture/milestone/5">soon</a>: Stack safety</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-fluture-differ-from-other-solutions-" id="how-does-fluture-differ-from-other-solutions-"></a><span class="text">How does <em>Fluture</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-fluture-differ-from-other-solutions-">#</a></h2>
<p>The description of Fluture states that it's <em>an alternative to Promises</em>, so it's only natural that people want to compare it. In my article <a href="https://github.com/fluture-js/Fluture/wiki/Comparison-to-Promises">comparing Futures to Promises</a> I write:</p>
<blockquote>
<p>On the surface Futures are just like Promises, but with the different behaviors of the <code>.then</code> method extracted into three distinct functions, each with a <em>single responsibility</em>.</p>
</blockquote>
<p>The <code>then</code> method of a Promise is massively overloaded: You can give it zero to two arguments, both are mixed types (<code>Nil</code> and <code>Function</code>). The return values of the functions are also overloaded: You can return any value, but returning something with a <code>then</code>-method has a particular meaning. Throwing an error also has special meaning.</p>
<p>Extracting all of these behaviors to separate functions makes it easier to abstract over, and clarifies developer intent, making it simpler to detect mistakes.</p>
<p>I've also written about the differences between Fluture and other libraries which have a similar structure, in my article <a href="https://github.com/fluture-js/Fluture/wiki/Comparison-of-Future-Implementations">comparing them</a>. I'll go into this when answering why I developed Fluture.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-fluture-" id="why-did-you-develop-fluture-"></a><span class="text">Why did you develop <em>Fluture</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-fluture-">#</a></h2>
<p>I got into functional programming some years ago when I discovered <a href="http://ramdajs.com/">Ramda</a>, and from there I became acquainted with <a href="https://github.com/fantasyland/fantasy-land">Fantasy Land</a>. The first algebraic type I decided to try was a Future. I tried <a href="https://github.com/folktale/data.task"><code>data.task</code></a> and <a href="https://github.com/ramda/ramda-fantasy">Ramda Fantasy</a>.</p>
<p>A little later I was teaching asynchronous functional programming to a small group of developers, and I found that one of the biggest sources of confusion were the bizarre and cryptic error messages one would get out of these Future libraries from making simple mistakes.</p>
<p>I had also accumulated a set of common utilities that I was using with Futures, so I decided to create a Future library which would ship with these utilities and provide understandable error messages. I made sure that the performance remained decent because I did not want people to have to choose between good performance and a pleasant development experience.</p>
<p>I later discovered <a href="https://sanctuary.js.org/">Sanctuary</a>, with which Fluture shares a lot of its design
philosophy. It became another important part of Fluture's design to integrate
with Sanctuary nicely.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about Sanctuary, <a href="https://survivejs.com/blog/sanctuary-interview">read the interview of David Chambers</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>A critique Fluture and other Futures have always received is that they are not stack safe, unlike Promises. Promises execute every action immediately in the next JavaScript tick giving them an inherent stack safety, because every operation waits until the stack is cleared before executing.</p>
<p>Some weeks ago, by combining ideas from Promises, Fluture, and Free Monads, I created a stack safe proof of concept Future which does not use the next-tick-trick. I'm currently working on porting the entire Fluture library to this new architecture. It's already feature complete - it just needs <a href="https://github.com/fluture-js/Fluture/milestone/5">some polishing</a> before being released under version <code>6.0</code> in the coming months.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-fluture-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-fluture-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Fluture</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-fluture-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Fluture has earned a place in my personal toolkit when it comes to classic request-response applications, like those you find in web-servers. In this context, I consider it the best solution to the <a href="https://github.com/plaid/async-problem">async problem</a> (and the promise problem) that I've used to date, and I don't think that will change soon.</p>
<p>As for other kinds of applications, like the ones you might find running in browsers, I think we are moving towards reactive. Streams are the perfect async abstraction in these environments.</p>
<p>Streams are like Futures, except that they can produce more than one value. For an excellent Stream library I recommend <a href="https://github.com/cujojs/most">most</a>. And for an interesting way to use it, and think about front-end applications, I would recommend learning about <a href="https://github.com/cyclejs/cyclejs">CycleJS</a>.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To learn more about CycleJS, <a href="https://survivejs.com/blog/cycle-interview">read the interview of André Staltz</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Avoid using object and variable mutation as a feature for the functionality of your code. You are shooting yourself in the foot. Mutation is a means to optimize code.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I admire the works of <a href="https://github.com/briancavalier">Brian Cavalier</a>, author of <a href="https://github.com/cujojs/most">most</a>, <a href="https://github.com/briancavalier/creed">creed</a>, and more.</p>
<p>I also think it may be good to interview <a href="https://github.com/safareli">Irakli Safareli</a>, he has been an invaluable contributor to both Sanctuary and Fluture, and he's been exploring the little-explored field of Free Monads with his project <a href="https://github.com/safareli/free">Free</a>.</p>
<p>Lastly, I would like to give a shout-out to <a href="https://github.com/rpominov">Roman Pominov</a> who helped me bring cancellation into Fluture. He authored <a href="https://github.com/rpominov/kefir">Kefir</a> - the first Reactive Stream library I got into, and <a href="https://github.com/rpominov/static-land">Static Land</a> - an adaptation of Fantasy Land which pushes the community forward.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I think a wildly under-appreciated feature of Monads is <em>Monad Transformers</em>, I've scratched the surface of what they are capable of in my project <a href="https://github.com/Avaq/momi">momi</a>, which implements the core ideas of <a href="https://expressjs.com/">Express</a> in only a few lines of code by combining two existing Monads. I would like to see their usage grow.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Aldwin! It is always amazing to see new solutions to old problems. Sometimes reframing the problem somehow can lead to alternatives.</p>
<p>Check out <a href="https://github.com/fluture-js/Fluture">Fluture GitHub page</a> to learn more about the project.</p>
CodeSandbox - Online React Playground - Interview with Ives van Hoorneacodesandboxonlinereactplaygroundinterviewwithivesvanhoorne2017-04-24t00:00:00z2017-04-24T00:00:00Z<p>Getting started with React can be daunting especially if you want to understand the entire setup. Solutions like <a href="https://www.npmjs.com/package/create-react-app">create-react-app</a> have hidden a lot of this complexity. But there's more to it.</p>
<p><a href="https://codesandbox.io/">CodeSandbox</a> by <a href="https://twitter.com/Ives13">Ives van Hoorne</a> pushes the problem online. Instead of setting up a React project each time you want to experiment, you can use his service instead. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://avatars1.githubusercontent.com/u/587016?v=3&s=460" alt="Ives van Hoorne" class="author" width="100" height="100" />
</span>
My name is Ives van Hoorne; I'm a Computer Science student at the <a href="https://www.utwente.nl/en/">University of Twente</a> and a part-time developer at <a href="https://catawiki.com">Catawiki</a>. I worked there full-time last year, at that time I was responsible for converting the website to React.
</p>
<p>Though I like all kinds of programming, I've been especially attracted to frontend the last few years, mostly because it's also a bit artistic. I get a lot of satisfaction from building user interfaces that people both find beautiful and easy to use.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-codesandbox-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-codesandbox-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>CodeSandbox</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-codesandbox-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://codesandbox.io">CodeSandbox</a> is an online editor for web development projects. It automates things like transpiling, bundling and dependency management for you so you can easily create a new project with a single click. The editor also has a live preview so you can see the results of your work while you type.</p>
<p>Sharing is very easy; you can just share the URL of your project or embed it in an iframe. Others can then fork it to edit the project to their liking. CodeSandbox currently has a focus on React projects, which means that it supports features like downloading to a <code>create-react-app</code> template.</p>
<p>This is an example of a project on CodeSandbox, it's the classic TodoMVC example in Redux:</p>
<iframe src="https://codesandbox.io/embed/voz37vLG5" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-codesandbox-work-" id="how-does-codesandbox-work-"></a><span class="text">How does <em>CodeSandbox</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-codesandbox-work-">#</a></h2>
<p>CodeSandbox at its core consists of two parts: the editor and the preview. The editor is the whole CodeSandbox application (file manager, code editor, dependency settings) and the preview is the result you see on the right. These two parts are very decoupled and only communicate using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><code>postMessage</code></a>. The preview is on a subdomain (<code>sandbox.codesandbox.io</code>) in an iframe to literally 'sandbox' the preview away from the main application.</p>
<p><figure><img src="/e01fe7a0efe82a8cacc40c2d562e1e3c.png" alt="Editor vs. preview" class="" width="" height="" /><figcaption>Editor vs. preview</figcaption></figure></p>
<p>The editor sends all its files, directories and dependencies to the preview; this either happens when the user changes something or when the application loads. The preview then takes all these files and processes each type using different loaders, which currently is either CSS, JavaScript, JSON, or HTML. These loaders can be very simple, the JSON loader, for example, is only a one-liner:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> module <span class="token operator" >=></span> JSON<span class="token punctuation" >.</span><span class="token function" >parse</span><span class="token punctuation brackets-parentheses" >(</span>module<span class="token punctuation" >.</span>code<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>The JavaScript loader is by far the most interesting since this loader also has to transpile, require and cache the result. It first transpiles the code using <code>babel</code>; then it evals the transpiled code with a stubbed <code>require</code> function.</p>
<p>This <code>require</code> function just takes a path, checks if this is an npm dependency or a file and handles it again with the loader for that extension. Every result is cached, so most of the time only the edited file is evalled again after a change.</p>
<p>The output of the loader goes through a <code>boilerplate</code>, this boilerplate is determined by the output. A boilerplate simply is a separate file that does something with the loader output, for example, the boilerplate for a returned React components is:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> React <span class="token keyword keyword-from" >from</span> <span class="token string" >'react'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> render <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-dom'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// domChanged is a boolean which specifies if the module</span>
<span class="token comment" spellcheck="true" >// has done something to the DOM while it was evaluated</span>
<span class="token keyword keyword-export" >export</span> <span class="token keyword keyword-default" >default</span> <span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span>evaluatedModule<span class="token punctuation" >,</span> domChanged<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token operator" >!</span>domChanged<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> node <span class="token operator" >=</span> document<span class="token punctuation" >.</span><span class="token function" >createElement</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'div'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
document<span class="token punctuation" >.</span>body<span class="token punctuation" >.</span><span class="token function" >appendChild</span><span class="token punctuation brackets-parentheses" >(</span>node<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span>
React<span class="token punctuation" >.</span><span class="token function" >createElement</span><span class="token punctuation brackets-parentheses" >(</span>evaluatedModule<span class="token punctuation" >.</span><span class="token keyword keyword-default" >default</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
node
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>This boilerplate renders the output of a React component to the DOM if it doesn't change the DOM at all.
I want to make it possible for others to build and share loaders/boilerplates as well, but this requires some thinking because we still want to support <code>create-react-app</code> interoperability.</p>
<p>The npm dependencies are handled by a separate server; I call it the 'bundler'. The editor sends the list of dependencies to it, the bundler then creates a UMD build of this combination using webpack 2 and sends an object containing the URL and the manifest back.</p>
<p>A manifest is an object with a mapping from dependency name to module number, so the JavaScript loader knows which module to load from the UMD build when a dependency is required.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-codesandbox-differ-from-other-solutions-" id="how-does-codesandbox-differ-from-other-solutions-"></a><span class="text">How does <em>CodeSandbox</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-codesandbox-differ-from-other-solutions-">#</a></h2>
<p>CodeSandbox is one of the few editors that supports npm dependencies and multiple files/directories. It also handles almost everything in the browser, which allows us to show real-time feedback without any server communication.</p>
<p>That is a feature-wise difference, but I think the real difference compared to other editors is the goal. We want to make it possible to let others import your sandbox as a dependency. This way you can't only edit others work, you can use it in your projects. The feature hasn't been fully implemented yet; I still need to finish the UI for it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-codesandbox-" id="why-did-you-develop-codesandbox-"></a><span class="text">Why did you develop <em>CodeSandbox</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-codesandbox-">#</a></h2>
<p>I started to think about CodeSandbox last summer when I was on holiday in St. Ives. Several colleagues asked me questions about the React project we've been working on, but there was no easy way for me to answer them. The questions were either related to a library or were so complex that it was very hard to show in, for example, Codepen.</p>
<p>That's when I started thinking: 'man, it would be great just to have an online editor that could do this'. I began working on this in my spare time and eventually, my friend Bas Buursma joined me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm currently working on more support for users and sharing. Specifically, I'm building the profile view right now; here you can showcase your sandboxes and see statistics like how many times your sandboxes were forked and how many views you got.</p>
<p>It also includes a very requested feature: deleting sandboxes. Deleting is currently impossible and also very irritating, I have 38 sandboxes right now, and I would love to delete the junk ones.</p>
<p>This is the current design for the new profile view:</p>
<p><figure><img src="/3a234440a681723f1bc35004d3516216.png" alt="Profile view design" class="" width="" height="" /><figcaption>Profile view design</figcaption></figure></p>
<p>After we have better support for searching and sharing sandboxes within CodeSandbox, I can work on 'import as library'. I'm excited about that feature and would love to build it sooner; it's just that I first need to build the foundation for it.</p>
<p>I'm also exploring ways to use your editor for building things on CodeSandbox; I'm looking at things like setting CodeSandbox as git remote/Github integration or making it possible to sync local files. Syncing is still very vague and unexplored though, so nothing is sure on this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-codesandbox-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-codesandbox-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>CodeSandbox</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-codesandbox-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>In this dynamic world, it's very hard to speculate on what direction we're going. I think that React and other web application frameworks, like Vue, will gain a lot more mainstream adoption this year.</p>
<p>I've seen a big increase of interest in Vue and many companies are moving to React lately. The interest automatically means that more people will go to CodeSandbox, either to learn, try something out or to build an example for asking a question.</p>
<p>My big question is if people will use CodeSandbox to build projects on, either to share or to start something serious. So to summarize it: I think web frameworks, and as a result CodeSandbox will grow a lot, the big question for CodeSandbox is what direction this will be.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Try not to get overwhelmed! That's easier said than done, so if you do get overwhelmed by a task, it's smart to divide it into smaller, more manageable sub-tasks. Take it step by step.</p>
<p>I also recommend learning by just starting a personal project. Building something that you like and can share is a great motivation, and that motivation helps to overcome so many hurdles along the way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Christian Alfoni, the creator of WebpackBin (now defunct) and <a href="https://cerebraljs.com/">Cerebral</a>. It has been a blast working with him. He is close to releasing a new version of a state controller called Cerebral.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> I <a href="https://survivejs.com/blog/cerebral-interview">interviewed Christian earlier about Cerebral</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I learned React via SurviveJS! Great book and helped me a lot with understanding React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Ives! It's nice to see services like this to appear as they take so much pain out of the process and enable quick experimentation. Maybe one day web development goes to the web entirely.</p>
<p>Be sure to give <a href="https://codesandbox.io/">CodeSandbox</a> a go.</p>
Scrimba - Interactive Screencasts Created in an Instant - Interview with Per Harald Borgenascrimbainteractivescreencastscreatedinaninstantinterviewwithperharaldborgen2017-04-17t00:00:00z2017-04-17T00:00:00Z<p>YouTube and the web are filled with screencasts. They provide a great way to learn difficult concepts as you can see in practice how something specific is done. This is the way I learned to use Blender, a 3D suite, in the past. It all made sense after I saw how to use the application.</p>
<p>When it comes to coding, the challenge is that you have to literally type it all out yourself if you want to replicate the results. Scrimba has developed a solution that could change all this. <a href="https://twitter.com/perborgen">Per Harald Borgen</a> can tell more about it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://s.gravatar.com/avatar/da24dd3ef4d4c2cde869bde781369d99?s=200" alt="Per Harald Borgen" class="author" width="100" height="100" />
</span>
I'm Per, CEO and co-founder of <a href="https://scrimba.com/">Scrimba</a>. We're an Oslo-based startup consisting of three co-founders: <a href="https://github.com/somebee">Sindre</a>, <a href="https://twitter.com/judofyr">Magnus</a> and <a href="https://twitter.com/perborgen">me</a>.
</p>
<p>Our goal is to make online learning better than in-person learning, starting with programming. At the core of this is Scrimba - an interactive video format for explaining and understanding code.</p>
<p>I myself became a professional developer in 2015, a process I've written extensively about on <a href="https://medium.com/@perborgen">my blog</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-scrimba-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-scrimba-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Scrimba</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-scrimba-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Scrimba is an interactive video format for communicating code. It makes the experience significantly better for both the creator and the viewer. The easiest way to understand Scrimba is to watch <a href="https://scrimba.com/casts/cast-279">the 1 minute screencast below</a>:</p>
<iframe src="https://scrimba.com/cast/cast-279.embed" width="100%" height="300px"></iframe>
<p>As a viewer, you can pause and edit the code at any given time. So if you're struggling to understand something, just hit pause, jump into the environment and play around with the code until you understand it properly.</p>
<p>Scrimba also makes the creation experience much less frustrating, as we remove all the hassle involved with creating coding screencasts. No more <em>setup</em>, <em>edit</em>, <em>encode</em>, <em>upload</em> and <em>re-encode</em>. Just code while you talk and then publish it instantly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-scrimba-work-" id="how-does-scrimba-work-"></a><span class="text">How does <em>Scrimba</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-scrimba-work-">#</a></h2>
<p>We record the underlying events instead of pixels. When replaying a Scrimba screencast, we recreate exactly what the creator did.</p>
<p>This opens up a whole new world of possibilities for interactivity, creation, responsiveness, search, and recommendations. We've only begun scratching the surface of what we can do with this format.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-scrimba-differ-from-other-solutions-" id="how-does-scrimba-differ-from-other-solutions-"></a><span class="text">How does <em>Scrimba</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-scrimba-differ-from-other-solutions-">#</a></h2>
<p>Compared to traditional video, Scrimba has the following benefits:</p>
<ul>
<li>Much easier to create</li>
<li>Interactive (viewer can pause and edit code)</li>
<li>1% file size of video</li>
<li>Better mobile experience (because of responsiveness)</li>
<li>Indexable/searchable</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-scrimba-" id="why-did-you-develop-scrimba-"></a><span class="text">Why did you develop <em>Scrimba</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-scrimba-">#</a></h2>
<p>Scrimba was invented because Sindre needed to document his programming language <a href="http://imba.io/home">Imba</a>.</p>
<p>He first tried creating traditional video tutorials, but became increasingly frustrated with the creation process. What would have taken him two minutes to explain in-person often took him an hour to convey through video. So he began building Scrimba as a tool for people to learn Imba. However, it soon became clear that this could be used for much more than just Imba.</p>
<p>Just think about it: if you want to explain code online today, you're stuck with either text or video, both of which are cumbersome compared to explaining in-person.</p>
<p>What if you could combine the easiness and quality of in-person teaching with the global scale of the web?</p>
<p>That's what we want to do with Scrimba!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next" id="what-next"></a><span class="text">What next</span><a class="header-anchor-select" href="https://survivejs.com/#what-next">#</a></h2>
<p>We're going to continue to lower the threshold for people to create content, so expect it to become even easier to create Scrimba screencasts.</p>
<p>We're also working on building a community around <a href="https://scrimba.com/">Scrimba.com</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-scrimba-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-scrimba-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Scrimba</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-scrimba-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think the amount of developers (not just web) in the world will continue to grow, as software is <em>still</em> eating the world. Also, the skill of coding will be more mainstream, as more and more kids are exposed to it at school.</p>
<p>At Scrimba, we want to be a part of this by empowering anyone to easily tech code to others.
We aim to become <em>the</em> best place online to teach and learn technical subjects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Getting into web development - and JavaScript in particular - can seem intimidating, given all the hot new tools/frameworks/libraries you seemingly need to learn. I'd say don't worry too much about that in the beginning, and rather focus on the essentials. Once you know the essentials, you can learn any tool you want.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Keith Horwood of <a href="https://stdlib.com/">Stdlib</a>. He's basically creating the standard library for the internet, which is really awesome. The easiest way to create, distribute and discover web services.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thanks for interviewing us, and keep up the great work!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Per Harald. Scrimba looks cool to me and there's a fair amount of screencasts at <a href="https://scrimba.com/">Scrimba site</a> already!</p>
SurviveJS - Webpack - v2.0 - Results and Errataasurvivejswebpackv20resultsanderrata2017-04-12t00:00:00z2017-04-12T00:00:00Z<p>Enough time has passed since <a href="https://survivejs.com/survivejs-webpack-20">the major release of the webpack book</a> so it's a good time to evaluate how well it went. As no release is perfect, I've been pushing smaller patches to the content and I cover the fixes later in this post. The fixes are minor but they were still worth doing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#results" id="results"></a><span class="text">Results</span><a class="header-anchor-select" href="https://survivejs.com/#results">#</a></h2>
<p><a href="https://www.amazon.com/dp/9526868803">The paperback</a> has sold roughly twenty copies in two weeks. <a href="https://www.amazon.com/SurviveJS-Webpack-apprentice-Juho-Veps%C3%A4l%C3%A4inen-ebook/dp/B06XWZZGBS">The Kindle edition</a> is close to thirty and the higher quality and more expensive <a href="https://survivejs.typeform.com/to/LUQK0T">hard cover edition</a> has close to ten interested buyers which just might be enough for me to do a little print but we'll see.</p>
<p>In addition, the <a href="https://leanpub.com/survivejs-webpack">Leanpub edition</a> reached two thousand readers but it's good to remember half of those received the book for free when I split up my first book.</p>
<p>Based on these results it's safe to say the release wasn't a great financial success. I'm particularly happy that I found a good writing model, though. Especially the last few months were great as significant progress was made and this bodes well for the future.</p>
<p>The book is stronger in many ways than the initial "Webpack and React" one and I have a solid writing process in place now. I know what kind of books to write from now on.</p>
<p>There's still a lot of work to do, some related to the webpack book. Even with poor sales it's worth doing as it adds more streams to the whole. As they say, a lot of small streams form a big river.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#errata" id="errata"></a><span class="text">Errata</span><a class="header-anchor-select" href="https://survivejs.com/#errata">#</a></h2>
<p>I've listed errata per version below so you can see the main changes. You can see them all through <a href="https://github.com/survivejs/webpack-book/compare/v2.0.1...v2.0.7">GitHub compare changes view</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-2" id="2-0-2"></a><span class="text">2.0.2</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-2">#</a></h2>
<ul>
<li>Renamed <em>Splitting Bundles</em> chapter as <a href="https://survivejs.com/webpack/building/bundle-splitting/">Bundle Splitting</a> to be consistent.</li>
<li>Linked to <a href="http://jspm.io/">JSPM</a> in the comparison appendix.</li>
<li>Added missing <code>const webpack = require('webpack');</code> to the <a href="https://survivejs.com/webpack/building/bundle-splitting/">Bundle Splitting</a> chapter example.</li>
<li>Improved wording related to disabling package consumption related warnings.</li>
<li>Noted that generating a single bundle over many is more performant as discussed in <a href="https://github.com/webpack-contrib/karma-webpack/issues/23">karma-webpack issue 23</a>.</li>
<li>Made Istanbul exclude test files from coverage results.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-3" id="2-0-3"></a><span class="text">2.0.3</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-3">#</a></h2>
<ul>
<li>Added missing file names to the i18n chapter.</li>
<li>Clarified i18n chapter ESLint configuration.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-4" id="2-0-4"></a><span class="text">2.0.4</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-4">#</a></h2>
<ul>
<li>Changed entry name from <code>demo</code> to <code>lib</code> at the <em>Bundling Libraries</em> chapter.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-5" id="2-0-5"></a><span class="text">2.0.5</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-5">#</a></h2>
<ul>
<li>Simplified <code>import</code>s at the <a href="https://survivejs.com/webpack/extending/loaders/">Extending with Loaders</a> chapter to avoid a linting warning.</li>
<li>Noted that PhantomJS doesn't support ES6 features yet so it requires preprocessing in order to work.</li>
<li>Added missing <code>path</code> import to Karma configuration example.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-6" id="2-0-6"></a><span class="text">2.0.6</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-6">#</a></h2>
<ul>
<li>Mentioned that HMR setup needs to be done before implementing <em>Hot Module Replacement with React</em> at the appendix.</li>
<li>Cleared up webpack process image a bit so you can see entry can be something complex.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-7" id="2-0-7"></a><span class="text">2.0.7</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-7">#</a></h2>
<ul>
<li>Simplified <a href="https://survivejs.com/webpack/appendices/searching-with-react/">Searching with React</a> appendix example so that it works with HMR out of the box. The old example used binding method that doesn't work well with <em>react-hot-loader</em>.</li>
<li>Fixed a typo at the <a href="https://survivejs.com/webpack/optimizing/minifying/">Minifying</a> chapter - <code>that</code> → <code>than</code>.</li>
<li>Made sure <code>recordsPath</code> receives an absolute path as webpack enforces this now.</li>
<li>Mentioned that PurifyCSS doesn't work with CSS Modules yet.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-8" id="2-0-8"></a><span class="text">2.0.8</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-8">#</a></h2>
<ul>
<li>Fixed a typo at the <a href="https://survivejs.com/webpack/appendices/glossary/">Glossary</a>. <code>an a</code> → <code>a</code>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-9" id="2-0-9"></a><span class="text">2.0.9</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-9">#</a></h2>
<ul>
<li>Recommended <code>cheap-module-source-map</code> over <code>cheap-module-eval-source-map</code> since it's a more stable option.</li>
<li>Included naming to <code>import()</code> syntax given that's supported now.</li>
<li>Dropped <code>devServer.open: true</code> bit as redundant.</li>
<li>Noted that CSS Modules work with purify if you use a whitelist.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-10" id="2-0-10"></a><span class="text">2.0.10</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-10">#</a></h2>
<ul>
<li>Pushed <code>CommonsChunkPlugin</code> to production configuration to speed up the build.</li>
<li>Dropped <code>useSourceMap</code> flag from <code>parts.minifyJavaScript</code>.</li>
<li>Added missing <code>const webpack = require('webpack');</code> to <code>HashedModuleIdsPlugin</code> example.</li>
<li>Made CSSNext example use <code>require('postcss-cssnext')(),</code>.</li>
<li>Made autoprefixer example compatible with the newest version. It needs <code>require('autoprefixer')()</code> over <code>require('autoprefixer')</code> now.</li>
<li>Simplified stylelint configuration by dropping <code>ignoreFiles</code> since webpack <code>include</code> is used already.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-11" id="2-0-11"></a><span class="text">2.0.11</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-11">#</a></h2>
<ul>
<li>Add missing <strong>.babelrc</strong> to a filename in the Loading JavaScript chapter.</li>
<li>Added <code>purify-css</code> as a dependency to install as <code>purifycss-webpack</code> requires that now as a peer dependency.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-12" id="2-0-12"></a><span class="text">2.0.12</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-12">#</a></h2>
<ul>
<li>Linked to <a href="https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31">Predictable long term caching with Webpack</a>.</li>
<li>Toned down <strong>records</strong> statement.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-13" id="2-0-13"></a><span class="text">2.0.13</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-13">#</a></h2>
<ul>
<li>Fixed the book to use <code>cheap-module-eval-source-map</code> over <code>cheap-module-source-map</code> for development.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-14" id="2-0-14"></a><span class="text">2.0.14</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-14">#</a></h2>
<ul>
<li>Changed <strong>browserslist</strong> to <strong>.browserslistrc</strong> as the project has changed the file name.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-15" id="2-0-15"></a><span class="text">2.0.15</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-15">#</a></h2>
<ul>
<li>Added missing <code>const path = require('path');</code> to <strong>Extending Loaders</strong> chapter.</li>
<li>Added missing formatting to <code>const { RawSource } = require('webpack-sources');</code> at <strong>Extending Loaders</strong> chapter.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-16" id="2-0-16"></a><span class="text">2.0.16</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-16">#</a></h2>
<ul>
<li>Changed <code>PATHS.app</code> to <code>PATHS.lib</code> at the <strong>Bundling Libraries</strong> chapter.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-17" id="2-0-17"></a><span class="text">2.0.17</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-17">#</a></h2>
<ul>
<li>Simplified a <code>devtool</code> related paragraph to pass Amazon margin check.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#2-0-18" id="2-0-18"></a><span class="text">2.0.18</span><a class="header-anchor-select" href="https://survivejs.com/#2-0-18">#</a></h2>
<ul>
<li>Getting Started - Use <code>import</code> over <code>require</code> at text.</li>
<li>Composing Configuration - Fix sentence structure at "Composition-based approach..."</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>There's still a <a href="https://survivejs.com/euro-tour-2017">lot of touring</a> to be done so things will move slower than usual. That said, I'll try to get most out of this experience and convert that into something good. Traveling is good for ideas.</p>
Sanctuary - Refuge from unsafe JavaScript - Interview with David Chambersasanctuaryrefugefromunsafejavascriptinterviewwithdavidchambers2017-04-10t00:00:00z2017-04-10T00:00:00Z<p>If there's something that's easy, it's making mistakes while coding JavaScript. Overlook one detail and you have a runtime error! One way to deal with the problem is to use a programming style which leads code that's harder to break and also easier to test.</p>
<p><a href="https://twitter.com/davidchambers">David Chambers</a> has been developing <a href="https://www.npmjs.com/package/sanctuary">sanctuary</a>, a <em>functional programming</em> library these goals in mind.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/5f41fa18e9774f1a2ea7c519f476c348?s=200" alt="David Chambers" class="author" width="100" height="100" />
</span>
I grew up in New Zealand. I studied graphic design at University and worked briefly as a graphic designer after graduating. I found myself in a cycle of procrastination, guilt, self-doubt, and euphoria. I loved my job a small proportion of the time.
</p>
<p>I became interested in web design and discovered that I enjoyed writing HTML, CSS, and JavaScript. This work was also creative, but I found the emotional ups and downs much less extreme. In recent years my interests have shifted towards programming, specifically functional programming.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-sanctuary-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-sanctuary-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Sanctuary</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-sanctuary-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>The <a href="https://sanctuary.js.org/#overview">project's overview</a> puts it the best:</p>
<blockquote>
<p>Sanctuary is a JavaScript functional programming library inspired by Haskell and PureScript. It's stricter than <a href="https://www.npmjs.com/package/ramda">Ramda</a> and provides a similar suite of functions.</p>
<p>Sanctuary promotes programs composed of simple, pure functions. Such programs are easier to comprehend, test, and maintain – they are also a pleasure to write.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-sanctuary-work-" id="how-does-sanctuary-work-"></a><span class="text">How does <em>Sanctuary</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-sanctuary-work-">#</a></h2>
<p>Sanctuary is designed to take full advantage of the <a href="https://github.com/fantasyland/fantasy-land">Fantasy Land</a> specification. Fantasy Land defines some methods, each with accompanying laws.</p>
<blockquote>
<p>The inclusion of laws makes Fantasy Land significantly different in nature from Promises/A+. Fantasy Land is a set of well-understood concepts with Wikipedia entries rather than an ad hoc list of requirement for implementors.</p>
</blockquote>
<p>Sanctuary provides functions for operating on built-in types:</p>
<pre><code class="lang-javascript"><span class="token operator" >></span> S<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>s <span class="token operator" >=></span> s<span class="token punctuation" >.</span>length<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token string" >'foo'</span><span class="token punctuation" >,</span> <span class="token string" >'bar'</span><span class="token punctuation" >,</span> <span class="token string" >'baz'</span><span class="token punctuation" >,</span> <span class="token string" >'quux'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-square" >[</span><span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >4</span><span class="token punctuation brackets-square" >]</span>
</code></pre>
<p>The neat thing is that <a href="https://sanctuary.js.org/#map"><code>S.map</code></a> is not defined only for arrays. We can
enter a function's name into the REPL to see the function's type signature:</p>
<pre><code class="lang-javascript"><span class="token operator" >></span> S<span class="token punctuation" >.</span>map
map <span class="token punctuation" >:</span><span class="token punctuation" >:</span> Functor f <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>a <span class="token operator" >-</span><span class="token operator" >></span> b<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-</span><span class="token operator" >></span> f a <span class="token operator" >-</span><span class="token operator" >></span> f b
</code></pre>
<p>Don't be put off by this notation. It'll be very helpful once we've learned to read it. Let's do so.</p>
<p>We'll start with <code>::</code>. The markup can be read as <em>is a member of</em>. For example, <code>true :: Boolean</code> can be read <em><code>true</code> is a member of <code>Boolean</code></em>.</p>
<p>How do we represent the types of functions? Let's consider <a href="https://sanctuary.js.org/#toUpper"><code>S.toUpper</code></a> which takes a string and returns its upper-case equivalent. We would write <code>S.toUpper :: String -> String</code>.</p>
<p>What is the type of <code>x => x</code>, the identity function? <code>String -> String</code> is too restrictive, as the identity function can operate on a value of any type. We write it like so:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// id :: a -> a</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >id</span> <span class="token operator" >=</span> x <span class="token operator" >=></span> x<span class="token punctuation" >;</span>
</code></pre>
<p><code>a</code> is a type variable. We can replace it with any type we choose, but we must replace every occurrence of <code>a</code> in a type signature with the same type.</p>
<p>Before we consider the <code>Functor f =></code> bit, let's consider a similar function which operates exclusively on arrays:</p>
<pre><code class="lang-haskell"><span class="token hvariable" >arrayMap</span> <span class="token operator" >::</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token hvariable" >a</span> <span class="token operator" >-></span> <span class="token hvariable" >b</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token hvariable" >a</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token hvariable" >b</span>
</code></pre>
<p>So, <code>arrayMap</code> takes as its argument a value of type <code>(a -> b)</code>, a function from <code>a</code> to <code>b</code>. It returns a value of type <code>Array a -> Array b</code>. We would use it like so:</p>
<pre><code class="lang-javascript"><span class="token operator" >></span> <span class="token function" >arrayMap</span><span class="token punctuation brackets-parentheses" >(</span>s <span class="token operator" >=></span> s<span class="token punctuation" >.</span>length<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token string" >'foo'</span><span class="token punctuation" >,</span> <span class="token string" >'bar'</span><span class="token punctuation" >,</span> <span class="token string" >'baz'</span><span class="token punctuation" >,</span> <span class="token string" >'quux'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-square" >[</span><span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token number" >4</span><span class="token punctuation brackets-square" >]</span>
</code></pre>
<p>Arrays are just one of <em>many</em> structures we may wish to map over. It would be unfortunate to have to define <code>arrayMap</code>, <code>listMap</code>, <code>futureMap</code>, <code>maybeMap</code>, <code>eitherMap</code>, <code>streamMap</code>, etc. Although necessary for some languages, it is not so in
JavaScript, as we can dispatch to a method with a particular name.</p>
<p>The method name, in this case, is <code>fantasy-land/map</code>. We wish to express that <code>S.map</code> can operate on a value of any type which provides a <code>fantasy-land/map</code> method. <code>Functor f =></code> is a constraint on the type variable <code>f</code>. It states that <code>f</code> can be replaced with any type which provides <code>fantasy-land/map</code>.</p>
<p>Let's <em>specialize</em> the type of <code>S.map</code> in the expression
<code>S.map(s => s.length)(['foo', 'bar', 'baz', 'quux'])</code>. Here's the general type again:</p>
<pre><code class="lang-haskell"><span class="token constant" >S</span><span class="token punctuation" >.</span><span class="token builtin" >map</span> <span class="token operator" >::</span> <span class="token constant" >Functor</span> <span class="token hvariable" >f</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token hvariable" >a</span> <span class="token operator" >-></span> <span class="token hvariable" >b</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-></span> <span class="token hvariable" >f</span> <span class="token hvariable" >a</span> <span class="token operator" >-></span> <span class="token hvariable" >f</span> <span class="token hvariable" >b</span>
</code></pre>
<p><code>f</code> is <code>Array</code>, in this case:</p>
<pre><code class="lang-haskell"><span class="token constant" >S</span><span class="token punctuation" >.</span><span class="token builtin" >map</span> <span class="token operator" >::</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token hvariable" >a</span> <span class="token operator" >-></span> <span class="token hvariable" >b</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token hvariable" >a</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token hvariable" >b</span>
</code></pre>
<p><code>a</code> is <code>String</code>, as we're operating on an array of strings:</p>
<pre><code class="lang-haskell"><span class="token constant" >S</span><span class="token punctuation" >.</span><span class="token builtin" >map</span> <span class="token operator" >::</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token constant" >String</span> <span class="token operator" >-></span> <span class="token hvariable" >b</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token constant" >String</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token hvariable" >b</span>
</code></pre>
<p><code>b</code> is <code>Number</code>, since the provided function returns the length of its string argument:</p>
<pre><code class="lang-haskell"><span class="token constant" >S</span><span class="token punctuation" >.</span><span class="token builtin" >map</span> <span class="token operator" >::</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token constant" >String</span> <span class="token operator" >-></span> <span class="token constant" >Number</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token constant" >String</span> <span class="token operator" >-></span> <span class="token constant" >Array</span> <span class="token constant" >Number</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-sanctuary-differ-from-other-solutions-" id="how-does-sanctuary-differ-from-other-solutions-"></a><span class="text">How does <em>Sanctuary</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-sanctuary-differ-from-other-solutions-">#</a></h2>
<p>Sanctuary is most similar to Ramda. In <a href="https://github.com/sanctuary-js/sanctuary/issues/377">sanctuary-js/sanctuary#377</a>
we're currently documenting the differences between Ramda and Sanctuary.</p>
<p>The most striking difference is the handling of invalid inputs. When applied to arguments of the correct types, <code>R.append</code> and <code>S.append</code> are equivalent:</p>
<pre><code class="lang-javascript">R<span class="token punctuation" >.</span><span class="token function" >append</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// => [1, 2, 3]</span>
S<span class="token punctuation" >.</span><span class="token function" >append</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >3</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// => [1, 2, 3]</span>
</code></pre>
<p>But what happens if we get the arguments in the wrong order?</p>
<pre><code class="lang-javascript">R<span class="token punctuation" >.</span><span class="token function" >append</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// => [[1, 2]]</span>
</code></pre>
<p><code>R.append</code> somehow coerces <code>3</code> into <code>[]</code> and "succeeds". We expected the result to be of type <code>Array Number</code>, but it's actually of type <code>Array (Array Number)</code>. This will likely result in an error being thrown, possibly several steps from the source of the type error.</p>
<p><code>S.append</code>, on the other hand, throws a type error with a descriptive message:</p>
<pre><code class="lang-javascript">S<span class="token punctuation" >.</span><span class="token function" >append</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// ! TypeError: Invalid value</span>
<span class="token comment" spellcheck="true" >//</span>
<span class="token comment" spellcheck="true" >// append :: a -> Array a -> Array a</span>
<span class="token comment" spellcheck="true" >// ^^^^^^^</span>
<span class="token comment" spellcheck="true" >// 1</span>
<span class="token comment" spellcheck="true" >//</span>
<span class="token comment" spellcheck="true" >// 1) 3 :: Number, FiniteNumber, NonZeroFiniteNumber, Integer, ValidNumber</span>
<span class="token comment" spellcheck="true" >//</span>
<span class="token comment" spellcheck="true" >// The value at position 1 is not a member of ‘Array a’.</span>
<span class="token comment" spellcheck="true" >//</span>
<span class="token comment" spellcheck="true" >// See https://github.com/sanctuary-js/sanctuary-def/tree/v0.9.0#Array for information about the Array type.</span>
</code></pre>
<p>Run-time type checking isn't free, so one can disable it if desired.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-sanctuary-" id="why-did-you-develop-sanctuary-"></a><span class="text">Why did you develop <em>Sanctuary</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-sanctuary-">#</a></h2>
<p>I was a significant contributor to Ramda at the time, but I was unhappy with the fact that a certain Ramda function was not composable (and remains so). To use <a href="http://ramdajs.com/docs/#head"><code>R.head</code></a> safely one must first check that the array is non-empty:</p>
<pre><code class="lang-javascript">R<span class="token punctuation" >.</span><span class="token function" >isEmpty</span><span class="token punctuation brackets-parentheses" >(</span>xs<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >?</span> <span class="token comment" spellcheck="true" >/* some default value */</span> <span class="token punctuation" >:</span> <span class="token function" >f</span><span class="token punctuation brackets-parentheses" >(</span>R<span class="token punctuation" >.</span><span class="token function" >head</span><span class="token punctuation brackets-parentheses" >(</span>xs<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>I wanted to be able to write this instead:</p>
<pre><code class="lang-javascript">R<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>f<span class="token punctuation" >,</span> R<span class="token punctuation" >.</span><span class="token function" >head</span><span class="token punctuation brackets-parentheses" >(</span>xs<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>We decided not to pursue this approach in <a href="https://github.com/ramda/ramda/issues/683">ramda/ramda#683</a>. I created Sanctuary so I could use safe versions of the Ramda functions I found troubling alongside the many Ramda functions I was happy to use.</p>
<p>Over the past two years, Sanctuary has grown to the point that it no longer makes sense to use Ramda and Sanctuary together, as there's so much overlap in the functionality they provide.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p><a href="https://github.com/sanctuary-js/sanctuary/issues/332">Sanctuary v0.12.0</a> was a big release representing about eight months' work. From this point forward we hope to make smaller, more frequent releases.</p>
<p>The significant changes currently in the works are <a href="https://github.com/sanctuary-js/sanctuary-maybe/pull/3">sanctuary-js/sanctuary-maybe#3</a> and <a href="https://github.com/sanctuary-js/sanctuary-either/pull/3">sanctuary-js/sanctuary-either#3</a>, which will make Sanctuary's <code>Maybe</code> and <code>Either</code> type available as stand-alone packages.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-sanctuary-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-sanctuary-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Sanctuary</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-sanctuary-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>My hope is that the JavaScript community's current enthusiasm for functional programming is part of a long-term trend rather than a fad. I predict the Sanctuary community will continue to grow as more people come to appreciate the benefits of building software on principled foundations.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Learn <a href="http://elm-lang.org/">Elm</a>. Treating user actions as values which can be passed as arguments to functions is a truly wonderful idea! Whether one continues to write Elm, or switches to JavaScript or PureScript, the approach will remain valid.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/Avaq">Aldwin Vlasblom</a>, the creator of <a href="https://github.com/fluture-js/Fluture">Fluture</a>. I respect him as a programmer
and as a person. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>If you decide to start using type signatures to document your functions you may be interested in <a href="https://www.npmjs.com/package/transcribe">Transcribe</a>. The tool used to generate the readme files for the various Sanctuary projects.</p>
<p>Each type signature in the source code is turned into a heading in the readme which links back to the type signature in the source code, so it's easy to jump to an implementation when reading the documentation. Transcribe supports arbitrary GitHub Flavored
Markdown.</p>
<p>One other project I'd like to plug is <a href="https://www.npmjs.com/package/xyz">xyz</a>. If you've ever forgotten a step when publishing an npm package, you should give xyz a look.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview David! It's cool to see functional solutions get more attention from the community. I see it as a great technique and enjoy spending time composing.</p>
<p>You can learn more about sanctuary at <a href="https://sanctuary.js.org/">Sanctuary site</a> and <a href="https://github.com/sanctuary-js/sanctuary">GitHub project page</a>.</p>
Rambda - Faster and Smaller Alternative to Ramda - Interview with Dejan Toteffarambdafasterandsmalleralternativetoramdainterviewwithdejantoteff2017-04-03t00:00:00z2017-04-03T00:00:00Z<p>Even though you can get far with JavaScript's native functionality, eventually you'll find yourself writing little utilities to make it easier. For this reason, we have libraries such as <a href="https://www.npmjs.com/package/lodash">Lodash</a>, <a href="https://www.npmjs.com/package/ramda">Ramda</a>, and others.</p>
<p>In this interview, you'll learn about <a href="https://www.npmjs.com/package/rambda">Rambda</a>, a light Ramda alternative by <a href="https://twitter.com/self_refactor">Dejan Toteff</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/fbfd7af236eb986e5877c46d44a93263?s=200" alt="Dejan Toteff" class="author" width="100" height="100" />
</span>
I am a full stack JavaScript and React developer at Comstream, based in Sofia, Bulgaria. I also work at my side project I Learn Smarter.
</p>
<p>I started learning JavaScript two years ago, and I am still fascinated by the language and its ecosystem. I don't believe in the narrative that we should use JavaScript for everything and ignore that there are other languages out there. So I spend some of my free time learning Golang as it is both powerful and beginners friendly.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-rambda-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-rambda-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Rambda</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-rambda-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It is utility library which gives you useful methods without the price of large size and performance penalty.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rambda-work-" id="how-does-rambda-work-"></a><span class="text">How does <em>Rambda</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rambda-work-">#</a></h2>
<p>Rambda doesn't have any external dependency - it is just plain JavaScript.</p>
<p>Its selling point lies in using <code>R.compose</code> to generate readable chain of actions:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> R <span class="token keyword keyword-from" >from</span> <span class="token string" >'rambda'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> getShortColors <span class="token operator" >=</span> R<span class="token punctuation" >.</span><span class="token function" >compose</span><span class="token punctuation brackets-parentheses" >(</span>
R<span class="token punctuation" >.</span><span class="token function" >map</span><span class="token punctuation brackets-parentheses" >(</span>R<span class="token punctuation" >.</span><span class="token function" >prop</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'color'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
R<span class="token punctuation" >.</span><span class="token function" >filter</span><span class="token punctuation brackets-parentheses" >(</span>val <span class="token operator" >=></span> val<span class="token punctuation" >.</span>color<span class="token punctuation" >.</span>length <span class="token operator" ><</span> <span class="token number" >5</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
R<span class="token punctuation" >.</span>uniq
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> data <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span> color<span class="token punctuation" >:</span> <span class="token string" >'blue'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> color<span class="token punctuation" >:</span> <span class="token string" >'red'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> color<span class="token punctuation" >:</span> <span class="token string" >'purple'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span> color<span class="token punctuation" >:</span> <span class="token string" >'red'</span> <span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> shortColors <span class="token operator" >=</span> <span class="token function" >getShortColors</span><span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >//=> ['blue', 'red']</span>
</code></pre>
<p>Most of the methods can be curried, which gives the developer a choice how to call them:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> addOne <span class="token operator" >=</span> R<span class="token punctuation" >.</span><span class="token function" >add</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-const" >const</span> foo <span class="token operator" >=</span> <span class="token function" >addOne</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >10</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token comment" spellcheck="true" >// => 11</span>
<span class="token keyword keyword-const" >const</span> bar <span class="token operator" >=</span> R<span class="token punctuation" >.</span><span class="token function" >add</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >10</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-const" >const</span> baz <span class="token operator" >=</span> R<span class="token punctuation" >.</span><span class="token function" >add</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >1</span><span class="token punctuation" >,</span><span class="token number" >10</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>In terms of performance <code>R.add(1,10)</code> is faster, but code of type <code>R.add(1)(10)</code> is more readable with longer declarations.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-rambda-differ-from-other-solutions-" id="how-does-rambda-differ-from-other-solutions-"></a><span class="text">How does <em>Rambda</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-rambda-differ-from-other-solutions-">#</a></h2>
<p>Rambda doesn't offer the same freedom of expression as Ramda, as it focuses on covering a small but useful portion of the vast API of Ramda.</p>
<p>To illustrate the size difference in numbers - my custom Ramda build was 24.6 kB, while the same methods in Rambda take only 7.6 kB.</p>
<p>Also, Rambda has better performance when <a href="https://github.com/selfrefactor/rambda#benchmark">benchmarked against Ramda and Lodash</a>. You can run the benchmark yourself by cloning Rambda repository and the running <code>npm i && node benchmark</code>.</p>
<p>The main reason for the better performance is that Rambda methods only need to take care for currying and execution, while Ramda and Lodash methods cover more use cases. Therefore they have more elaborate boilerplate around the actual execution, which results in slower performance.</p>
<p>We can see an illustration of that in the code of <code>find</code> method of Ramda, Lodash, and Rambda.</p>
<p><strong>Ramda:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-var" >var</span> _curry2 <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'./internal/_curry2'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> _dispatchable <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'./internal/_dispatchable'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> _xfind <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'./internal/_xfind'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
module<span class="token punctuation" >.</span>exports <span class="token operator" >=</span> <span class="token function" >_curry2</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >_dispatchable</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token string" >'find'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> _xfind<span class="token punctuation" >,</span> <span class="token keyword keyword-function" >function</span> <span class="token function" >find</span><span class="token punctuation brackets-parentheses" >(</span>fn<span class="token punctuation" >,</span> list<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> idx <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> len <span class="token operator" >=</span> list<span class="token punctuation" >.</span>length<span class="token punctuation" >;</span>
<span class="token keyword keyword-while" >while</span> <span class="token punctuation brackets-parentheses" >(</span>idx <span class="token operator" ><</span> len<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token function" >fn</span><span class="token punctuation brackets-parentheses" >(</span>list<span class="token punctuation brackets-square" >[</span>idx<span class="token punctuation brackets-square" >]</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> list<span class="token punctuation brackets-square" >[</span>idx<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
idx <span class="token operator" >+=</span> <span class="token number" >1</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p><strong>Lodash:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >findIndex</span><span class="token punctuation brackets-parentheses" >(</span>array<span class="token punctuation" >,</span> predicate<span class="token punctuation" >,</span> fromIndex<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> length <span class="token operator" >=</span> array <span class="token operator" >==</span> <span class="token keyword keyword-null" >null</span> <span class="token operator" >?</span> <span class="token number" >0</span> <span class="token punctuation" >:</span> array<span class="token punctuation" >.</span>length<span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token operator" >!</span>length<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token operator" >-</span><span class="token number" >1</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-var" >var</span> index <span class="token operator" >=</span> fromIndex <span class="token operator" >==</span> <span class="token keyword keyword-null" >null</span> <span class="token operator" >?</span> <span class="token number" >0</span> <span class="token punctuation" >:</span> <span class="token function" >toInteger</span><span class="token punctuation brackets-parentheses" >(</span>fromIndex<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>index <span class="token operator" ><</span> <span class="token number" >0</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
index <span class="token operator" >=</span> <span class="token function" >nativeMax</span><span class="token punctuation brackets-parentheses" >(</span>length <span class="token operator" >+</span> index<span class="token punctuation" >,</span> <span class="token number" >0</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >baseFindIndex</span><span class="token punctuation brackets-parentheses" >(</span>array<span class="token punctuation" >,</span> <span class="token function" >getIteratee</span><span class="token punctuation brackets-parentheses" >(</span>predicate<span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> index<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >createFind</span><span class="token punctuation brackets-parentheses" >(</span>findIndexFunc<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span>collection<span class="token punctuation" >,</span> predicate<span class="token punctuation" >,</span> fromIndex<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> iterable <span class="token operator" >=</span> <span class="token function" >Object</span><span class="token punctuation brackets-parentheses" >(</span>collection<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token operator" >!</span><span class="token function" >isArrayLike</span><span class="token punctuation brackets-parentheses" >(</span>collection<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> iteratee <span class="token operator" >=</span> <span class="token function" >getIteratee</span><span class="token punctuation brackets-parentheses" >(</span>predicate<span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
collection <span class="token operator" >=</span> <span class="token function" >keys</span><span class="token punctuation brackets-parentheses" >(</span>collection<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function-variable function" >predicate</span> <span class="token operator" >=</span> <span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span>key<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token function" >iteratee</span><span class="token punctuation brackets-parentheses" >(</span>iterable<span class="token punctuation brackets-square" >[</span>key<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> key<span class="token punctuation" >,</span> iterable<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-var" >var</span> index <span class="token operator" >=</span> <span class="token function" >findIndexFunc</span><span class="token punctuation brackets-parentheses" >(</span>collection<span class="token punctuation" >,</span> predicate<span class="token punctuation" >,</span> fromIndex<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> index <span class="token operator" >></span> <span class="token operator" >-</span><span class="token number" >1</span> <span class="token operator" >?</span> iterable<span class="token punctuation brackets-square" >[</span>iteratee <span class="token operator" >?</span> collection<span class="token punctuation brackets-square" >[</span>index<span class="token punctuation brackets-square" >]</span> <span class="token punctuation" >:</span> index<span class="token punctuation brackets-square" >]</span> <span class="token punctuation" >:</span> undefined<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> find <span class="token operator" >=</span> <span class="token function" >createFind</span><span class="token punctuation brackets-parentheses" >(</span>findIndex<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p><strong>Rambda:</strong></p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >find</span><span class="token punctuation brackets-parentheses" >(</span>fn<span class="token punctuation" >,</span> arr<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>arr <span class="token operator" >===</span> undefined<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> holder <span class="token operator" >=></span> <span class="token function" >find</span><span class="token punctuation brackets-parentheses" >(</span>fn<span class="token punctuation" >,</span> holder<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-return" >return</span> arr<span class="token punctuation" >.</span><span class="token function" >find</span><span class="token punctuation brackets-parentheses" >(</span>fn<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-rambda-" id="why-did-you-develop-rambda-"></a><span class="text">Why did you develop <em>Rambda</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-rambda-">#</a></h2>
<p>I was happy to use Ramda, but not so satisfied with its size.
So I explored the idea to recreate my favorite Ramda methods with less code, and this is how Rambda became to be.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I believe that regular commits are a sign of a healthy library.
So I do some upgrades when I see a limitation in the current state of Rambda. The latest one was adding type "Async" as a return value of <code>R.type</code> for recognition of async functions.</p>
<p>Also, I have a plan for separate documentation site, as now browsing the documentation in not as convenient as it can be.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-rambda-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-rambda-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Rambda</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-rambda-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>With speed JavaScript is growing regarding API, such libraries will get less useful. They are currently needed just because native JavaScript doesn't yet offer this functionality.</p>
<p>As for the current trends - I like that Vue is the new hype child, as this shows that developers prefer simpler solutions over complicated ones such as Angular 4.</p>
<p>I still don't like Vue, and I considered a big step back compared to React, but I understand why some developers like it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Read all of the <strong>You don't know JS</strong> books and watch some <strong>Kyle Simpson</strong> videos - the guy has the talent to educate.</p>
<p>Don't underestimate the complexity of CSS - it is a real language, and it requires proper attention.</p>
<p>Check PostCSS before jumping to LESS or SASS camp - it exists for a reason.</p>
<p>Don't write a single line of front-end code without <strong>webpack</strong> - the excuse that it is hard is thin.</p>
<p>Read the API of another language than JavaScript as this could help you better understand the high points of JavaScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/bruderstein">Dave Brotherstone</a>, the author of <a href="https://www.npmjs.com/package/unexpected-react">unexpected-react</a> and founder of ReactJS meetup in Hamburg. He is one of the reasons why I made the switch from Angular 1.X to React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Dejan! I think Rambda is a part of the current trend towards micro-libraries. The trend has been visible especially in front-end UI libraries for a while.</p>
<p>Interestingly bigger libraries try to solve this in their own ways (Babel plugins etc.) though you still have the requirement problem (more cases to support).</p>
<p>Learn more about Rambda at <a href="https://github.com/selfrefactor/rambda">Rambda's GitHub page</a>.</p>
SurviveJS - Webpack - v2.0asurvivejswebpackv202017-03-29t00:00:00z2017-03-29T00:00:00Z<p>Here we go then. This is the big release I've been working towards for the past few months. Compared to <a href="https://survivejs.com/survivejs-webpack-19">the previous release</a> this one is more polished and also <a href="https://www.amazon.com/dp/9526868803">available in a paper form</a>. The digital edition has 458 pages while the paper version grew to 499 due to layout reasons.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>Writing and content is only a part of the work required. Especially editing phase and tuning the book so that page breaks are in place and that content fits need significant effort. Compared to my first paper book, I spent far more time editing and I hope it shows in the result.</p>
<p>I found room for a couple of more chapters based on the existing content. I feel this made certain parts of the book easier to approach even though I admit it's a long book! I like the idea of writing a lot of shorter, focused chapters and I'll be using this model in the future as well.</p>
<p>As I've been preparing for the <a href="https://survivejs.com/euro-tour-2017">Euro tour</a>, I had a good chance to look at the content critically. I condensed the book into two sets of slides: <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman">Webpack - From Apprentice to Journeyman</a> and <a href="https://presentations.survivejs.com/webpack-from-journeyman-to-master/">Webpack - From Journeyman to Master</a>. I also created a related presentation that goes by the name of <a href="https://presentations.survivejs.com/re-imagining-webpack/">Re-imagining Webpack</a>. It's a quick look at the project and where it's going.</p>
<p>The way to a paper release was far harder than I anticipated but journeys like this are rarely easy. And there is still more to come. If nothing else, pushing this release out there is a big personal step for me and it has also taught me a lot. I'm particularly thankful to the community that supported me in this effort and helped me to surpass myself over and over again.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0" id="book-improvements-2-0"></a><span class="text">Book Improvements - <code>2.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0">#</a></h2>
<p>I released a series of silent releases as before. The biggest changes had to do with splitting of a few chapters that had grown too long and unfocused. Especially the packaging and extending parts of the book received a lot of attention. I also put heavy effort into editing the book to make sure pages of the print edition break at the right places.</p>
<p>In total 726 commits went to the book since the last release. You can find the <a href="https://github.com/survivejs/webpack-book/compare/v1.9.0...v2.0.1">changes at GitHub</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The next bigger step for me is to get through the <a href="https://survivejs.com/euro-tour-2017">Euro tour</a> successfully. There is also more writing to be done as certain other book might require an update and a third one just might be on sight! I've been also experimenting with screencasts but we'll see if that leads anywhere.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-to-get-the-book-" id="how-to-get-the-book-"></a><span class="text">How to get the book?</span><a class="header-anchor-select" href="https://survivejs.com/#how-to-get-the-book-">#</a></h2>
<p>I prepared <a href="https://survivejs.com/webpack">a special landing page</a> that explains the book in detail. But if you know it already, consider the following:</p>
<ul>
<li><a href="https://survivejs.com/webpack/preface">Free online edition</a></li>
<li><a href="https://leanpub.com/survivejs-webpack">Leanpub edition (digital)</a></li>
<li><a href="https://www.amazon.com/dp/9526868803">Amazon edition (paperback)</a></li>
<li><a href="https://www.amazon.com/dp/B06XWZZGBS">Kindle edition (digital)</a> - Snapshot on 2.0, hence the special price!</li>
</ul>
<blockquote>
<p>A special signature edition will happen if there is enough interest. <a href="https://survivejs.typeform.com/to/LUQK0T">I want one!</a>.</p>
</blockquote>
<blockquote class="tip"><i class="icon-attention-circled"></i>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</blockquote><blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the book! It took a lot of work to get here and there's still more to come. Thank you for your support!</p>
<p>Note that I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> if you want to bug me about webpack. You can also <a href="https://github.com/survivejs/ama/issues">ask questions at my AmA</a>.</p>
Hyperapp - Tiny Library for Frontend Applications - Interview with Jorge Bucaranahyperapptinylibraryforfrontendapplicationsinterviewwithjorgebucaran2017-03-13t00:00:00z2017-03-13T00:00:00Z<p>Micro-sized JavaScript libraries are a niche of their own. Often the idea is to use modern JavaScript APIs and expose them in an easier way. The earlier <a href="https://survivejs.com/blog/redom-interview">RE:DOM interview</a> discussed one option.</p>
<p>This time around I am interviewing <a href="https://twitter.com/JorgeBucaran">Jorge Bucaran</a>, the author of <a href="https://github.com/hyperapp/hyperapp">Hyperapp</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/1823e8f81a08dbbdd59a19382c5c5af9?s=200" alt="Jorge Bucaran" class="author" width="100" height="100" />
</span>
I'm an engineer at Increments, Inc, based in Tokyo, Japan. We build <a href="https://qiita.com/">Qiita</a>, Japan’s technical knowledge sharing and collaboration platform for programmers. I was born and raised in Venezuela.
</p>
<p>I started making simple web pages when I was around 15 years old, but I still need to look up how to link CSS with HTML. How I wound up in Japan is quite the story, but not for today.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_hyperapp_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_hyperapp_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Hyperapp</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_hyperapp_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Hyperapp is a JavaScript library for building frontend applications. In this way, it's similar to others like React, Vue or Ember.</p>
<p>Hyperapp supports IE10+ out of the box, it's <code>1KB</code>-ish minified and gzipped; it's fast and has an exciting community supporting it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_hyperapp_-work-" id="how-does-_hyperapp_-work-"></a><span class="text">How does <em>Hyperapp</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_hyperapp_-work-">#</a></h2>
<p>We have <a href="https://hyperapp.js.org/">documentation</a> to help newcomers get started and learn how to get started with Hyperapp.</p>
<p>A typical Hello World example looks like this:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> h<span class="token punctuation" >,</span> app <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"hyperapp"</span>
<span class="token keyword keyword-const" >const</span> state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> title<span class="token punctuation" >:</span> <span class="token string" >"Hi."</span> <span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> actions <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >view</span> <span class="token operator" >=</span> state <span class="token operator" >=></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h1</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span>state<span class="token punctuation" >.</span>title<span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h1</span><span class="token punctuation" >></span></span>
<span class="token function" >app</span><span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> actions<span class="token punctuation" >,</span> view<span class="token punctuation" >,</span> document<span class="token punctuation" >.</span>body<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p><a href="https://codepen.io/hyperapp/pen/Qdwpxy?editors=0010">CodePen</a></p>
<p>And here is a bound text input:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> h<span class="token punctuation" >,</span> app <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"hyperapp"</span>
<span class="token keyword keyword-const" >const</span> state <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
text<span class="token punctuation" >:</span> <span class="token string" >"Hello!"</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> actions <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
setText<span class="token punctuation" >:</span> text <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> text <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >view</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> setText <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>main</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h1</span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span>state<span class="token punctuation" >.</span>text<span class="token punctuation" >.</span><span class="token function" >trim</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >===</span> <span class="token string" >""</span> <span class="token operator" >?</span> <span class="token string" >"🤯"</span> <span class="token punctuation" >:</span> state<span class="token punctuation" >.</span>text<span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h1</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>input</span>
<span class="token attr-name" >autofocus</span>
<span class="token attr-name" >value</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>state<span class="token punctuation" >.</span>text<span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >oninput</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>e <span class="token operator" >=></span> <span class="token function" >setText</span><span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>main</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >app</span><span class="token punctuation brackets-parentheses" >(</span>state<span class="token punctuation" >,</span> actions<span class="token punctuation" >,</span> view<span class="token punctuation" >,</span> document<span class="token punctuation" >.</span>body<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p><a href="https://codepen.io/hyperapp/pen/qRMEGX?editors=1010">CodePen</a></p>
<p>Hyperapp offers a single, immutable model. The state is always a plain JavaScript object and can contain anything that makes sense to your application.</p>
<p>Users interact with your application to trigger actions. Actions can be used in a variety of ways, but their ultimate goal is to update the state. They do this by returning a new state (or partial state) that gets merged with the current one and replaces it. When the state changes as a result of calling an action, Hyperapp re-renders your application, and that's the circle of life in a wrap.</p>
<p>Hyperapp also advocates using stateless components. Stateless components are pure functions that only know how to render themselves and what actions they are allowed to trigger. As a result, they are framework agnostic and easy to debug and test.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_hyperapp_-differ-from-other-solutions-" id="how-does-_hyperapp_-differ-from-other-solutions-"></a><span class="text">How does <em>Hyperapp</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_hyperapp_-differ-from-other-solutions-">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hyperapp-is-opinionated-about-state-management" id="hyperapp-is-opinionated-about-state-management"></a><span class="text">Hyperapp is opinionated about state management</span><a class="header-anchor-select" href="https://survivejs.com/#hyperapp-is-opinionated-about-state-management">#</a></h3>
<p>Hyperapp is inspired by <a href="https://guide.elm-lang.org/architecture/">The Elm Architecture</a> and does not rely on external libraries such as Redux, enabling you to create almost pure functional applications out of the box.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hyperapp-is-easy-to-grasp" id="hyperapp-is-easy-to-grasp"></a><span class="text">Hyperapp is easy to grasp</span><a class="header-anchor-select" href="https://survivejs.com/#hyperapp-is-easy-to-grasp">#</a></h3>
<p>If you can read the 300-ish lines of code, you'll have seen everything you needed to know about Hyperapp. That feeling you get when you are done going through the code base, and got it all down and still can walk away with your sanity intact is liberating. It is at that moment that the project is no longer someone else's mad science experiment, but something familiar and yours truly.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hyperapp-is-good-enough" id="hyperapp-is-good-enough"></a><span class="text">Hyperapp is good enough</span><a class="header-anchor-select" href="https://survivejs.com/#hyperapp-is-good-enough">#</a></h3>
<p>I am not trying to science out every single aspect of the virtual DOM engine, and as a result, Hyperapp is approximately 1 KB. Attention is still paid to performance, and the <a href="https://github.com/hyperapp/hyperapp/issues/499">latest benchmarks</a> suggest we are not far behind the big ones like React or Vue.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#not-a-one-man-effort" id="not-a-one-man-effort"></a><span class="text">Not a one-man-effort</span><a class="header-anchor-select" href="https://survivejs.com/#not-a-one-man-effort">#</a></h3>
<p>Despite the tremendous success of heavily optimized engines like Mithril and Inferno, they remain at large a one man's project. They have burgeoning communities helping triage issues and maintain the ecosystem, but core development still answers to a single individual.</p>
<p>I want Hyperapp to be more a people's project. We've already seen substantial contributions from the community, and I think this is in part due to the brutal approach and simplicity of the project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-hyperapp-" id="why-did-you-develop-hyperapp-"></a><span class="text">Why did you develop Hyperapp?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-hyperapp-">#</a></h2>
<p>I needed to build a web client for a project at work. My first choice was React and Redux since that's what we use to develop Qiita, but I wanted something lightweight and without the frameworkyness of React.</p>
<p>I looked at other options too: Elm, Choo, and yo-yo, were the ones closest to my heart, but none of them delivered the mix of simplicity and works-out-of-the-box-ness I was looking for.</p>
<p>Elm is undoubtedly otherworldly. It's probably the best attempt to popularize functional programming that I've seen in recent years. However, I found that it was quite challenging to integrate third party libraries with Elm.</p>
<p>Choo and yo-yo were lovely too. Both projects were a big source of inspiration for me, but I wanted something ⅓ of the size and less opinionated about JavaScript and how it should be written. If you are not sure what I mean by this, shoot me a tweet at <a href="https://twitter.com/JorgeBucaran">@JorgeBucaran</a>, and I'll be happy to elaborate.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<ul>
<li><p>Server side rendering (SSR). There have been a few <a href="https://github.com/hyperapp/hyperapp/pull/28">SSR prototypes</a> developed by members of the community so far, but I'd like to offer this out of the box. Hyperapp offers SSR re-hydration out of the box as of 1.0.</p>
</li>
<li><p>More examples. We currently lack an official website or a REPL. All are coming near you soon!</p>
</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-hyperapp-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-hyperapp-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for Hyperapp and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-hyperapp-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I'm very excited about Hyperapp and the community that has started to congregate around the project. If I can add my two cents to popularizing functional programming in the frontend, I'll die a happy man. I hope I can create a stable framework that stays true to its original premise and can help people make elegant and pure functional websites.</p>
<p>My perceptions are largely biased by my likes and dislikes. I don't know what's going to become trendy next or what isn't, but I can tell you that I'd love to see more people embracing the wonders of <a href="https://github.com/fantasyland/fantasy-land">Fantasy Land</a> and help make it more accessible for the rest of us.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<ul>
<li>Reinvent the wheel. Otherwise, how are you ever going to learn anything?</li>
<li>Learn functional programming. Then help communicate it effectively to others.</li>
<li>Learn CSS. While some are already speaking about a <a href="https://developers.slashdot.org/story/17/03/04/0042218/douglas-crockford-envisions-a-post-javascript-world">post-JavaScript world</a>, CSS is not going away. Ever.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/paldepind">Simon Friis Vindum</a>. He is the author of <a href="https://github.com/snabbdom/snabbdom">Snabbdom</a>, a virtual DOM engine and <a href="https://github.com/Funkia/funnel">Funnel</a>, a devoted, purely functional frontend framework.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jorge! I think it's time to do round two with Simon as we did a <a href="https://survivejs.com/blog/snabbdom-interview">Snabbdom interview</a> earlier. :)</p>
<p>Learn more about Hyperapp from its <a href="https://hyperapp.js.org/">documentation</a> and <a href="https://codepen.io/hyperapp/">examples</a>. Check out the <a href="https://github.com/hyperapp/hyperapp">project at GitHub</a>.</p>
SurviveJS Euro Tour 2017asurvivejseurotour20172017-03-10t00:00:00z2017-03-10T00:00:00Z<p>You know how rockstars tour to support their albums? Who is to say a book author could not do the same?</p>
<p>Through a couple of coincidences, it looks like I'll be touring Europe this April. I'll start the tour from Finland and visit countries like Norway, Germany, Czech, Slovakia, and Austria during it. I will be talking mostly about webpack during the tour unless there's demand for <a href="https://presentations.survivejs.com/">other topics</a>.</p>
<p>Note that I have time especially during the weeks at Norway and Germany. This is your chance to bug me in person!</p>
<p>I've listed the tour dates below with registration where possible. The list will be updated as I have more information available.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-23-24-3-helsinki-finland-" id="-23-24-3-helsinki-finland-"></a><span class="text"><del>23-24.3 - Helsinki, Finland</del></span><a class="header-anchor-select" href="https://survivejs.com/#-23-24-3-helsinki-finland-">#</a></h2>
<ul>
<li><del>23.3 - <a href="https://meetabit.com/communities/react-helsinki">React Helsinki</a></del> - <a href="https://presentations.survivejs.com/re-imagining-webpack/">Re-imagining Webpack</a> - 20 mins + QA, first go!</li>
<li><del>24.3 - <a href="http://wwweeklies.com/">wwweeklies</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 45 mins + QA, from basic to advanced topics fast.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-1-9-4-norway-oslo-" id="-1-9-4-norway-oslo-"></a><span class="text"><del>1-9.4 - Norway, Oslo</del></span><a class="header-anchor-select" href="https://survivejs.com/#-1-9-4-norway-oslo-">#</a></h2>
<ul>
<li><del>3.4 - <a href="https://www.meetup.com/ReactJS-Oslo-Meetup/events/238536172/">ReactJS Norway</a></del> - <a href="https://presentations.survivejs.com/re-imagining-webpack/">Re-imagining Webpack</a> - 20 mins + QA, second go!</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-9-19-4-germany-" id="-9-19-4-germany-"></a><span class="text"><del>9-19.4 - Germany</del></span><a class="header-anchor-select" href="https://survivejs.com/#-9-19-4-germany-">#</a></h2>
<ul>
<li><del>11.4 - <a href="https://www.meetup.com/NewStore/">Berlin - NewStore</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Journeyman</a> - 45 mins + QA, see the <a href="https://www.meetup.com/NewStore/events/238314252/">Meetup</a> page for more information.</li>
<li><del>14.4 - <a href="https://www.meetup.com/Cologne-js/events/238980913/">Cologne - CologneJS</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 4h (with breaks!) + QA</li>
<li><del>18.4 - <a href="https://www.facebook.com/events/404484116586415/">Berlin - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-19-26-4-czech-republic-and-slovakia-" id="-19-26-4-czech-republic-and-slovakia-"></a><span class="text"><del>19-26.4 - Czech Republic and Slovakia</del></span><a class="header-anchor-select" href="https://survivejs.com/#-19-26-4-czech-republic-and-slovakia-">#</a></h2>
<ul>
<li><del>19.4 - <a href="https://www.facebook.com/events/419425221744852/">Prague - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
<li><del>20.4 - <a href="https://www.facebook.com/events/1868848770041251/">Hradec Králové - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
<li><del>24.4 - <a href="https://www.facebook.com/events/1863697743885500/">Brno - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
<li><del>25.4 - <a href="https://www.facebook.com/events/247969145674274/">Bratislava - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
<li><del>26.4 - <a href="https://www.facebook.com/events/1736850319939384/">Košice - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#-27-4-vienna-austria-" id="-27-4-vienna-austria-"></a><span class="text"><del>27.4 - Vienna, Austria</del></span><a class="header-anchor-select" href="https://survivejs.com/#-27-4-vienna-austria-">#</a></h2>
<ul>
<li><del>27.4 - <a href="https://www.meetup.com/ReactVienna/events/239448438/">Vienna - Reactive Roadshow</a></del> - <a href="https://presentations.survivejs.com/webpack-from-apprentice-to-journeyman/">Webpack - From Apprentice to Master</a> - 90 mins + QA</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p><del>See you on the tour!</del></p>
Code Quality - Interview with João Caxariaacodequalityinterviewwithjoaocaxaria2017-03-06t00:00:00z2017-03-06T00:00:00Z<p>What makes code good? How do you tell bad code from good one? Issues like this come to mind when you think about the concept of <strong>code quality</strong>. To get a better idea of the topic, I'm interviewing <a href="https://twitter.com/caxaria">João Caxaria</a></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://0.gravatar.com/avatar/40405d52c92e546d32046560f4e5c40a?s=200" alt="João Caxaria" class="author" width="100" height="100" />
</span>
I'm a software engineer currently disguised of a CTO for <a href="https://www.codacy.com">Codacy</a>. Before this, I did several years of software development as a consultant, having worked in several different companies, from small game studios to industry giants such as Citibank.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-the-term-_code-quality_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-the-term-_code-quality_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe the term <em>code quality</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-the-term-_code-quality_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Code quality is a hard thing to explain; Having a good code quality will mean your code is less error prone but having no errors in your code does not mean good code quality. Good code quality reflects itself on a application whose architecture is well built, easily explainable and well understood by your peers.</p>
<p>Code quality is code that is easily extendable and provides a framework to work upon for the next developers that find it vs. removing the current code and starting over. Code quality is safety in deployments, and predictable development times on new features.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-you-measure-_code-quality_-" id="how-do-you-measure-_code-quality_-"></a><span class="text">How do you measure <em>code quality</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-you-measure-_code-quality_-">#</a></h2>
<p>To measure code quality, you need to look at several components in your code: code issues, code consistency, proper namespace or package responsibilities, class dependencies should be kept to a minimum, code coverage, etc etc. Some stuff can be measured automatically, and some <em>still</em> requires human reviewers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-is-_code-quality_-important-" id="why-is-_code-quality_-important-"></a><span class="text">Why is <em>code quality</em> important?</span><a class="header-anchor-select" href="https://survivejs.com/#why-is-_code-quality_-important-">#</a></h2>
<p>Code quality is not always important! For example, if you're doing a prototype, code quality takes a secondary role when compared to speed of delivery.</p>
<p>If you're working on a project on which you will build a mission critical part of your company, then code quality is the most important thing you can think of; it will allow you to continuously grow your project and have your company grow with it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-measuring-_code-quality_-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-measuring-_code-quality_-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for measuring <em>code quality</em>? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-measuring-_code-quality_-can-you-see-any-particular-trends-">#</a></h2>
<p>I believe several current software development processes will be changed or improved by Machine Learning / AI techniques. Although foreseeing the future is hard, if I had to bet on something, it would be on this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Have fun and and don't be afraid to create and experiment new things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/flomotlik">Florian Motlik</a> for sure. Smartest and kindest fellow I had the pleasure to talk to and learn from. Would read anything he says without second thoughts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Thank you for your time and making me think about this and how to put it in written form :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview João! I think code quality is one of those things that's easy to overlook. You definitely feel it when you are working. I found it particularly interesting that you noted it doesn't matter that much always.</p>
<p>Especially during prototyping phase it's more important to explore the idea space than end up with a technically perfect implementation. Techniques, such as using tracer bullets, come in handy here as you are still guessing and trying to figure out a good direction.</p>
SurviveJS - Webpack - v1.9asurvivejswebpackv192017-03-01t00:00:00z2017-03-01T00:00:00Z<p>If <a href="https://survivejs.com/survivejs-webpack-18">the previous release</a> was a big step, this is another one. By the looks of it, the final paper version will be around 450 pages. Don't worry, though, I've taken special care to keep the chapters short and focused.</p>
<p>I consider the current release content complete. Only final tweaking and tuning remain.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I added the missing <a href="https://survivejs.com/webpack/techniques/testing">chapter on testing</a> while introducing a new part to the book that covers specific techniques. In addition, the part covers aspects like internationalization and web workers. You can also find new material at the beginning and the end of the book, but I'll leave those for you to discover and check out.</p>
<p>The structure and the content of the book feel solid now. All that remains is studying the chapters in detail and improving where possible. I have a couple of rough ideas what to do, but overall the changes required are small. Remember to provide feedback to me as it will make this final process smoother.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you have found the content useful, this would be a good time to contribute a testimonial. A sentence or two would go a long way. Contact me the way you see the most fitting. You can find a couple of channels at the site footer.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-9" id="book-improvements-1-9"></a><span class="text">Book Improvements - <code>1.9</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-9">#</a></h2>
<p>I took my habit of silent releases to a new level during this iteration. This was due to the fact that the changes I made were not disruptive and rather improved the book.</p>
<p>Especially the techniques part feels like a good addition to the book. There is enough material for you to get started with the covered topics. Apart from the testing chapter, the new chapters are short so you can get the main ideas fast.</p>
<p>One of the additions I'm most excited about has to do with chapter conclusions. I wrote a small recap for each main chapter of the book. This allows you to see what I consider as the main ideas of each chapter. You could learn a lot about webpack by reading the summaries alone.</p>
<p>The book also has a proper conclusion chapter now that works as a checklist. You can use it against your application to see if you are using the techniques covered in the book.</p>
<p>In addition to these changes, you will find numerous smaller improvements. I spent a lot of time reviewing the book for grammar issues. In short, the book should read better.</p>
<p>In total 234 commits went to the book since the last release. You can find the <a href="https://github.com/survivejs/webpack-book/compare/v1.8.1...v1.9.0">changes at GitHub</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Given the book covers the topics I want, I can focus on improving its quality. I feel the book is in a good place overall, but I want to sharpen certain parts before going paper. Especially the chapters related to extending webpack can become better as new technology has appeared making them easier to develop.</p>
<p>I also have something font related brewing that will make it easier to figure out which fonts you should load, but more on this the next time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>As usual, feedback is welcome. I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> and you can reach me through it easily. I am still looking for testimonials for the final release and I will choose a few for the book cover.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote>SurviveJS - Webpack - v1.8asurvivejswebpackv182017-02-18t00:00:00z2017-02-18T00:00:00Z<p>Compared to <a href="https://survivejs.com/survivejs-webpack-170">the previous release</a> this one has gained more weight. The PDF version of the book is close to 400 pages due to new content and enhancements. There is still one chapter and two appendices to write, but the finish line is close!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>My biggest goal this time around was to add certain missing content to the book. Initially I wanted to write an output related chapter, but instead that ended up becoming an entire part containing multiple chapters. I also added material on web workers while pushing the current content further based on feedback.</p>
<p>I still have to write a testing related chapter and cover i18n and debugging in short appendices. I will also add more material related to the fundamentals of webpack and likely rewrite the extension related chapters to use a package known as <strong>webpack-defaults</strong>. They will become more pragmatic as well.</p>
<p>The structure of the book evolved further and I took great care in figuring out short, but descriptive, names for parts of the book. Certain restructuring was made and the book should flow a little better than earlier.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you have found the content useful, this would be a good time to contribute a testimonial. A sentence or two would go a long way. Contact me the way you see the most fitting. You can find a couple of channels at the site footer.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-8" id="book-improvements-1-8"></a><span class="text">Book Improvements - <code>1.8</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-8">#</a></h2>
<p>I continued the habit of silent releases and did a couple before I realized the book has moved too far content-wise to warrant one. But I'll likely continue with this habit yet again.</p>
<p>The highlight of the new release is the output related part. I cover output options of webpack there. I also put emphasis on multi-page setups and <strong>Server Side Rendering</strong>. Due to this the React chapter of the book disappeared and was split between the new content and HMR specific appendix.</p>
<p>The configuration style evolved yet again to accommodate for multi-page setups better. Now it's easier to compose than before.</p>
<p>You will find numerous smaller improvements. In addition to new content, the language of the book was improved. I introduced certain level of linting to my workflow and will continue to work on this as the major milestone gets closer.</p>
<p>In total 353 commits went to the book since the last release. You can find the <a href="https://github.com/survivejs/webpack/compare/v1.7.0...v1.8.1">changes at GitHub</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I will write a testing focused chapter, the missing appendices, and continue to cover issues highlighted by reader feedback. I expect to cover more fundamentals of webpack so you get a rough idea of webpack before actually starting to develop the configuration. After these steps I consider it feature complete.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the changes. As usual, feedback is welcome. I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> and you can reach me through it easily.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote>SurviveJS - Webpack - v1.7.0asurvivejswebpackv1702017-02-04t00:00:00z2017-02-04T00:00:00Z<p>Compared to <a href="https://survivejs.com/survivejs-webpack-160">the previous release</a> we've proceeded a step or two closer towards paper. This time around in addition to the usual tweaks there are a couple of new chapters and more content.</p>
<p>It will likely take at least one more release till we get to the magical 2.0 release that should become available in paper as well.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I tackled most of the issues I had in mind for this release. Some were deferred to the next one and I'll continue iterating there. The structure of the book feels solid and it's fast to progress now. There are three chapters and three appendices to add. After that I consider the book "feature complete".</p>
<p>This time around my special thanks go to <a href="https://github.com/Undistraction">Pedr Browne</a> for his amazing feedback that helped me improve particularly the flow of the book. Some improvements are still in store.</p>
<p>There will be at least a 1.8 version before the book reaches paper, but the end is definitely in sight. <a href="https://github.com/survivejs/webpack/issues">Open issues</a> as you see fit. You can also <a href="https://gitter.im/survivejs/webpack">reach me through Gitter</a>.</p>
<p>Note that webpack 2 is considered stable now and you don't need <code>@beta</code> specifier with it when installing. Only <a href="https://github.com/webpack-contrib/extract-text-webpack-plugin">extract-text-webpack-plugin</a> remains in release candidate mode. If you want to help with it, check out the issue tracker and especially the milestones. It has to reach a final release before I can push the paper book out there.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you have found the content useful, this would be a good time to contribute a testimonial. A sentence or two would go a long way. Contact me the way you see the most fitting. You can find a couple of channels at the site footer.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-7-0" id="book-improvements-1-7-0"></a><span class="text">Book Improvements - <code>1.7.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-7-0">#</a></h2>
<p>In total 159 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.6.0...v1.7.0">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<p>I continued the habit of silent releases and I actually intend to do one quite fast after this release to improve the formatting of webpack output.</p>
<p>There's a new part on how to extend webpack. I pushed the existing loader chapter there and added a short one on plugins. It's more of a quick dip in the topic to give you some idea on how you might write one.</p>
<p>I also integrated React HMR appendix to the React chapter itself as that felt like a better place for it. During this process I upgraded the setup to use the newest beta version of <em>react-hot-loader</em> while covering a couple of gotchas related to it and how to work around those.</p>
<p>The configuration style has improved a notch and you'll see many functions accept objects. This is to keep them readable and easy to extend.</p>
<p>You will find numerous smaller improvements in the book and it should flow better. Certain chapters contribute more to the book project and I've tried to take care to write the chapters so that you can approach them even without knowledge of the previous ones. Sometimes that's impossible to pull off, but it should be a little better now at least.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h2>
<ul>
<li>Simplified especially the end part a notch. The book digs into detail later so there's no need to repeat.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-started" id="getting-started"></a><span class="text">Getting Started</span><a class="header-anchor-select" href="https://survivejs.com/#getting-started">#</a></h3>
<ul>
<li>Covered webpack's multi-compiler mode. That might eventually go elsewhere.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>Pushed development plugins section to this chapter to improve balance between the chapters.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting" id="linting"></a><span class="text">Linting</span><a class="header-anchor-select" href="https://survivejs.com/#linting">#</a></h3>
<ul>
<li>Explained advanced ESLint configuration and how to pull that off with webpack.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#composing-configuration" id="composing-configuration"></a><span class="text">Composing Configuration</span><a class="header-anchor-select" href="https://survivejs.com/#composing-configuration">#</a></h3>
<ul>
<li>Dropped <code>env</code> discussion as that's covered earlier now.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#handling-styles" id="handling-styles"></a><span class="text">Handling Styles</span><a class="header-anchor-select" href="https://survivejs.com/#handling-styles">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#separating-css" id="separating-css"></a><span class="text">Separating CSS</span><a class="header-anchor-select" href="https://survivejs.com/#separating-css">#</a></h3>
<ul>
<li>Added autoprefixing setup. Now configuration is more flexible.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#eliminating-unused-css" id="eliminating-unused-css"></a><span class="text">Eliminating Unused CSS</span><a class="header-anchor-select" href="https://survivejs.com/#eliminating-unused-css">#</a></h3>
<ul>
<li>Ported the setup to <a href="http://npmjs.org/package/purifycss-webpack">purifycss-webpack</a> as I couldn't get rights to the old package on time. <em>purifycss-webpack-plugin</em> will be deprecated once npm makes its move.</li>
<li>Added a small section on a technique known as critical path rendering.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-loaders" id="understanding-loaders"></a><span class="text">Understanding Loaders</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-loaders">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loader-definitions" id="loader-definitions"></a><span class="text">Loader Definitions</span><a class="header-anchor-select" href="https://survivejs.com/#loader-definitions">#</a></h3>
<ul>
<li>Added a section on enforcing order.</li>
<li>Added a section on how to use functions with <code>use</code>.</li>
<li>Added a section on alternative matchers.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-images" id="loading-images"></a><span class="text">Loading Images</span><a class="header-anchor-select" href="https://survivejs.com/#loading-images">#</a></h3>
<ul>
<li>Showed how to integrate the techniques to the book project.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-fonts" id="loading-fonts"></a><span class="text">Loading Fonts</span><a class="header-anchor-select" href="https://survivejs.com/#loading-fonts">#</a></h3>
<ul>
<li>Integrated the Font Awesome setup to the project.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#source-maps" id="source-maps"></a><span class="text">Source Maps</span><a class="header-anchor-select" href="https://survivejs.com/#source-maps">#</a></h3>
<ul>
<li>Renamed the chapter and fixed a typo while at it.</li>
<li>Expanded the explanation of source maps greatly. Now you can see what kind of output webpack emits. During this process <a href="https://github.com/webpack/webpack/issues/4176">I found a bug</a> in a certain variant.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#processing-with-babel" id="processing-with-babel"></a><span class="text">Processing with Babel</span><a class="header-anchor-select" href="https://survivejs.com/#processing-with-babel">#</a></h3>
<ul>
<li>Added a section on how to enable Babel plugins and presets per environment.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#optimizing-build" id="optimizing-build"></a><span class="text">Optimizing Build</span><a class="header-anchor-select" href="https://survivejs.com/#optimizing-build">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying-build" id="minifying-build"></a><span class="text">Minifying Build</span><a class="header-anchor-select" href="https://survivejs.com/#minifying-build">#</a></h3>
<ul>
<li>Explained the idea of a performance budget in detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-environment-variables" id="setting-environment-variables"></a><span class="text">Setting Environment Variables</span><a class="header-anchor-select" href="https://survivejs.com/#setting-environment-variables">#</a></h3>
<ul>
<li>Showed how to choose a package based on environment.</li>
<li>Listed optimization related plugins.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#adding-hashes-to-filenames" id="adding-hashes-to-filenames"></a><span class="text">Adding Hashes to Filenames</span><a class="header-anchor-select" href="https://survivejs.com/#adding-hashes-to-filenames">#</a></h3>
<ul>
<li>Split into two chapters. Manifest has a chapter of its own now.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#extending-webpack" id="extending-webpack"></a><span class="text">Extending Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#extending-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#extending-webpack-with-plugins" id="extending-webpack-with-plugins"></a><span class="text">Extending Webpack with Plugins</span><a class="header-anchor-select" href="https://survivejs.com/#extending-webpack-with-plugins">#</a></h3>
<ul>
<li>New chapter based on <a href="https://github.com/webpack-contrib/purifycss-webpack">purifycss-webpack</a> plugin. It's a quick introduction to give initial idea on what's needed to write plugins. There's more to come.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#consuming-packages" id="consuming-packages"></a><span class="text">Consuming Packages</span><a class="header-anchor-select" href="https://survivejs.com/#consuming-packages">#</a></h3>
<ul>
<li>Explained how to deal with pre-built dependencies.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Explained how to make ESLint work with React as that was missing earlier.</li>
<li>Added <em>react-hot-loader</em> 3 setup and integrated it to the book project. There is no React HMR appendix anymore.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll focus on the smaller tweaks on my list first and get a silent release or two out there based on those. After that I will get the remaining chapters and appendices done. Especially the early part of the book will receive certain improvements that make it a little easier to approach.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the changes. As usual, feedback is welcome. I'm active at the <a href="https://gitter.im/survivejs/webpack">book Gitter channel</a> and you can reach me through it easily.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote>ajv - The Fastest JSON Schema Validator - Interview with Evgeny Poberezkinaajvthefastestjsonschemavalidatorinterviewwithevgenypoberezkin2017-01-23t00:00:00z2017-01-23T00:00:00Z<p>Describing what things are is an essential skill for a programmer. We might do that implicitly, but we often have to think about structure regardless. <a href="http://json-schema.org/">JSON Schema</a> is a specification that allows us to do this in a more formal manner.</p>
<p>Assuming you were creating a form, you could describe its fields and their details using a schema. Once you have a schema, you could generate the form and its validation based on that information.</p>
<p>The same idea applies to tools like <a href="https://webpack.js.org/">webpack</a>. There we use a JSON Schema to describe the configuration webpack expects. This way you can get a schema invalidation error over a cryptic runtime one which you would have to debug.</p>
<p>Underneath webpack uses a library known as Ajv by <a href="https://twitter.com/EPoberezkin">Evgeny Poberezkin</a> to handle validation. Read on to learn more about JSON Schema and the library itself.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/f0e97301983c1019d98740935009ab6e?s=200" alt="Evgeny Poberezkin" class="author" width="100" height="100" />
</span>
I've been interested in software since school. I've spent a big part of my life creating and managing businesses, only occasionally creating software for them. I've been coding full time for several years. Currently I lead the team of great software engineers at <a href="http://dailymail.co.uk">MailOnline</a> (and we are hiring!).
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-ajv-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-ajv-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Ajv</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-ajv-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/epoberezkin/ajv">Ajv</a> implements <a href="http://json-schema.org">JSON Schema</a> - a standard to describe and validate a JSON document using a schema. For example, the schema below describes an object that must have two properties: "first_name" and "last_name".</p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"type"</span><span class="token operator" >:</span> <span class="token string" >"object"</span><span class="token punctuation" >,</span>
<span class="token property" >"required"</span><span class="token operator" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >"first_name"</span><span class="token punctuation" >,</span> <span class="token string" >"last_name"</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token property" >"properties"</span><span class="token operator" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"first_name"</span><span class="token operator" >:</span> <span class="token punctuation brackets-braces" >{</span> <span class="token property" >"type"</span><span class="token operator" >:</span> <span class="token string" >"string"</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token property" >"last_name"</span><span class="token operator" >:</span> <span class="token punctuation brackets-braces" >{</span> <span class="token property" >"type"</span><span class="token operator" >:</span> <span class="token string" >"string"</span> <span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>To comply with the schema, you could write a definition like this:</p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
<span class="token property" >"first_name"</span><span class="token operator" >:</span> <span class="token string" >"John"</span><span class="token punctuation" >,</span>
<span class="token property" >"last_name"</span><span class="token operator" >:</span> <span class="token string" >"Doe"</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Assuming you provided a wrong type or failed to pass a required field to the schema, the validation step would fail. This way you can know for sure that your data is exactly the way you expect it to be. Beyond simple field definitions, you could describe how data relates to each other. Even more complex invariants are possible.</p>
<p>Ajv implements several extensions to JSON Schema specification (e.g., <a href="https://github.com/epoberezkin/ajv#data-reference">$data reference</a>) and allows users to define their own custom keywords. <a href="https://github.com/epoberezkin/ajv-keywords">ajv-keywords</a> defines several useful keywords, some of which will be included in the next versions of JSON Schema specification - <code>propertyNames</code> is included in draft-06 (soon to be published) and <code>if/then/else</code> is considered for draft-07.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-ajv-work-" id="how-does-ajv-work-"></a><span class="text">How does <em>Ajv</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-ajv-work-">#</a></h2>
<p>Ajv compiles JSON Schema into JavaScript - it generates the code used to validate user data against the constraints defined in the original JSON Schema (and creates a validation function using the <code>Function</code> constructor).</p>
<p>For example, use this code to compile the above schema to a validation function:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> Ajv <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'Ajv'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> ajv <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Ajv</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>allErrors<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Schema from the example above</span>
<span class="token keyword keyword-const" >const</span> validate <span class="token operator" >=</span> ajv<span class="token punctuation" >.</span><span class="token function" >compile</span><span class="token punctuation brackets-parentheses" >(</span>schema<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span>validate<span class="token punctuation" >.</span><span class="token function" >toString</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>The result of the compilation is a JavaScript function:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span>data <span class="token comment" spellcheck="true" >/*, ... */</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >'use strict'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> vErrors <span class="token operator" >=</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> errors <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>data <span class="token operator" >&&</span> <span class="token keyword keyword-typeof" >typeof</span> data <span class="token operator" >===</span> <span class="token string" >"object"</span> <span class="token operator" >&&</span> <span class="token operator" >!</span>Array<span class="token punctuation" >.</span><span class="token function" >isArray</span><span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation" >.</span>first_name <span class="token operator" >===</span> undefined<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> err <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> keyword<span class="token punctuation" >:</span> <span class="token string" >'required'</span> <span class="token comment" spellcheck="true" >/*, ... */</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>vErrors <span class="token operator" >===</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
vErrors <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>err<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
vErrors<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
errors<span class="token operator" >++</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-typeof" >typeof</span> data<span class="token punctuation" >.</span>first_name <span class="token operator" >!==</span> <span class="token string" >"string"</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> err <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> keyword<span class="token punctuation" >:</span> <span class="token string" >'type'</span> <span class="token comment" spellcheck="true" >/*, ... */</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>vErrors <span class="token operator" >===</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
vErrors <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>err<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
vErrors<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
errors<span class="token operator" >++</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation" >.</span>last_name <span class="token operator" >===</span> undefined<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> err <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> keyword<span class="token punctuation" >:</span> <span class="token string" >'required'</span> <span class="token comment" spellcheck="true" >/*, ... */</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>vErrors <span class="token operator" >===</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
vErrors <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>err<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
vErrors<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
errors<span class="token operator" >++</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-typeof" >typeof</span> data<span class="token punctuation" >.</span>last_name <span class="token operator" >!==</span> <span class="token string" >"string"</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> err <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> keyword<span class="token punctuation" >:</span> <span class="token string" >'type'</span> <span class="token comment" spellcheck="true" >/*, ... */</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>vErrors <span class="token operator" >===</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
vErrors <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>err<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
vErrors<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
errors<span class="token operator" >++</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> err <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span> keyword<span class="token punctuation" >:</span> <span class="token string" >'type'</span> <span class="token comment" spellcheck="true" >/*, ... */</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span> <span class="token punctuation brackets-parentheses" >(</span>vErrors <span class="token operator" >===</span> <span class="token keyword keyword-null" >null</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
vErrors <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>err<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-else" >else</span> <span class="token punctuation brackets-braces" >{</span>
vErrors<span class="token punctuation" >.</span><span class="token function" >push</span><span class="token punctuation brackets-parentheses" >(</span>err<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
errors<span class="token operator" >++</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
validate<span class="token punctuation" >.</span>errors <span class="token operator" >=</span> vErrors<span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> errors <span class="token operator" >===</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>The generated function performs validation against exactly the schema above without using the schema itself - all the keywords are translated into code.</p>
<p>The generated code is verbose. However, it is very efficient as it has no loops or function calls. The developer does not need to see the generated code to use it, so the size doesn't matter.</p>
<p>There are several other validators using the same approach - it allows to achieve more than 100 times performance of interpreting validators.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-ajv-differ-from-other-solutions-" id="how-does-ajv-differ-from-other-solutions-"></a><span class="text">How does <em>Ajv</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-ajv-differ-from-other-solutions-">#</a></h2>
<p>Ajv is the fastest JSON Schema validator - in <a href="https://github.com/pandastrike/jsck#benchmarks">some tests</a> it is almost 3 times faster than the nearest alternative.</p>
<p>Its main advantage is that it is the most standard-compliant JavaScript validator, particularly when it comes to resolving references between schemas - all other validators have <a href="https://github.com/epoberezkin/test-validators#most-failed-tests-related-to-ref">limited support of references</a>.</p>
<p>Ajv is also the most extensible validator - it allows to create custom validation keywords in <a href="https://github.com/epoberezkin/ajv/blob/master/CUSTOM.md">several different ways</a> and also has support of <a href="https://github.com/epoberezkin/ajv#asynchronous-validation">asynchronous validation</a> (when validation keywords make asynchronous calls). Users have managed to use this functionality to include the business logic validation into their schemas, that is often more manageable than having it in the code.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-ajv-" id="why-did-you-develop-ajv-"></a><span class="text">Why did you develop <em>Ajv</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-ajv-">#</a></h2>
<p>I was working on <a href="http://www.jsonscript.org">JSONScript</a> (a language for scripted server-side processing of existing endpoints and services). I needed a JSON Schema validator. However, all the existing validators were failing in some of my tests – tests that were expected to pass according to the JSON Schema specification.</p>
<p>Before Ajv I created <a href="https://github.com/epoberezkin/json-schema-consolidate">json-schema-consolidate</a> - a collection of adapters to many JavaScript validators to be able to switch between them easily without changing my code. I've learned a lot about the inner workings of the validators and I've found out that there was no validator as good as I needed. So I decided to create another JSON Schema validator.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>One of the problems in JSON Schema adoption is the lack of tools to test the schemas. From what I have observed, developers write only a handful of tests where validation passes and from these tests make a conclusion that their schemas are correct. Even an empty schema <code>{}</code> without any keywords would satisfy all passing tests!</p>
<p>The only way to thoroughly test JSON Schemas is to write tests when validation fails sufficient to cover all keywords used in the schema. But how "sufficient to cover" can be measured?</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-schemas" id="testing-schemas"></a><span class="text">Testing Schemas</span><a class="header-anchor-select" href="https://survivejs.com/#testing-schemas">#</a></h3>
<p>Given that Ajv compiles schemas to JavaScript functions, it is possible to measure <strong>code coverage</strong> of the schemas. The problem though is that the coverage reports are not very useful - it is not very easy to see JSON Schemas behind generated JavaScript code (as you can see in the earlier example).</p>
<p>I've started working on tools that allow to test schemas and generate code coverage reports. These packages can already be used:</p>
<ul>
<li><a href="https://github.com/MailOnline/json-schema-test">json-schema-test</a> - a package that was used in Ajv from the very beginning to execute platform independent tests that are written as JSON files in <a href="https://github.com/json-schema-org/JSON-Schema-Test-Suite">the same format</a> that JSON Schema specification uses. Although this format was created to test validators with very simple schemas it can be used to test schemas (assuming that the validator is working correctly).</li>
<li><a href="https://github.com/epoberezkin/ajv-istanbul">ajv-istanbul</a> - a package to instrument generated validation code to measure its code coverage.</li>
<li><a href="https://github.com/epoberezkin/json-source-map">json-source-map</a> - a package to parse/stringify JSON and to provide source-map for JSON-pointers to all nodes.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#current-work" id="current-work"></a><span class="text">Current Work</span><a class="header-anchor-select" href="https://survivejs.com/#current-work">#</a></h3>
<p>I am working on adding source maps to generated validation code (where the "source code" is JSON Schema itself) and on generating coverage reports for JSON Schemas. That would allow to test JSON Schemas using JSON files as test cases and measuring code coverage in a platform independent way.</p>
<p>It can be used for schemas used in any language. This assumes that the validator available in that language complies with the standard.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-ajv-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-ajv-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Ajv</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-ajv-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The next major version of Ajv will implement the next version of JSON Schema standard (draft-06) that should be published very soon. <a href="https://github.com/epoberezkin/ajv/tree/5.0.1-beta.1">Beta version</a> of Ajv that supports preliminary draft-06 specification is already available.</p>
<p>With JSON Schema coverage tool I described above it will be possible to use Ajv to help develop validators for other languages. I believe that JSON Schema specification still requires both some simplification and at the same time some additional features to make it more flexible and powerful.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#reactive-programming-explicit-and-implicit-graphs" id="reactive-programming-explicit-and-implicit-graphs"></a><span class="text">Reactive Programming - Explicit and Implicit Graphs</span><a class="header-anchor-select" href="https://survivejs.com/#reactive-programming-explicit-and-implicit-graphs">#</a></h3>
<p>Regarding the web, I think the most promising developments are happening in <strong>reactive programming</strong>. I think with React etc. we are only making the first steps. Reactive programming paradigm allows to define a graph connecting different parts of application data/state using some expressions/rules. There are two different approaches in defining such graphs - explicit and implicit.</p>
<p>In the explicit approach the graph is defined using some syntax connecting data structures (it is used in some libraries for JavaScript, e.g. <a href="https://github.com/milojs/milo">milojs</a>). In the implicit one, the observer pattern is used to translate messages to the changes in data/application state (e.g. React/Redux).</p>
<p>While the second approach is easier to implement and in some cases it allows to better manage some common reactive programming problems (glitches, cycles, mutable state, race conditions), the advantage of the first approach is that it allows to write code at a higher level of abstraction.</p>
<p>I think in the near future we will see new implementations of explicit approach to building data graph in JavaScript. It can be a library, syntax extensions or even a whole new language that allows to explicitly define data graph without worrying about internal mechanics of change propagation.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#abstraction-of-html-css" id="abstraction-of-html-css"></a><span class="text">Abstraction of HTML/CSS</span><a class="header-anchor-select" href="https://survivejs.com/#abstraction-of-html-css">#</a></h3>
<p>I also hope that we will either see some new web standard for defining UI in the browser that could supersede HTML/CSS or at the very least some mature libraries that abstract these details from the developer.</p>
<p>HTML/CSS that was created for hypertext documents seems very clunky when used for building UI. Although it keeps millions of web-developers busy, I think they could achieve much more with something more suitable for UI creation. Web components seem to be a step in that direction.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I think the most important thing is to understand the foundations of the technologies you are using - JavaScript features (closures, classes, prototypes, etc.), DOM API and node.js core packages, rather than limit your understanding to a particular library/framework APIs and conventions.</p>
<p>Firstly, because the foundational technologies have much longer life cycle than frameworks, so any time spent learning them is a long term investment. Secondly, because by understanding the foundation of the frameworks you use you can easily solve problems that these frameworks can't help you with.</p>
<p>I think it's important to be able to solve the problem by just writing code rather than only be able to glue together pieces created by other people - I see that a bit too often when developers try to avoid writing code manipulating some simple data structures.</p>
<p>It's also very important to be very critical, I'd even say skeptical, towards all new tools and libraries, particularly those that generate a lot of hype. Quite a few of them may spend more of your time than they promise to save. Some others may simply not be around in 3-5 years. So heavily relying on them should be a carefully made decision rather than a default choice.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think your readers could be interested to learn about <a href="https://github.com/MatAtBread/nodent">nodent</a> - <code>async</code>/<code>await</code> transpiler created by <a href="https://github.com/MatAtBread">Matt Woolf</a> that generates the fastest ES5 code. It's been tested with Ajv for asynchronous validation and I can say that it is much more performant and stable than the alternatives.</p>
<p>Also, I would be quite interested to read about the history and the future of Istanbul - code coverage library created by <a href="https://github.com/gotwarlost">Krishnan Anantheswaran</a>. This library revolutionised the way we write and test JavaScript code.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Evgeny! I've seen the power of schema many times and it feels like an underappreciated approach especially in front-end.</p>
<p>By relying on a standard, like JSON Schema, you simply eliminate a part of the work altogether and can focus on something more important. That said, there are always cases a standard won't cover, but regardless I would recommend studying the idea of schemas.</p>
<p>There are several tutorials about JSON Schema, e.g. a <a href="https://spacetelescope.github.io/understanding-json-schema/">very good guide</a> for schema authors by the Space Telescope Science Institute. Evgeny has also written a <a href="https://code.tutsplus.com/tutorials/validating-data-with-json-schema-part-1--cms-25343">tutorial about JSON Schema</a> that is available on tuts+. <a href="https://epoberezkin.github.io/ajv/">The site of Ajv</a> is worth studying and you can <a href="https://github.com/epoberezkin/ajv">find the project on GitHub</a>.</p>
SurviveJS - Webpack - v1.6.0asurvivejswebpackv1602017-01-19t00:00:00z2017-01-19T00:00:00Z<p>You might have noticed that <a href="https://medium.com/webpack/webpack-2-2-the-final-release-76c3d43bf144">webpack 2 reached a final release</a>. That means it's a good time to update this book as well. Even though it's mostly a maintenance release, there's some new content in store.</p>
<p>Compared to <a href="https://survivejs.com/survivejs-webpack-150">the previous release</a> this one feels more solid and should be a little easier to approach. A lot of grammatical issues were eliminated in addition to other tweaks. This work is a part of the hardening required for a paper release.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>When I started working on the book again, I had roughly three hundred issues on my list to tackle. Roughly 40 remains. The current content requires certain minor tweaks. Also a couple of new chapters are required. After that we are good to go with the milestone release.</p>
<p>This time around my special thanks go to <a href="https://github.com/jeggett">Alexander Zaytsev</a> for his awesome feedback on the content that allowed me to push it further. Thanks Alexander!</p>
<p>The next release might be the last before the book reaches 2.0. It's not too late to contribute specific ideas on what to cover at the book. <a href="https://github.com/survivejs/webpack/issues">Open issues</a> as you see fit. You can also <a href="https://gitter.im/survivejs/webpack">reach me through Gitter</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-6-0" id="book-improvements-1-6-0"></a><span class="text">Book Improvements - <code>1.6.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-6-0">#</a></h2>
<p>In total 118 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.5.0...v1.6.0">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<p>This time around I made a couple of "silent" releases (no notification on Leanpub) to get smaller fixes in. I will likely continue this habit as it's more in line with the way I like to work and publish.</p>
<p>Structurally the biggest change was pushing the configuration splitting chapter at the end of its part. Earlier it was too early and you understand the idea better after you experience some of the pain the approach solves.</p>
<p>I had a pair of non-technical editors go through the content. This alone lead to hundreds of little fixes all around the content. You won't notice most of them, but I feel it contributes towards the overall quality. It's impossible for me to fix the paper book so it's better to do this now.</p>
<p>Unlike the general JavaScript convention, the book uses trailing commas in its book examples now. This lead to one big benefit - simplified code diffs. Instead of having to remove and add code, I can often only add code now. This eliminated some redundant code from the book making room for more content in the paper release.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>This chapter is right after the <a href="https://survivejs.com/webpack/developing/getting-started/">Getting Started</a> one now. The splitting idea is covered at the end of the part. The flow of the book feels better this way and it should be easier for beginners to pick up.</li>
<li>The chapter has been largely redeveloped. Especially <code>--env</code> fits the whole better now.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-hot-module-replacement" id="configuring-hot-module-replacement"></a><span class="text">Configuring Hot Module Replacement</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-hot-module-replacement">#</a></h3>
<ul>
<li>Listed some of the features of webpack-dev-server that weren't mentioned earlier. At least this way you know what it's capable of.</li>
<li>Added a screenshot to clarify the idea.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-javascript" id="linting-javascript"></a><span class="text">Linting JavaScript</span><a class="header-anchor-select" href="https://survivejs.com/#linting-javascript">#</a></h3>
<ul>
<li>Restructured ESLint tips so they are easier to access.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/prettier">Prettier</a> and <a href="https://github.com/danger/danger-js">Danger</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-configuration" id="splitting-configuration"></a><span class="text">Splitting Configuration</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-configuration">#</a></h3>
<ul>
<li>This chapter is largely the same as before except this time around you can see better the difference the approach makes.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#handling-styles" id="handling-styles"></a><span class="text">Handling Styles</span><a class="header-anchor-select" href="https://survivejs.com/#handling-styles">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-styles" id="loading-styles"></a><span class="text">Loading Styles</span><a class="header-anchor-select" href="https://survivejs.com/#loading-styles">#</a></h3>
<ul>
<li>Rewrote PostCSS approach to use <code>options</code>.</li>
<li>Pushed the import tilde idea to a single section to simplify further.</li>
<li>Added sections on sourcemaps, Bootstrap, and converting CSS to a string (Angular).</li>
<li>Improved the quality of the images.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#separating-css" id="separating-css"></a><span class="text">Separating CSS</span><a class="header-anchor-select" href="https://survivejs.com/#separating-css">#</a></h3>
<ul>
<li>Added a section on how to maintain CSS outside of JavaScript.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-css" id="linting-css"></a><span class="text">Linting CSS</span><a class="header-anchor-select" href="https://survivejs.com/#linting-css">#</a></h3>
<ul>
<li>Ported PostCSS to <code>options</code> based scheme to encapsulate the idea better.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-loaders" id="understanding-loaders"></a><span class="text">Understanding Loaders</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-loaders">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loader-definitions" id="loader-definitions"></a><span class="text">Loader Definitions</span><a class="header-anchor-select" href="https://survivejs.com/#loader-definitions">#</a></h3>
<ul>
<li>Added more detail to the main example.</li>
<li>Discussed inline definitions in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-fonts" id="loading-fonts"></a><span class="text">Loading Fonts</span><a class="header-anchor-select" href="https://survivejs.com/#loading-fonts">#</a></h3>
<ul>
<li>Simplified a notch while adding a better example for Font Awesome.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#writing-loaders" id="writing-loaders"></a><span class="text">Writing Loaders</span><a class="header-anchor-select" href="https://survivejs.com/#writing-loaders">#</a></h3>
<ul>
<li>Explained the idea of pitch loaders.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-bundles" id="splitting-bundles"></a><span class="text">Splitting Bundles</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-bundles">#</a></h3>
<ul>
<li>Expanded on the basic ideas and especially <code>CommonsChunkPlugin</code>.</li>
<li>Added a section on chunk merging and splitting.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#code-splitting" id="code-splitting"></a><span class="text">Code Splitting</span><a class="header-anchor-select" href="https://survivejs.com/#code-splitting">#</a></h3>
<ul>
<li>Added more examples and related patterns.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#processing-with-babel" id="processing-with-babel"></a><span class="text">Processing with Babel</span><a class="header-anchor-select" href="https://survivejs.com/#processing-with-babel">#</a></h3>
<ul>
<li>Added sections on TypeScript and Flow and explained them in greater detail than earlier.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hosting-on-github-pages" id="hosting-on-github-pages"></a><span class="text">Hosting on GitHub Pages</span><a class="header-anchor-select" href="https://survivejs.com/#hosting-on-github-pages">#</a></h3>
<ul>
<li>Added an example of how to resolve <code>publicPath</code> dynamically.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#optimizing-build" id="optimizing-build"></a><span class="text">Optimizing Build</span><a class="header-anchor-select" href="https://survivejs.com/#optimizing-build">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying" id="minifying"></a><span class="text">Minifying</span><a class="header-anchor-select" href="https://survivejs.com/#minifying">#</a></h3>
<ul>
<li>Explained the basic idea of tree shaking with a small demonstration.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#adding-hashes-to-filenames" id="adding-hashes-to-filenames"></a><span class="text">Adding Hashes to Filenames</span><a class="header-anchor-select" href="https://survivejs.com/#adding-hashes-to-filenames">#</a></h3>
<ul>
<li>Explained the idea of records and why/how to use them.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#consuming-packages" id="consuming-packages"></a><span class="text">Consuming Packages</span><a class="header-anchor-select" href="https://survivejs.com/#consuming-packages">#</a></h3>
<ul>
<li>Added a section on how to deal with globals, like jQuery, using webpack as this is a common problem.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Added a React specific code splitting example.</li>
<li>Pushed TypeScript and Flow bits to the Babel chapter as those fit below compiling topic.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll continue on my task list. I don't expect the current content will change a lot. It's possible the <em>Writing Loaders</em> chapter will go to a part with a similar chapter for plugins and I have <a href="https://github.com/webpack-contrib/purifycss-webpack-plugin">prepared a plugin example</a> for the chapter already. The plugin will eventually replace the current Purify plugin of the book.</p>
<p>I expect the next release has at least a couple of more chapters to make the book complete enough for a paper release.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the new version. There were quite a few smaller changes that I didn't cover, but it's up to you to discover those.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote>isomorphic-webpack - Universal module consumption using webpack - Interview with Gajus Kuizinasaisomorphicwebpackuniversalmoduleconsumptionusingwebpackinterviewwithgajuskuizinas2017-01-10t00:00:00z2017-01-10T00:00:00Z<p>A lot of people see isomorphic rendering as a holy grail given it gives advantages a SPAs lost compared to earlier solutions. The fact that you can provide initial markup has SEO and performance implications. It is a hard problem, though, as your tooling needs to support the approach well.</p>
<p>In this interview we'll discuss a solution known as <a href="https://github.com/gajus/isomorphic-webpack">isomorphic-webpack</a> by <a href="https://twitter.com/kuizinas">Gajus Kuizinas</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://pbs.twimg.com/profile_images/796004738273865728/qRcdB4kf.jpg" alt="Gajus Kuizinas" class="author" width="100" height="100" />
</span>
My name is Gajus Kuizinas. I am a consultant software engineer, living in London. I advise companies on the subject of the software architecture, database design and DevOps. When not at work, I am spending a considerable amount of time contributing to the open-source.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-isomorphic-webpack-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-isomorphic-webpack-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>isomorphic-webpack</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-isomorphic-webpack-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It is a program that makes an application written for browser consumption render on the server-side.</p>
<p>Rendering an application server-side enables advanced page generation techniques (e.g. using <a href="https://www.w3.org/TR/esi-lang">ESI</a>), critical rendering path optimization and it maintains the idea on which the internet was built – that pages are documents, and if you ask server for a document by URL, you get back the text of the document rather than a program that generates the document.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-isomorphic-webpack-work-" id="how-does-isomorphic-webpack-work-"></a><span class="text">How does <em>isomorphic-webpack</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-isomorphic-webpack-work-">#</a></h2>
<p>For the most part, <em>isomorphic-webpack</em> is an abstraction of the webpack API. isomorphic-webpack configures a new webpack compiler and sets it into a <code>watch</code> mode. Since it is simply another webpack instance, the configuration can be shared between client-side and server-side.</p>
<p>However, isomorphic-webpack clones the configuration and makes a few amendments, e.g. for performance purposes, the isomorphic-webpack's webpack compiler instance is using in-memory file system, a <a href="https://github.com/webpack/docs/wiki/list-of-plugins#dllplugin"><code>DllPlugin</code></a> plugin is added, and by default all dependencies are externalized.</p>
<p>The <code>DllPlugin</code> changes the behaviour of the webpack compiler. When using the <code>DllPlugin</code> plugin, the resulting script bundle does not self-invoke. Instead, the resulting script bundle exports a function which can be used to <code>require</code> modules.</p>
<p>webpack compiles the bundle and writes the resulting files to the in-memory file system. isomorphic-webpack then evaluates the resulting bundle using Node.js <a href="https://nodejs.org/api/vm.html">vm</a> module. The V8 virtual machine is created using a context that emulates the browser environment.</p>
<p>To be specific, <code>window</code> and <code>document</code> objects are created using <a href="https://github.com/tmpvar/jsdom">jsdom</a>. These objects are required by various loaders and dependencies, e.g. <a href="https://github.com/webpack/style-loader">style-loader</a> requires access to <code>document</code>, <a href="https://github.com/mjackson/history">history</a> requires access to <code>window.history</code>, etc.</p>
<p>To access the code, isomorphic-webpack overrides Node.js module resolution logic using <a href="https://github.com/gajus/override-require">override-require</a>. <code>require()</code> queries that match an entry in the manifest file (generated by the <code>DllPlugin</code>) are mapped to an entry in the resulting bundle, other requests are delegated to the native Node.js module loading system.</p>
<p>This is how when you <code>require('./app')</code> we are able to render the entire application as if that code was executed in the browser.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-it-take-to-make-an-existing-webpack-application-isomorphic-using-isomorphic-webpack-" id="what-does-it-take-to-make-an-existing-webpack-application-isomorphic-using-isomorphic-webpack-"></a><span class="text">What does it take to make an existing <em>webpack</em> application isomorphic using <strong>isomorphic-webpack</strong>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-it-take-to-make-an-existing-webpack-application-isomorphic-using-isomorphic-webpack-">#</a></h2>
<p>Suppose that this is your existing webpack application:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> express <span class="token keyword keyword-from" >from</span> <span class="token string" >'express'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> webpack <span class="token keyword keyword-from" >from</span> <span class="token string" >'webpack'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> webpackDevMiddleware <span class="token keyword keyword-from" >from</span> <span class="token string" >'webpack-dev-middleware'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> webpackConfiguration <span class="token keyword keyword-from" >from</span> <span class="token string" >'../webpack.configuration'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> compiler <span class="token operator" >=</span> <span class="token function" >webpack</span><span class="token punctuation brackets-parentheses" >(</span>webpackConfiguration<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> app <span class="token operator" >=</span> <span class="token function" >express</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >webpackDevMiddleware</span><span class="token punctuation brackets-parentheses" >(</span>compiler<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'/'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> `
<span class="token operator" ><</span><span class="token operator" >!</span>doctype html<span class="token operator" >></span>
<span class="token operator" ><</span>html<span class="token operator" >></span>
<span class="token operator" ><</span>head<span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>head<span class="token operator" >></span>
<span class="token operator" ><</span>body<span class="token operator" >></span>
<span class="token operator" ><</span>div id<span class="token operator" >=</span><span class="token string" >'app'</span><span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token operator" ><</span>script src<span class="token operator" >=</span><span class="token string" >'/static/app.js'</span><span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>script<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>body<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>html<span class="token operator" >></span>
`<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token function" >listen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >8000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>It doesn't matter whats in the <em>webpack.configuration.js</em>, because the same configuration is used for client- and server-side.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Note: webpack-dev-middleware is not a dependency of isomorphic-webpack. It is used here to deliver the client-side bundle.</blockquote><p>To make the above webpack server render the application server-side, all you need is to create isomorphic-webpack compiler and render the application using <code>react-dom/server</code>:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> express <span class="token keyword keyword-from" >from</span> <span class="token string" >'express'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> webpack <span class="token keyword keyword-from" >from</span> <span class="token string" >'webpack'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> webpackDevMiddleware <span class="token keyword keyword-from" >from</span> <span class="token string" >'webpack-dev-middleware'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span>
createIsomorphicWebpack
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'isomorphic-webpack'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span>
renderToString
<span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'react-dom/server'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> webpackConfiguration <span class="token keyword keyword-from" >from</span> <span class="token string" >'../webpack.configuration'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> compiler <span class="token operator" >=</span> <span class="token function" >webpack</span><span class="token punctuation brackets-parentheses" >(</span>webpackConfiguration<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> app <span class="token operator" >=</span> <span class="token function" >express</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >webpackDevMiddleware</span><span class="token punctuation brackets-parentheses" >(</span>compiler<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >createIsomorphicWebpack</span><span class="token punctuation brackets-parentheses" >(</span>webpackConfiguration<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'/'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> `
<span class="token operator" ><</span><span class="token operator" >!</span>doctype html<span class="token operator" >></span>
<span class="token operator" ><</span>html<span class="token operator" >></span>
<span class="token operator" ><</span>head<span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>head<span class="token operator" >></span>
<span class="token operator" ><</span>body<span class="token operator" >></span>
<span class="token operator" ><</span>div id<span class="token operator" >=</span><span class="token string" >'app'</span><span class="token operator" >></span>
$<span class="token punctuation brackets-braces" >{</span><span class="token function" >renderToString</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'../app'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token keyword keyword-default" >default</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>div<span class="token operator" >></span>
<span class="token operator" ><</span>script src<span class="token operator" >=</span><span class="token string" >'/static/app.js'</span><span class="token operator" >></span><span class="token operator" ><</span><span class="token operator" >/</span>script<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>body<span class="token operator" >></span>
<span class="token operator" ><</span><span class="token operator" >/</span>html<span class="token operator" >></span>
`<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token function" >listen</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >8000</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-isomorphic-webpack-differ-from-other-solutions-" id="how-does-isomorphic-webpack-differ-from-other-solutions-"></a><span class="text">How does <em>isomorphic-webpack</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-isomorphic-webpack-differ-from-other-solutions-">#</a></h2>
<p>I have added a <a href="https://github.com/gajus/isomorphic-webpack#what-makes-isomorphic-webpack-different-from-webpack-isomorphic-tools-universal-webpack-">comparison table</a> to the main repository. The key difference is that <code>isomorphic-webpack</code> does not require a separate configuration for client- and server-side code and all <code>webpack</code> loaders and dependencies work out of the box.</p>
<p>The latter is an important condition: a true universal code base requires that the same code works across different platforms. If you start adding platform specific conditions to make the code work, it is no longer a universal code base.</p>
<p>It is the responsibility of the program running the code to enable isomorphism. In that sense, isomorphic-webpack is the only tool that enables re-use of the code base between client- and server-side without making modifications to the application code base.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-isomorphic-webpack-" id="why-did-you-develop-isomorphic-webpack-"></a><span class="text">Why did you develop <em>isomorphic-webpack</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-isomorphic-webpack-">#</a></h2>
<p>I am consulting a company that utilise <a href="https://en.wikipedia.org/wiki/Edge_Side_Includes">Edge Side Includes</a> (ESI) to construct the page content. This company is migrating from a mixed bag of programming languages to JavaScript for client- and server-side development.</p>
<p>This was a unique challenge: I was working as part of a larger frontend team; the code will need to be maintained by the frontend team. Therefore, my focus has been to use frameworks known to frontend teams and avoid backend specific frameworks as much as possible. I have proceeded to develop the application using React and webpack.</p>
<p>I have had the application up and running client-side, but there was one problem – none of the existing isomorphic-rendering solutions worked out of the box with the code base. The existing solutions required obscure configuration, ran multiple Node processes (making it a pain to containerise the application), and didn’t work with all of the webpack loaders the project was using.</p>
<p>I have started with a project specific implementation. I have learned about the webpack API and progressed to develop a re-usable abstraction.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#whats-next-for-isomorphic-webpack-" id="whats-next-for-isomorphic-webpack-"></a><span class="text">Whats next for <em>isomorphic-webpack</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#whats-next-for-isomorphic-webpack-">#</a></h2>
<p>My priority is for isomorphic-webpack to pass the <a href="https://blog.codinghorror.com/rule-of-three/">rule of three</a>. I have approached a number of developers in senior positions at various companies asking for feedback and offering my help working with isomorphic-webpack. I am going to develop the project by responding to the real-life use cases arising from the wider project adoption.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-web-development-future-look-like-in-general-can-you-see-any-particular-trends-" id="what-does-the-web-development-future-look-like-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the web development future look like in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-web-development-future-look-like-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I am seeing an increasing reliance on open-source projects and focus on a better developer experience (DX). JavaScript in particular has a thriving open-source module ecosystem with an avg. growth of 423 packages per day. This is an astonishing number, far ahead of the closest alternatives (2nd, Maven Central (Java) – 172/ day, 3rd Packagist (PHP) – 109/day). (Statistics from <a href="http://www.modulecounts.com/">http://www.modulecounts.com/</a>.)</p>
<p>Behind these numbers there hides the good and the bad: the good is that there are more developers that are willing to share their code with the community. The bad is that there are a lot of packages that perform the same function. For example, there are <a href="https://github.com/gajus/sister#similar-libraries">over 100 packages</a> that implement an "event emitter" pattern! In addition, you can find many low quality packages, as well as a lot of abandoned packages.</p>
<p>I hope to see more collaboration in the open-source world, more community driven development and maintenance of the existing projects.</p>
<p>Furthermore, JavaScript has a growing number of projects focused on the developer experience, e.g. webpack enables <a href="https://survivejs.com/webpack/appendices/hmr/">Hot Module Replacement (HMR)</a>, <a href="https://github.com/storybooks/react-storybook">react-storybook</a> sandboxes UI component development and <a href="https://github.com/gaearon/redux-devtools">redux-devtools</a> enables inspection of Redux application state, just to name a few.</p>
<p>This is super important – after all, good DX is what "recruits" the new talents, it is what makes companies to adopt the language. However, I'd like to see a wider adoption of strict code styles, usage of immutable constructs and strict-type checking.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Avoid learning theory. Focus on building small programs. Learn as you iterate. Enjoy.</p>
<p>I am seeing so many developers who are learning theory by heart without applying it. Its just not right. You need to enjoy the learning process. A simple way to enjoy whatever you are doing is to observe the results. A simple way to observe the results is to start small ("Hello, World!"), iterate adding new features and researching theory as you proceed. Make your code open-source, promote it, seek feedback. I do this every day.</p>
<p>When I just started learning JavaScript, I have created a profile on a popular freelancing website. I have sought for small projects. Specifically, I was looking for: small scale, not time-sensitive projects with an existing technical leader.</p>
<p>I would contact the author and introduce myself as a "good overall developer with experience in XYZ, but no experience in JavaScript". I offered to deliver their project at a friction of the price at an agreed time frame. This was never about money. This was about me creating a product that someone will use, making connections, getting feedback from the professionals and learning from the real-life requirements.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Evgeny Poberezkin. He is doing revolutionary work in the JSON domain. His package <a href="https://github.com/epoberezkin/ajv">Ajv</a> is becoming an industry-wide standard for validating JSON schemes. Furthermore, I know that he is working on new and exciting things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Gajus! It's more often than not that a package of yours finds its way to one of my projects. And isomorphic-webpack is definitely looking like a fresh approach.</p>
<p>Check out <a href="https://github.com/gajus/isomorphic-webpack">isomorphic-webpack on GitHub</a> or read Gajus' <a href="https://medium.com/@gajus/developing-isomorphic-applications-using-webpack-eca814a418ad">step-by-step article on how to turn an existing application into an isomorphic one</a> to learn more.</p>
SurviveJS - Webpack - v1.5.0asurvivejswebpackv1502017-01-03t00:00:00z2017-01-03T00:00:00Z<p>New year, new chance to write. <a href="https://survivejs.com/survivejs-webpack-142">The previous release</a> put the writing gear back on and it's time to continue. This time around there are quite a big changes in the content and it's starting to feel more and more something worth publishing in a paper format.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you aren't interested in what has changed, <a href="https://survivejs.com/webpack/preface">skip straight to the book</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>You could say the last few weeks were intense. As usual, I started working through my list of things to resolve. The effort escalated fairly fast and I ended up restructuring the entire book to make it easier to handle.</p>
<p>I've noticed my sweet spot for a chapter length is between 1-3k words and I've structured the book accordingly. So the chapters are shorter, but also more focused. And they have been split over more parts.</p>
<p>I want to give my special thanks to <a href="https://twitter.com/sapegin">Artem Sapegin</a> for motivating quite a few changes. I take feedback seriously and it's great to push the book forward especially as you see it going improving.</p>
<p>There's still work left to do, but now that the structure feels solid enough, I can focus more and more on content instead of editing.</p>
<p>If you have specific ideas on what to cover at the book, <a href="https://github.com/survivejs/webpack/issues">open an issue</a>. That will give me a better idea. You can also <a href="https://gitter.im/survivejs/webpack">reach me through Gitter</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-5-0" id="book-improvements-1-5-0"></a><span class="text">Book Improvements - <code>1.5.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-5-0">#</a></h2>
<p>In total 234 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.4.2...v1.5.0">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h2>
<ul>
<li>Added <a href="http://requirejs.org/">RequireJS</a> as it's worth mentioning due to its contribution. Now the AMD module format discussion is here too due to this.</li>
<li>Explained how to use npm as a task runner.</li>
<li>Split most of the webpack bits to a chapter of its own as this chapter started feeling too long.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-webpack-" id="why-webpack-"></a><span class="text">Why Webpack?</span><a class="header-anchor-select" href="https://survivejs.com/#why-webpack-">#</a></h2>
<ul>
<li>New chapter based on the old <em>Webpack Compared</em> information.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-started" id="getting-started"></a><span class="text">Getting Started</span><a class="header-anchor-select" href="https://survivejs.com/#getting-started">#</a></h3>
<ul>
<li>Ported modules to ES6 format given webpack 2 supports that out of the box.</li>
<li>Added a section about useful <em>html-webpack-plugin</em> extensions.</li>
<li>Added a section about useful development plugins.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-configuration" id="splitting-configuration"></a><span class="text">Splitting Configuration</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-configuration">#</a></h3>
<ul>
<li>Explained <code>--env</code> behavior in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>Simplified greatly as I realized it's possible to split this into two chapters.</li>
<li>Added a section about how to make module ids more debuggable.</li>
<li>Added a section about how to make it faster to develop configuration using nodemon.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-hot-module-replacement" id="configuring-hot-module-replacement"></a><span class="text">Configuring Hot Module Replacement</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-hot-module-replacement">#</a></h3>
<ul>
<li>New chapter focused on Hot Module Replacement (HMR). Now you actually implement the client-side interface to get the idea better.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-javascript" id="linting-javascript"></a><span class="text">Linting JavaScript</span><a class="header-anchor-select" href="https://survivejs.com/#linting-javascript">#</a></h3>
<ul>
<li>The earlier linting bits are an early chapter now. You will integrate ESLint to the project early on. I split up a couple of appendices from here to keep this to the point.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#handling-styles-with-webpack" id="handling-styles-with-webpack"></a><span class="text">Handling Styles with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#handling-styles-with-webpack">#</a></h2>
<ul>
<li>This new part encapsulates all styling related concerns. Earlier they were split around the book and there was some duplication. This move allowed me to simplify things quite a bit.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-styles" id="loading-styles"></a><span class="text">Loading Styles</span><a class="header-anchor-select" href="https://survivejs.com/#loading-styles">#</a></h3>
<ul>
<li>This is the old style chapter renamed and slightly expanded.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#separating-css" id="separating-css"></a><span class="text">Separating CSS</span><a class="header-anchor-select" href="https://survivejs.com/#separating-css">#</a></h3>
<ul>
<li>This is the old separating chapter renamed.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#eliminating-unused-css" id="eliminating-unused-css"></a><span class="text">Eliminating Unused CSS</span><a class="header-anchor-select" href="https://survivejs.com/#eliminating-unused-css">#</a></h3>
<ul>
<li>There was a little glitch in the old setup that has been fixed now. The purify interface is more flexible now as well.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-css" id="linting-css"></a><span class="text">Linting CSS</span><a class="header-anchor-select" href="https://survivejs.com/#linting-css">#</a></h3>
<ul>
<li>Earlier this was a part of the generic linting chapter, but now it's focused chapter of its own.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-loaders" id="understanding-loaders"></a><span class="text">Understanding Loaders</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-loaders">#</a></h2>
<ul>
<li>This part replaces the old asset one.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loader-definitions" id="loader-definitions"></a><span class="text">Loader Definitions</span><a class="header-anchor-select" href="https://survivejs.com/#loader-definitions">#</a></h3>
<ul>
<li>This chapter replaces the old loader definition one. The supported formats chapter was assimilated by others and disappeared entirely.</li>
<li>Tweaked based on a couple of tips by Tobias so you can see the idea behind the design better.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-images" id="loading-images"></a><span class="text">Loading Images</span><a class="header-anchor-select" href="https://survivejs.com/#loading-images">#</a></h3>
<ul>
<li>Added a tip about dynamic imports.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-fonts" id="loading-fonts"></a><span class="text">Loading Fonts</span><a class="header-anchor-select" href="https://survivejs.com/#loading-fonts">#</a></h3>
<ul>
<li>Added a section about Font Awesome.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#writing-loaders" id="writing-loaders"></a><span class="text">Writing Loaders</span><a class="header-anchor-select" href="https://survivejs.com/#writing-loaders">#</a></h3>
<ul>
<li>Moved to this new part as it felt like the right place for the chapter for now.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<ul>
<li>Earlier this part was too big so it has been split into a few more focused ones.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#enabling-sourcemaps" id="enabling-sourcemaps"></a><span class="text">Enabling Sourcemaps</span><a class="header-anchor-select" href="https://survivejs.com/#enabling-sourcemaps">#</a></h3>
<ul>
<li>This is the old chapter with a few clarifications here and there. I'm still not completely happy about it and it needs more examples, but those are good goals for the next releases.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-bundles" id="splitting-bundles"></a><span class="text">Splitting Bundles</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-bundles">#</a></h3>
<ul>
<li>No major changes were made to bundle splitting.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#code-splitting" id="code-splitting"></a><span class="text">Code Splitting</span><a class="header-anchor-select" href="https://survivejs.com/#code-splitting">#</a></h3>
<ul>
<li>Earlier code splitting was explained far too late. Now it's a part of the main content and you can see the idea better.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#processing-with-babel" id="processing-with-babel"></a><span class="text">Processing with Babel</span><a class="header-anchor-select" href="https://survivejs.com/#processing-with-babel">#</a></h3>
<ul>
<li>I realized I had to add a chapter focused on Babel as the information was split around the book. I gathered it here and show how to process the source through Babel. It might be interesting to do a similar chapter for TypeScript if there is interest.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#cleaning-the-build" id="cleaning-the-build"></a><span class="text">Cleaning the Build</span><a class="header-anchor-select" href="https://survivejs.com/#cleaning-the-build">#</a></h3>
<ul>
<li>This is the same old chapter more or less.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hosting-on-github-pages" id="hosting-on-github-pages"></a><span class="text">Hosting on GitHub Pages</span><a class="header-anchor-select" href="https://survivejs.com/#hosting-on-github-pages">#</a></h3>
<ul>
<li>Added a few deployment tips including how to get archives and what other systems exist.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#optimizing-build" id="optimizing-build"></a><span class="text">Optimizing Build</span><a class="header-anchor-select" href="https://survivejs.com/#optimizing-build">#</a></h2>
<ul>
<li>This is a new part focused on build optimization.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying-the-build" id="minifying-the-build"></a><span class="text">Minifying the Build</span><a class="header-anchor-select" href="https://survivejs.com/#minifying-the-build">#</a></h3>
<ul>
<li>No major changes were required.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-environment-variables" id="setting-environment-variables"></a><span class="text">Setting Environment Variables</span><a class="header-anchor-select" href="https://survivejs.com/#setting-environment-variables">#</a></h3>
<ul>
<li>Minor cleanup to illustrate the idea better.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#adding-hashes-to-filenames" id="adding-hashes-to-filenames"></a><span class="text">Adding Hashes to Filenames</span><a class="header-anchor-select" href="https://survivejs.com/#adding-hashes-to-filenames">#</a></h3>
<ul>
<li>I pushed all the hashing related bits here. Better than splitting the ideas over the book. Now you get the changes in a single place.</li>
<li>Explained manifest related ideas in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#analyzing-build-statistics" id="analyzing-build-statistics"></a><span class="text">Analyzing Build Statistics</span><a class="header-anchor-select" href="https://survivejs.com/#analyzing-build-statistics">#</a></h3>
<ul>
<li>Added more analysis tools.</li>
<li>Added graphics to go with the tools.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#consuming-packages" id="consuming-packages"></a><span class="text">Consuming Packages</span><a class="header-anchor-select" href="https://survivejs.com/#consuming-packages">#</a></h3>
<ul>
<li>It felt like the package authoring chapter did too much so I ended up splitting it into two chapters. This gave me a good chance to discuss ideas like aliasing.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-packages" id="authoring-packages"></a><span class="text">Authoring Packages</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-packages">#</a></h3>
<ul>
<li>I did minor cleanup here and the chapter is lighter now that it doesn't have to cover as much ground as before.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Given there's a Babel chapter now, this one doesn't need to discuss Babel in great detail anymore. The HMR bit went to an appendix to keep this more focused.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#appendices" id="appendices"></a><span class="text">Appendices</span><a class="header-anchor-select" href="https://survivejs.com/#appendices">#</a></h2>
<ul>
<li>Since it started to feel that certain content is secondary, it made sense to push it to appendices.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#searching-with-react" id="searching-with-react"></a><span class="text">Searching with React</span><a class="header-anchor-select" href="https://survivejs.com/#searching-with-react">#</a></h3>
<ul>
<li>The old code splitting example fit an appendix well.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-hot-module-replacement-with-react" id="configuring-hot-module-replacement-with-react"></a><span class="text">Configuring Hot Module Replacement with React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-hot-module-replacement-with-react">#</a></h3>
<ul>
<li>This felt like a good appendix. I need to revisit this one to show how to handle react-hot-loader 3 beta.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#writing-eslint-plugins" id="writing-eslint-plugins"></a><span class="text">Writing ESLint Plugins</span><a class="header-anchor-select" href="https://survivejs.com/#writing-eslint-plugins">#</a></h3>
<ul>
<li>Another good appendix. Writing ESLint plugins went past the book focus so it fit into an appendix.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#customizing-eslint" id="customizing-eslint"></a><span class="text">Customizing ESLint</span><a class="header-anchor-select" href="https://survivejs.com/#customizing-eslint">#</a></h3>
<ul>
<li>ESLint customization was another topic like that.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I still have quite a few smaller tasks to dig through before I am willing to call this 2.0. I have a feeling the current restructuring will pay off nicely in the coming weeks. There are a couple of chapters to write and content to tune.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>The current version of the book is beginning to feel solid to me. I'm starting to find a writing style I like and it's easier to spot what works than earlier. Keep the feedback coming as I can put it to good use.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote>Styletron - Universal, high-performance JavaScript styles - Interview with Ryan Tsaoastyletronuniversalhighperformancejavascriptstylesinterviewwithryantsao2016-12-26t00:00:00z2016-12-26T00:00:00Z<p>Styling is one of those topics that's under flux. My <a href="https://survivejs.com/react/advanced-techniques/styling-react/">React styling chapter</a> alone covers quite a few approaches and <a href="https://github.com/MicheleBertoli/css-in-js">Michele Bertoli's list</a> has a lot more.</p>
<p>There was <a href="https://survivejs.com/blog/glamor-interview">an interview on glamor</a> earlier. It's time to continue on the theme and check out a solution known as <a href="http://styletron.js.org/">Styletron</a> by <a href="https://twitter.com/rtsao">Ryan Tsao</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/73f8205a10da6e826075fdaa42201055?s=200" alt="Ryan Tsao" class="author" width="100" height="100" />
</span>
I'm a software engineer living in San Francisco currently working at Uber on the Web Platform team. I first got into web development at the age of 12 when, for whatever reason, I decided that I wanted to build a website.
</p>
<p>The immediacy and accessibility of web programming and its synthesis of coding and visual design and proved tremendously appealing to me and I've been hooked ever since. Most recently, I've been focused on building JavaScript tools and libraries to support Node.js web application development, particularly in the area of UI components and styles.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_styletron_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_styletron_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Styletron</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_styletron_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Styletron is a small CSS-in-JS utility designed for server and client-rendered web applications with a focus on scalability and high performance. Like other CSS-in-JS libraries, it's designed to work in conjunction with component-driven web app frameworks.</p>
<p>This includes React where UI logic, markup, and styling are colocated in JavaScript and partitioned by component rather than separated into HMTL, CSS, and JS. Among other things, Styletron makes it easier to treat your views (styling included) as a pure function of state and not worry about side effects or global namespace collisions in CSS.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_styletron_-work-" id="how-does-_styletron_-work-"></a><span class="text">How does <em>Styletron</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_styletron_-work-">#</a></h2>
<p>Styletron produces CSS from styles defined in JavaScript. Many different APIs can be built on top of Styletron, but typically, styles are defined somewhere in the render function of a component in the form of object literals, which Styletron turns into corresponding class names.</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> Styletron <span class="token keyword keyword-from" >from</span> <span class="token string" >"styletron"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> injectStyle <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"styletron-utils"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Create a Styletron instance</span>
<span class="token keyword keyword-const" >const</span> styletron <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Styletron</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> className <span class="token operator" >=</span> <span class="token function" >injectStyle</span><span class="token punctuation brackets-parentheses" >(</span>styletron<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"red"</span><span class="token punctuation" >,</span>
display<span class="token punctuation" >:</span> <span class="token string" >"inline-block"</span><span class="token punctuation" >,</span>
fontSize<span class="token punctuation" >:</span> <span class="token string" >"1.6em"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Corresponding css is injected into the page</span>
<span class="token comment" spellcheck="true" >// and a class name is returned</span>
</code></pre>
<p>During a page render on the server, Styletron accumulates the injected styles into a cache which is then serialized into a string of HTML which can inlined into <code><head></code> of the server-rendered markup. Since the styles came from the rendered components, the output has no non-critical or unused CSS!</p>
<p>In the browser, Styletron will hydrate its cache from the server-rendered styles (to avoid re-rendering these on the initial client render) and any additional styles rendered on the client will be injected into the page.</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> Styletron <span class="token keyword keyword-from" >from</span> <span class="token string" >"styletron"</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> injectStyle <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >"styletron-utils"</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// On the server:</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Create a Styletron instance</span>
<span class="token keyword keyword-const" >const</span> styletron <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Styletron</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Render the app, which results in several `injectStyle` calls</span>
<span class="token keyword keyword-const" >const</span> appHtml <span class="token operator" >=</span> <span class="token function" >renderApp</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> stylesheets <span class="token operator" >=</span> styletron<span class="token punctuation" >.</span><span class="token function" >getStylesheetsHtml</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`
<html>
<head></span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>stylesheets<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" ></head>
<body></span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>appHtml<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" ></body>
</html>
`</span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// On the client:</span>
<span class="token keyword keyword-const" >const</span> serverRenderedStyles <span class="token operator" >=</span> document<span class="token punctuation" >.</span><span class="token function" >getElementsByClassName</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token string" >"_styletron_hydrate_"</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Create Styletron instance on the client,</span>
<span class="token comment" spellcheck="true" >// hydrating from server-rendered styles</span>
<span class="token keyword keyword-const" >const</span> styletron <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Styletron</span><span class="token punctuation brackets-parentheses" >(</span>serverRenderedStyles<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Inject new styles into the page</span>
<span class="token keyword keyword-const" >const</span> newClassName <span class="token operator" >=</span> <span class="token function" >injectStyle</span><span class="token punctuation brackets-parentheses" >(</span>styletron<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"blue"</span><span class="token punctuation" >,</span>
fontSize<span class="token punctuation" >:</span> <span class="token string" >"24px"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_styletron_-differ-from-other-solutions-" id="how-does-_styletron_-differ-from-other-solutions-"></a><span class="text">How does <em>Styletron</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_styletron_-differ-from-other-solutions-">#</a></h2>
<p>The traditional CSS-in-JS method involves a straightforward 1:1 conversion of style objects into corresponding scoped CSS classes. Instead, Styletron takes advantage of a novel approach to generating CSS from JavaScript styles.</p>
<p>This involves the generation of "virtual CSS classes" that are composed of several underlying atomic, single-declaration classes. As a result, any re-used declaration is shared between all classes, which effectively results in declaration-level deduplication, yielding much smaller CSS output than the traditional CSS-in-JS method.</p>
<p>For example, given styles for two buttons, we get the following class names and corresponding CSS:</p>
<pre><code class="lang-js"><span class="token keyword keyword-const" >const</span> redButtonClass <span class="token operator" >=</span> <span class="token function" >injectStyle</span><span class="token punctuation brackets-parentheses" >(</span>styletron<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"red"</span><span class="token punctuation" >,</span>
display<span class="token punctuation" >:</span> <span class="token string" >"inline-block"</span><span class="token punctuation" >,</span>
fontSize<span class="token punctuation" >:</span> <span class="token string" >"1.6em"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// redButtonClass is `a b c`</span>
<span class="token keyword keyword-const" >const</span> blueButtonClass <span class="token operator" >=</span> <span class="token function" >injectStyle</span><span class="token punctuation brackets-parentheses" >(</span>styletron<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
color<span class="token punctuation" >:</span> <span class="token string" >"blue"</span><span class="token punctuation" >,</span>
display<span class="token punctuation" >:</span> <span class="token string" >"inline-block"</span><span class="token punctuation" >,</span>
fontSize<span class="token punctuation" >:</span> <span class="token string" >"1.6em"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// blueButtonClass is `d b c`</span>
<span class="token comment" spellcheck="true" >// injected CSS is:</span>
<span class="token comment" spellcheck="true" >/*
.a { color: red }
.b { display: inline-block }
.c { font-size: 1.6em }
.d { color: blue }
*/</span>
</code></pre>
<p>In addition, since Styletron operates on individual declarations rather than rules, it benefits from more granular memoization which it allows it to avoid extra work.</p>
<p>In large apps, the total number of declarations can dwarf the number of unique declarations, so the de-duplication that Styletron is able to perform can turn out to be quite significant.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_styletron_-" id="why-did-you-develop-_styletron_-"></a><span class="text">Why did you develop <em>Styletron</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_styletron_-">#</a></h2>
<p>The original impetus for creating Styletron was the lack of unopinonated, low-level CSS-in-JS solutions. Many CSS-in-JS solutions provided some mechanism for rendering styles in both the browser and server, but they were tightly coupled with an opinionated, high-level API for defining and consuming styles in components.</p>
<p>I built Styletron to address this: in fact, the very first implementation of Styletron was essentially just the low-level rendering bits from Aphrodite decoupled from its high-level API and features. Soon after, my interest shifted towards performance and after having the realization of generating atomic CSS, I completely re-implemented Styletron from the ground up.</p>
<p>This version of Styletron was created for a mobile web application that was built specifically to perform well on smartphones in developing countries, where network performance is often slow and unreliable and every kilobyte of the application can make a difference for users. For this reason Styletron produces the smallest possible CSS output (while being small itself) and is extremely performant at runtime.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Although in many ways I think CSS-in-JS is already superior to a conventional CSS/Sass workflow in terms of developer experience, I think the overall developer tooling hasn't quite caught up yet. So for me, an important focus is area is how to make working with CSS-in-JS even better.</p>
<p>One thing in particular that I think would be great is type definitions for style object literals, so authoring styles in JavaScript becomes a lot nicer and things like IDE autocomplete become possible. Aside from that, I'm planning further performance optimization and will look into ways to support more CSS features in Styletron. Chrome DevTools integration that makes working with the generated atomic CSS easier would also be awesome.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_styletron_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_styletron_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Styletron</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_styletron_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think across the board, there's a been a renewed focus on application size and parse times, which can have an outsized impact on mobile devices. In the JS module bundler space, bundle-splitting and tree-shaking have been much-heralded features.</p>
<p>Lightweight and fast React alternatives such as Preact and Inferno have garnered massive amounts of traction recently. The Google AMP project, which places restrictions on page size and completely forbids external CSS assets to ensure fast load times on mobile devices, is also reflection of this greater trend of web page performance.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>These days, amidst the ever-growing myriad of web frameworks and tools, I can see how choice paralysis or fatigue might set in, especially for folks new to web development. Everything seems to change so fast it's borderline impossible to stay on top of everything.</p>
<p>What I find helpful is to try and avoid a mindset of newer is automatically better. As with any abstraction, I think all web frameworks and libraries involve trade-offs to some degree; to get benefits in one area, usually there's something given up in exchange somewhere else. Seeking out and understanding what those trade-offs are is super valuable in deciding to use an abstraction.</p>
<p>Unfortunately, it's sometimes hard to find out what these may be because it's less fun to talk about problems and they aren't always published along with the usual bullet points of features/benefits. But ultimately, it's okay to stick with simple, tried-and-true stuff; newer things may even introduce unnecessary complexity.</p>
<p>I think part of the beauty of web development is you can just start building without much setup, all you really need is a web browser and a text editor. And in my eyes, you can't really go wrong since in my experience, just building things is the best way to learn and it's the mistakes made along the way that have often provided the most valuable experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Kyle Mathews, who has been working on Gatsby, a React-powered static site generator.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Check out my blog post <a href="https://ryantsao.com/blog/virtual-css-with-styletron">Virtual CSS with Styletron</a> if you're interested in learning more about how Styletron works and the benefits it provides. I'm excited that other libraries in the space have started to adopt similar strategies and am looking forward to seeing more innovation in the CSS-in-JS space.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Ryan! It is cool to see innovation in the styling space and I agree with your observation about the general direction of the web. Mobile is becoming more and more important.</p>
<p>Remember to <a href="https://github.com/rtsao/styletron">check Styletron on GitHub</a> to learn more about the approach and get started.</p>
SurviveJS - Webpack - v1.4.2asurvivejswebpackv1422016-12-19t00:00:00z2016-12-19T00:00:00Z<p>Alright, here we go again. It has been a while since <a href="https://survivejs.com/survivejs-webpack-131">the previous release</a> and it's time for a big Winter update!</p>
<p>Quite a bit has happened since. I spent most of the intermediate time in consulting and training mode. Since I became a part of webpack core team, I've been pushing things forward in my own way. This has meant coordinating efforts around <a href="https://webpack.js.org/">the new site of webpack</a> and developing certain technology related to it.</p>
<p>We also launched something known as <a href="https://opencollective.com/webpack">open collective for webpack</a>. This makes it possible for individuals and companies to support the project in form of donations. The overall theme of this year has been in making webpack more sustainable as a project and scaling it from one person to many. By the looks of it we are actually succeeding in this goal.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can get a better idea of the type of training I have been doing at <a href="https://presentations.survivejs.com/">my presentation site</a>. See especially <a href="http://presentations.survivejs.com/advanced-webpack/">my slides on advanced webpack</a> as those complement the book material well. It probably goes without saying, but if you are interested in training on these topics, you know who to poke.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>This time around I focused especially on getting the book up to date with upcoming webpack 2. The book uses webpack 2 syntax now. In addition, I went through quite a few issues I have on my list. All of this has translated into a nice list of improvements.</p>
<p>There is one new chapter that was gained through splitting <a href="https://survivejs.com/webpack/styling/separating-css/">Separating CSS</a> into two shorter ones. The existing ones should be better than before as well. Thanks to the changes introduced with webpack 2, I could simply drop a part of the content.</p>
<p>Webpack 2 performs validation and simplifies environment handling greatly. Also the configuration format is a little neater in certain parts although there is still work left for webpack 3. I believe we can improve the way you configure webpack with little effort.</p>
<p>I still have quite a few issues on my list. This includes a couple of chapters and further improvements to the current content. If you have specific ideas, <a href="https://github.com/survivejs/webpack/issues">open an issue</a>. That will give me a better idea on what kind of content to develop for the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-4-2" id="book-improvements-1-4-2"></a><span class="text">Book Improvements - <code>1.4.2</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-4-2">#</a></h2>
<p>In total 192 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.3.0...v1.4.2">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h2>
<ul>
<li>Rewrote for clarity, mostly the same.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h2>
<ul>
<li>Added more upcoming tools.</li>
<li>Expanded on core ideas of webpack.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-started" id="getting-started"></a><span class="text">Getting Started</span><a class="header-anchor-select" href="https://survivejs.com/#getting-started">#</a></h3>
<ul>
<li>Bumped to webpack 2 beta. This applies to other content too.</li>
<li>Noted that entries have to resolve against files. Directories won't work unless they resolve to <em>index.js</em>.</li>
<li>Mentioned plugins that work well with <em>html-webpack-plugin</em>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-configuration" id="splitting-configuration"></a><span class="text">Splitting Configuration</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-configuration">#</a></h3>
<ul>
<li>Explained <em>webpack-merge</em> in greater detail so it's less of a black box.</li>
<li>Simplified environment passing to benefit from webpack 2 <code>--env</code>.</li>
<li>Explained why configuration composition is a good thing.</li>
<li>Renamed <em>lib/parts.js</em> as <em>webpack.parts.js</em>. This feels more natural way to handle it.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>Rewrote for clarity.</li>
<li>Disabled <code>multiStep</code> option of <code>HotModuleReplacementPlugin</code> as that doesn't work yet with webpack 2 and <em>html-webpack-plugin</em>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#enabling-sourcemaps" id="enabling-sourcemaps"></a><span class="text">Enabling Sourcemaps</span><a class="header-anchor-select" href="https://survivejs.com/#enabling-sourcemaps">#</a></h3>
<ul>
<li>Explained the difference between inline and separate sourcemaps. There's still work to do, but it's a little better now.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying-build" id="minifying-build"></a><span class="text">Minifying Build</span><a class="header-anchor-select" href="https://survivejs.com/#minifying-build">#</a></h3>
<ul>
<li>Mentioned UglifyJS alternatives.</li>
<li>Mentioned gotchas related to minifying CSS.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-environment-variables" id="setting-environment-variables"></a><span class="text">Setting Environment Variables</span><a class="header-anchor-select" href="https://survivejs.com/#setting-environment-variables">#</a></h3>
<ul>
<li>Rewrote the introduction so it's easier to see why <code>DefinePlugin</code> is valuable.</li>
<li>Mentioned <code>webpack.EnvironmentPlugin</code>.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/compression-webpack-plugin">compression-webpack-plugin</a> as that's handy for generating gzips.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-bundles" id="splitting-bundles"></a><span class="text">Splitting Bundles</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-bundles">#</a></h3>
<ul>
<li>Mentioned about <strong>code splitting</strong> and explained the difference.</li>
<li>Added an alternative technique for figuring out which dependencies should go to the vendor bundle.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#adding-hashes-to-filenames" id="adding-hashes-to-filenames"></a><span class="text">Adding Hashes to Filenames</span><a class="header-anchor-select" href="https://survivejs.com/#adding-hashes-to-filenames">#</a></h3>
<ul>
<li>Mentioned hash slicing trick (<code>[chunkhash:8]</code>).</li>
<li>Added a concrete example showing how to use placeholders.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#separating-css" id="separating-css"></a><span class="text">Separating CSS</span><a class="header-anchor-select" href="https://survivejs.com/#separating-css">#</a></h3>
<ul>
<li>Mentioned that you should <strong>not</strong> use <code>ExtractTextPlugin</code> for development. It's not compatible with HMR yet, although there's a PR in progress.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#eliminating-unused-css" id="eliminating-unused-css"></a><span class="text">Eliminating Unused CSS</span><a class="header-anchor-select" href="https://survivejs.com/#eliminating-unused-css">#</a></h3>
<ul>
<li>This chapter was a part of <a href="https://survivejs.com/webpack/styling/separating-css/">Separating CSS</a> earlier. Now it is a chapter of its own.</li>
<li>There was a little glitch in the approach that made it to match against <em>node_modules</em>. This has been fixed and it gives very compact results now.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#analyzing-build-statistics" id="analyzing-build-statistics"></a><span class="text">Analyzing Build Statistics</span><a class="header-anchor-select" href="https://survivejs.com/#analyzing-build-statistics">#</a></h3>
<ul>
<li>Simplified greatly thanks to webpack 2 <code>--env</code>.</li>
<li>Added more analysis tools.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-assets" id="loading-assets"></a><span class="text">Loading Assets</span><a class="header-anchor-select" href="https://survivejs.com/#loading-assets">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loader-definitions" id="loader-definitions"></a><span class="text">Loader Definitions</span><a class="header-anchor-select" href="https://survivejs.com/#loader-definitions">#</a></h3>
<ul>
<li>Rewrote for clarity.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-images" id="loading-images"></a><span class="text">Loading Images</span><a class="header-anchor-select" href="https://survivejs.com/#loading-images">#</a></h3>
<ul>
<li>Explained in greater detail.</li>
<li>Added more techniques.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-fonts" id="loading-fonts"></a><span class="text">Loading Fonts</span><a class="header-anchor-select" href="https://survivejs.com/#loading-fonts">#</a></h3>
<ul>
<li>Added more techniques.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-chunks" id="understanding-chunks"></a><span class="text">Understanding Chunks</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-chunks">#</a></h3>
<ul>
<li>Rewrote using webpack 2 <a href="https://github.com/tc39/proposal-dynamic-import">dynamic imports</a>. This simplified the implementation somewhat.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting" id="linting"></a><span class="text">Linting</span><a class="header-anchor-select" href="https://survivejs.com/#linting">#</a></h3>
<ul>
<li>Mentioned <code>eslint --init</code>.</li>
<li>Added more techniques.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-packages" id="authoring-packages"></a><span class="text">Authoring Packages</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-packages">#</a></h3>
<ul>
<li>Rewrote to reflect the current situation. More tools and techniques.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/create-react-app">create-react-app</a>.</li>
<li>Added Babel related presets and plugins that are useful with React.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I have next two weeks to dedicate to this work. It is quite possible we will see an intermediate release or two before 2.0. But at least now we are in sync with webpack so that's great!</p>
<p>After 2.0, I can give the React book a big refresh.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Given webpack 2 isn't actually out yet, there still may be some rough edges. I've tried to annotate these as well as I can, but there still may be something. I'll fix potential issues in the next release.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his. Literally most of the income goes to webpack developers now!</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>You can <a href="https://opencollective.com/webpack">support webpack through open collective</a> too.</blockquote>Inferno - Blazing fast, React-like UI library - Interview with Dominic Gannawayainfernoblazingfastreactlikeuilibraryinterviewwithdominicgannaway2016-12-12t00:00:00z2016-12-12T00:00:00Z<p>One of the cool things about React is that it managed to pull a lot of people into the component world. Even though there was initial resistance, the ideas seem to have stuck. Maybe the question is, what next?</p>
<p><a href="https://infernojs.org/">Inferno</a>, a blazing fast React-like UI library by <a href="https://twitter.com/trueadm">Dominic Gannaway</a> might be one of the answers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/5d645ce683649c2332294ea6fcc8b7a2?s=200" alt="Dominic Gannaway" class="author" width="100" height="100" />
</span>
I'm currently a Software Development Engineer at Tesco, based in London.
I've been developing and writing actual software since I was 15 years old, but I was first interested in coding when I was around 7 years old. (It was Visual Basic 5 back then!)
</p>
<p>I'm a huge fan and advocate of web technologies, and I've always enjoyed optimising and making things fast. These days I spend a lot of time building complex UIs, middlewares, tooling and all the other things you would associate with a full-stack JavaScript engineer.</p>
<p>In my free time, I enjoy being a Dad (I've got two kids) and spending time with my family. I also enjoying working on open-source projects and I love to attend meetups and conferences when I get the chance.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-inferno-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-inferno-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Inferno</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-inferno-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://github.com/trueadm/inferno">Inferno</a> is a JavaScript library that helps developers build user interfaces for websites and apps. Inferno intentionally builds on the same API as React, so developers do not have to invest time/money in learning a completely new way of building things.</p>
<p>In many ways I think React has been a game-changer for the web UI community. It scrapped the old ways of doing things like we'd been doing them for years on the server (MVC for example) and offered an approach that inspired many different patterns and design discussions; e.g., one-way data flow, components over templates, JSX, Virtual DOM.</p>
<p>Inferno was designed to be really, <em>really</em> fast and lightweight while offering a bunch of out-of-the-box features that makes working with a React-like project a bit nicer.</p>
<p>There's also a big push right now to improve the experience on mobile and it's good to see so many people taking notice – as, in my opinion, mobile performance has been really poor for a long time. Inferno started off nearly 2 years ago as my attempt to fix the problems with mobile performance.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-inferno-work-" id="how-does-inferno-work-"></a><span class="text">How does <em>Inferno</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-inferno-work-">#</a></h2>
<p>Like many other libraries and frameworks, Inferno uses a Virtual DOM. Virtual DOM is a tiny abstraction above the real DOM that provides Inferno with a list of instructions on what the UI will look like; so that when a user creates components or virtual DOM nodes (<code>VNodes</code>), they are describing how they'd like their UI to look.</p>
<p>Inferno takes all this information and works out the least amount of changes necessary to update the webpage from one state to the next. It makes this process fast by leveraging several optimisations that modern JavaScript engines provide; along with the mounds of trial-and-error it required to improve "touching" the DOM.</p>
<p>This <em>might get a bit technical</em>, but I've been asked about it plenty of times so I thought it would be best to share my experiences:</p>
<ul>
<li>Inferno tries to ensure as many object property callsites are <a href="http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html">monomorphic</a> as possible.</li>
<li>Inferno avoids using prototype objects with constructors and instead favours object literals with minimal properties. Inferno uses utility/helper functions to mutate/access these objects rather than adding methods onto the object itself. This had a noticeble impact in non-JIT (just in time) compilation or on mobile devices with low memory.</li>
<li>Rather than "diff" virtual DOM against the real DOM, Inferno instead diffs the virtual DOM against the last virtual DOM created. This also had a noticeable impact on performance.</li>
<li>Inferno tries to reuse properties, objects and DOM nodes whenever possible. Creating too many objects can be expensive on memory, the GC (garbage collector) and overall performance. For example, rather than create extra properties on <code>VNode</code> objects, Inferno reuses previous properties (even if the property name doesn't really align anymore with what's being put within it). Furthermore, DOM nodes are also stored and recycled, reducing the cost of having to recreate large DOM trees and computing all the internal visual calculations again.</li>
<li>Inferno avoids touching the DOM as often as it can. Instead, it opts to only touch a small subset of properties/methods on DOM nodes (<code>firstChild</code>, <code>lastChild</code>, <code>parentNode</code>, <code>nextSibling</code>, <code>createElement</code>, <code>removeChild</code>, <code>insertBefore</code>, <code>replaceChild</code>). Inferno avoids using <code>childNodes</code> and <code>innerHTML</code> as these methods tend to be very expensive. A nice optimisation trick to clear a DOM's content was to use <code>textContent('')</code>.</li>
<li>Inferno prefers the usage of helper functions that all get inlined by a JIT compiler – for example, rather than doing <code>foo === null</code>, doing <code>isNull(foo)</code>. We found that this really helped improve bundle size, and in some cases it also improved JIT performance (when the <a href="https://docs.google.com/document/d/1VoYBhpDhJC4VlqMXCKvae-8IGuheBGxy32EOgC2LnT8/edit">inline budget for inlining hadn't been fully consumed</a>).</li>
<li>Extensive checking was done to ensure that deoptimisations ("deopts", where a JIT compiler can't compile something) were kept to the absolute minimum. The Inferno team used benchmarks, profiling tools (IRHydra 2, Chrome Dev Tools) and lots of spikes re-writes on various parts of the codebase as way of constantly finding ways to remove deopts.</li>
<li>Inferno uses its own event system for certain events, which allows it to choose a delegated event or an inline event depending on the type of event. Delegated events can offer a significant performance and memory improvement over non-delegated events in cetain use-cases.</li>
<li>Inferno's keyed children sorting algorithm is highly efficient and yields the fewest possible DOM mutations to get from A to B (thanks to the <a href="https://github.com/ivijs/ivi">great work</a> by <a href="https://github.com/localvoid">localvoid</a>).</li>
</ul>
<p>There are plenty more optimisations going on under the hood, so I'd recommend reading the sourcecode if anyone is interested in learning more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-inferno-differ-from-other-solutions-" id="how-does-inferno-differ-from-other-solutions-"></a><span class="text">How does <em>Inferno</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-inferno-differ-from-other-solutions-">#</a></h2>
<p>Inferno doesn't try to be too different from React. Very much like Preact, Inferno enjoys having lots of similarities with React. Inferno supports many different ways of creating UIs, such as: JSX (Inferno has its own Babel plugin for this), HyperScript and good ol' <code>createElement()</code> from React.</p>
<p>Inferno differs in that it offers some additional features that React or Preact don't have (at the expense of some file size):</p>
<ul>
<li>Tiny in size; in fact, only 8kb min+gzip. It parses and evaluates as quickly as anything in the browser (almost the same as that of Preact). It's perfect for mobile!</li>
<li>Lifecycle events like <code>shouldComponentUpdate</code> and <code>componentDidMount</code> on functional components.</li>
<li>Better modularisation of core features. For example, <code>createClass</code> isn't in Inferno's core; it's a separate package called <code>inferno-create-class</code>. The same applies for ES2015 class components. This helps reduce filesize for people who simply don't need to carry things that they will never use.</li>
<li>Inferno doesn't have an InfernoDOM - the DOM is baked into the core. Inferno will never have an Inferno Native, so it made a lot of sense (improved performance and bundle size by unifying the two).</li>
<li>A <a href="https://github.com/trueadm/inferno/blob/master/README.md#linkevent-package-inferno"><code>linkEvent</code></a> helper for passing <code>state</code>/<code>props</code>/<code>this</code> to an event callback without needing to use arrow functions or <code>bind()</code>. Not only is it a lot faster than the alternatives, but you can use it on functional components too:</li>
</ul>
<pre><code class="lang-jsx"><span class="token keyword keyword-import" >import</span> Inferno<span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> linkEvent <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'inferno'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >handleClick</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation" >,</span> event<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
props<span class="token punctuation" >.</span><span class="token function" >validateValue</span><span class="token punctuation brackets-parentheses" >(</span>event<span class="token punctuation" >.</span>target<span class="token punctuation" >.</span>value<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >MyComponent</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token function" >linkEvent</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation" >,</span> handleClick<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-inferno-" id="why-did-you-develop-inferno-"></a><span class="text">Why did you develop <em>Inferno</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-inferno-">#</a></h2>
<p>I developed Inferno because (1) curiosity/research and (2) I ran into too many performance issues too often while trying to build a highly complex mobile web app.</p>
<p>Two years ago, when this project started, I was really frustrated with the mentality that a lot of the community had in regards to mobile performance. I was commonly told that "mobile is fast enough" or "people simply don't need aything faster" or "X is already as fast as it gets".</p>
<p>Thankfully, that mentality has changed since then and now people are starting to become more aware of the real problem users are having; especially in emerging countries with poor web experiences on mobile.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The focus for me and the rest of the Inferno team is to get 1.0 released before Christmas (along with the website). I have some big plans for 2017, but it's a bit too early to announce them right now. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-inferno-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-inferno-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Inferno</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-inferno-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think there is going to be a big shift towards making things smaller and faster. I think we've only just begun tapping into the potential of JavaScript compiling. With the work that Rich Harris has done with <a href="https://svelte.technology/">Svelte</a>, along with the work by the Ember and Angular guys on AoT (ahead of time) compiling, we'll see WebAssembly compilation start to take off too. I think 2017 will be an interesting year for the future of web development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-who-are-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-who-are-getting-into-web-development-"></a><span class="text">What advice would you give to programmers who are getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-who-are-getting-into-web-development-">#</a></h2>
<p>Get into open source, either on an existing project or start your own. You'll learn huge amounts from the experience and get to tap into a huge community of very smart people.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/developit">Jason Miller</a> and <a href="https://github.com/rtsao">Ryan Tsao</a>. They're both doing fantastic work!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>I'd like to say a big thank you to the team behind making Inferno awesome. <a href="https://github.com/Havunen">Sampo Kivistö</a>, <a href="https://github.com/nightwolfz">Ryan M</a>, <a href="https://github.com/LukeSheard">Luke Sheard</a>, <a href="https://github.com/localvoid">Boris Kaul</a>, <a href="https://gist.github.com/lukeed">Luke Edwards</a> and many others! They've been great.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Dominic! If there's one thing that sets Inferno apart from my point of view, it's how it expands function based components through a beautifully designed hook system. That solves a major pain point for me even if it's not standard React code.</p>
<p>You should check out <a href="https://infernojs.org/">the official site</a> and <a href="https://github.com/trueadm/inferno/">Inferno on GitHub</a> to learn more about the project and those hooks. Maybe 2017 is the big year for Inferno.</p>
Svelte - The magical disappearing UI framework - Interview with Rich Harrisasveltethemagicaldisappearinguiframeworkinterviewwithrichharris2016-12-07t00:00:00z2016-12-07T00:00:00Z<p>If jQuery gave us proper control over the DOM, and React brought components to the limelight, what's next? <a href="https://svelte.technology/">Svelte</a> by <a href="https://twitter.com/Rich_Harris">Rich Harris</a> might be an answer to this conundrum. You might remember him from tools such as <a href="https://buble.surge.sh">Bublé</a> and <a href="http://rollupjs.org">Rollup</a>. Read on to learn what Svelte is about.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/329f9d32fe20b186838ee237d3eb2d43?s=200" alt="Rich Harris" class="author" width="100" height="100" />
</span>
I'm an interactive editor at <a href="https://theguardian.com">theguardian.com</a>, based in New York City. My background is in journalism, and my day job is to come up with new ways to use web technologies in the service of storytelling. A key part of that is building the tools that we need to create rich and performant applications on tight deadlines.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-svelte-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-svelte-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Svelte</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-svelte-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>On one level, Svelte is a UI framework – if you've heard of tools like React, Vue or Ractive, it tackles the same problems they do. It allows you to build applications in a declarative, component-driven way, rather than creating a hairball of imperative DOM manipulation.</p>
<p>But on another way, it's a complete rethink of how we approach the problem: rather than being a piece of software that sits between you and the browser, giving you a set of abstractions to work with, it essentially <em>writes your app for you</em> in the most efficient way possible. The result is faster loading, faster running apps, with next to zero waste.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-svelte-work-" id="how-does-svelte-work-"></a><span class="text">How does <em>Svelte</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-svelte-work-">#</a></h2>
<p>It's less magical than it sounds. You write components in HTML files, which can optionally include <code><style></code> and <code><script></code> elements to encapsulate CSS and behaviours. Svelte's template syntax takes a few minutes to learn.</p>
<p>These component files are converted into modules by Svelte's compiler, using the <a href="https://github.com/sveltejs/svelte-cli">command line interface</a> or one of the various <a href="https://github.com/sveltejs/svelte/#svelte">build tool integrations</a>. These modules contain what you might call 'vanilla JS' – i.e. low-level DOM manipulation specific to your app – meaning there's no data-binding or DOM diffing or any of the other tricks frameworks have to use to render your UI.</p>
<p><strong>HelloWorld.html</strong></p>
<pre><code class="lang-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>h1</span><span class="token punctuation" >></span></span>Hello {{name}}!<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>h1</span><span class="token punctuation" >></span></span>
</code></pre>
<p><strong>app.js</strong></p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> HelloWorld <span class="token keyword keyword-from" >from</span> <span class="token string" >'./HelloWorld.html'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> app <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >HelloWorld</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
target<span class="token punctuation" >:</span> document<span class="token punctuation" >.</span><span class="token function" >querySelector</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'main'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
data<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> <span class="token string" >'world'</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
app<span class="token punctuation" >.</span><span class="token keyword keyword-set" >set</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> name<span class="token punctuation" >:</span> <span class="token string" >'SurviveJS'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-svelte-differ-from-other-solutions-" id="how-does-svelte-differ-from-other-solutions-"></a><span class="text">How does <em>Svelte</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-svelte-differ-from-other-solutions-">#</a></h2>
<p>To the end user, the biggest difference is speed. Svelte is lighter and faster than alternative solutions because the browser has a lot less work to do (benchmarks coming soon!). Our <a href="https://svelte-todomvc.surge.sh/">TodoMVC implementation</a> is just 3.6 kB gzipped, which is tiny.</p>
<p>For the developer, the advantages are more subjective. Svelte has a very simple API and is designed to behave very predictably – for example, the DOM updates synchronously whenever data changes. It has some productivity-boosting features borrowed from Ractive, like scoped styles and computed properties.</p>
<p>One of the nice features about Svelte's approach is that it's inherently very easy to adopt incrementally, without a big bang rewrite. Ordinarily if you wanted to move from one framework to another there'd be a transition period during which your app depended on both, which is terrible.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-svelte-" id="why-did-you-develop-svelte-"></a><span class="text">Why did you develop <em>Svelte</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-svelte-">#</a></h2>
<p>Guilt, partly. The JS community has become hyper-aware in the last two or three months about the cost of shipping too much JavaScript – it's not just about the download time, it's also about the parse/eval time, which on mobile has a real impact for a lot of people. As the creator of Ractive, I'd been unwittingly contributing to the problem, just like every framework author.</p>
<p>As soon as I had the idea for Svelte – 'what if the framework was actually just a compiler?' – I could barely sleep until I'd written the first proof-of-concept. I don't think I've ever been this excited about one of my projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>There's a huge amount of work still to do – server-side rendering and progressive enhancement, transitions, routing, plus all the documentation and examples that go along with it. We'll be very busy over the next few weeks.</p>
<p>I'm particularly keen to explore a couple of areas that Svelte opens up – statically analysing CSS in the context of the markup it's attached to, and WYSIWYG component editors that can create dependency-free widgets and applications. I think there are some tremendous opportunities that only really become practical when you have a zero-runtime framework and template-driven components.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-svelte-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-svelte-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Svelte</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-svelte-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>What Svelte does is an example of 'ahead-of-time' compilation, or AoT. (It's not the only framework doing AoT – Angular 2 has also embraced similar techniques – though as far as I know Svelte is the first to take the idea this far.) I've seen a huge amount of interest in AoT, and I think there's a lot of undiscovered territory, and not just in UI. I'm excited to see how that develops.</p>
<p>A lot of people have asked me if Svelte's techniques could be used with JSX. Unfortunately, other framework authors have reached the same conclusion that I did – because JSX is 'just JavaScript', no compiler could ever have the same guarantees about the shape of your app, meaning there will always need to be some runtime reconciliation process. So I think we might see a resurgence of interest in non-JSX approaches to building apps.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>If you try to learn web development by reading blog posts about new technologies you will drown in information. Instead, find someone who is a bit further along on their programming journey and befriend them. Just build stuff badly – hack it together any way you can – and ask them for help when you need it. Both of you will become better programmers as a result.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/trueadm">Dominic Gannaway</a> – here's the author of Inferno, which is probably the fastest UI framework in the world. Until Svelte overtakes it, at least.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Rich! It's cool to see how changing the axioms and identifying true problems can lead to new solutions that change the way we think about web development. There is always room for innovation.</p>
<p>You can <a href="https://svelte.technology/">learn more about Svelte at their site</a>. There's also a <a href="https://svelte.technology/repl/">REPL you can use to try out the syntax</a>. Remember to <a href="https://github.com/sveltejs/svelte">star the project</a> as well as everyone likes stars.</p>
webpack-merge - Taming Webpack Configuration - Interview with Juho Vepsäläinenawebpackmergetamingwebpackconfigurationinterviewwithjuhovepsalainen2016-11-29t00:00:00z2016-11-29T00:00:00Z<p>It's almost funny how far a simple idea can fly sometimes. When writing my first book, I ran into the problem of configuring webpack. I prefer to keep my configuration in a single file and duplication goes against my nature. As a result <a href="https://www.npmjs.com/package/webpack-merge">webpack-merge</a> was born.</p>
<p>Given <em>webpack-merge</em> reached 1.0 milestone recently, I'm going to talk a bit more about the project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-webpack-merge-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-webpack-merge-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>webpack-merge</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-webpack-merge-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It's easiest to understand <em>webpack-merge</em> in terms of input and output. If you give a standard <code>merge</code> function a structure containing arrays and objects, it will override them like this:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> a <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'./main.js'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
module<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.css$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'style'</span><span class="token punctuation" >,</span> <span class="token string" >'css'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> b <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'./other.js'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
module<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.js$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'babel'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Avoid mutating a</span>
<span class="token comment" spellcheck="true" >// Object.assign({}, a, b);</span>
<span class="token punctuation brackets-braces" >{</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'./other.js'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
module<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.js$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'babel'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>As you can see, the default output isn't that useful. If you wanted useful output, you would have to merge very carefully and apply <code>concat</code> here and there. That approach has potential to get messy very fast.</p>
<p>What if you could do just this?</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> a <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'./main.js'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
module<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.css$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'style'</span><span class="token punctuation" >,</span> <span class="token string" >'css'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> b <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'./other.js'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
module<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.js$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'babel'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// merge(a, b);</span>
<span class="token punctuation brackets-braces" >{</span>
entry<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'./main.js'</span><span class="token punctuation" >,</span> <span class="token string" >'./other.js'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
module<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.css$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'style'</span><span class="token punctuation" >,</span> <span class="token string" >'css'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
test<span class="token punctuation" >:</span> <span class="token regex" >/\.js$/</span><span class="token punctuation" >,</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span><span class="token string" >'babel'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>That looks far more useful. This is essentially what <em>webpack-merge</em> does. It concatenates arrays (append by default) and merges objects while creating a new object to play with.</p>
<p><em>webpack-merge</em> implements also something known as <em>smart merging</em>. This process folds your webpack configuration into a smaller format (i.e., multiple loader definitions might become a single). There are also strategies available to allow you to control the merging process so instead of appending it might prepend or replace content.</p>
<p>Interestingly enough I've begun to find use for <em>webpack-merge</em> beyond webpack as configuration management is a common concern. Whenever you have configuration, you might want to <em>compose</em> it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-webpack-merge-work-" id="how-does-webpack-merge-work-"></a><span class="text">How does <em>webpack-merge</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-webpack-merge-work-">#</a></h2>
<p>It uses <a href="https://lodash.com/">lodash</a> internally. There are certain webpack specific portions, but I've left the heavy lifting to lodash. A recent rewrite by Kyle Herock gave it a little performance boost even while improving webpack 2 compatibility.</p>
<p>The rewrite was possible thanks to extensive tests in place. I've tested <em>webpack-merge</em> fairly thoroughly (over 200 tests and counting) given it's so critical piece of code to have right or else you start breaking people's projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-webpack-merge-differ-from-other-solutions-" id="how-does-webpack-merge-differ-from-other-solutions-"></a><span class="text">How does <em>webpack-merge</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-webpack-merge-differ-from-other-solutions-">#</a></h2>
<p>There are quite a few solutions for managing webpack configuration. Just to mention a few, consider <a href="https://www.npmjs.com/package/webpack-config">webpack-config</a> or <a href="https://www.npmjs.com/package/@easy-webpack/core">easy-webpack</a>. Using lodash <code>merge</code> is one option, but for the reasons outlined above I don't consider as a good long term way to handle it.</p>
<p>Compared to the other options, <em>webpack-merge</em> comes with a tiny API surface. There's not a lot to remember once you understand how it works. Composition allows you to begin to model fragments of configuration as you like and find the abstractions that make sense for you. Andy Wermke did something like this in <a href="https://github.com/andywer/webpack-blocks">webpack-blocks</a> and I discuss one approach in my <a href="https://survivejs.com/webpack/preface">webpack book</a>.</p>
<p>A while ago I spent time with a client refactoring their webpack configuration to run through <em>webpack-merge</em> and once we were done, the difference was quite immense. A large amount of duplication was gone and we had something together that was possible to share across their projects.</p>
<p>Having less configuration to maintain is always good. You still have to understand what you are doing, but thanks to this approach you can push abstraction to the level you prefer. Maybe in the future we can find nicer configuration definition away and make <em>webpack-merge</em> redundant, but I see it as a necessity for my own projects right now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-webpack-merge-" id="why-did-you-develop-webpack-merge-"></a><span class="text">Why did you develop <em>webpack-merge</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-webpack-merge-">#</a></h2>
<p>While developing the content of my first book, it quickly became apparent how painful it is to manage webpack configuration. I started from a naïve merge and realized that if it behaved a little differently, I would have a nice way to compose. As a result <em>webpack-merge</em> was born and it has been going forward since then.</p>
<p>It didn't get noticed early on, but as you can see from the graph captured from <a href="https://npm-stat.com/charts.html?package=webpack-merge">npm-stat</a> below, it has become popular this year. It gets downloaded almost 20k times per day now so someone is definitely using it.</p>
<p><figure><img src="/c96e81406ec622f984b8a9aa2e932962.png" alt="webpack-merge popularity" class="" width="" height="" /><figcaption>webpack-merge popularity</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Now that I have the 1.0 version of <em>webpack-merge</em> out there, I consider it ready for public usage. The API feels solid and the project is in maintenance mode. I will merge possible improvements, but I don't expect to develop new functionality to the project myself.</p>
<p>I want to explore the idea of configuration presets further. It's quite possible I'll collaborate with Andy of <em>webpack-blocks</em> here. Maybe we'll find something.</p>
<p>There's no one true solution to configuration management as that depends on your personal needs. That said, I believe webpack should come with better defaults. The current defaults are too development oriented and it's too easy to miss certain production specific functionality very easily early on. It's not an easy problem to solve, but you definitely don't solve it unless you give it a go.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-webpack-merge-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-webpack-merge-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>webpack-merge</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-webpack-merge-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I expect more people will find <em>webpack-merge</em>. It's popularity will likely saturate at some point and perhaps it will become obsolete at some point as new approaches and tools become available. I think the core idea will remain valid, though, as it feels like something that goes beyond webpack.</p>
<p>Web development is in an interesting place right now. It feels like we are somewhere between two worlds as the standards try to keep up with the development. The constant innovation tells about the need to find better ways to develop for the web. We have made a lot of progress in the past few years alone, but I believe there's still a long way to go.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I think I have answered this before, but let's try again!</p>
<p>It's both harder and easier than it looks. It is harder in sense that we have to deal with legacy. It's easier in sense that the current tooling can be very powerful at best and enable huge productivity.</p>
<p>Focus on the fundamentals. Learning the language well will pay dividends as you learn about different solutions. Get exposed to a lot of technology. Instead of going "all in" with the framework of the day, spend time with alternatives as well. You'll see commonalities and also differences.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have a couple of interviews at the pipeline. If you have some cool technology you want to discuss, get in touch.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you find <em>webpack-merge</em> useful! Check out the <a href="https://www.npmjs.com/package/webpack-merge">npm page</a> and remember to give a star at <a href="https://github.com/survivejs/webpack-merge">GitHub</a>.</p>
<blockquote>
<p>We are running another round of <a href="http://www.reactindiebundle.com/">React Indie Bundle</a> for a limited time. If you want a nice collection of React related content, it's a good time to invest.</p>
</blockquote>
StarRatio - Compare JavaScript Projects - Interview with Dmitry Zaetsastarratiocomparejavascriptprojectsinterviewwithdmitryzaets2016-11-14t00:00:00z2016-11-14T00:00:00Z<p>Comparing different JavaScript projects is surprisingly tough. This is a problem encountered by many developers daily. Most often it's the easiest to go and pick the solution with the most GitHub stars, but that's not always the whole story.</p>
<p><a href="https://twitter.com/dmitryzaets">Dmitry Zaets</a> has decided to tackle this particular problem with a solution known as StarRatio. Read on to learn more about it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/b1a049347f659b8455244bc50ac45ef9?s=200" alt="Dmitry Zaets" class="author" width="100" height="100" />
</span>
My name is Dmitry Zaets. I am a Full-Stack Web Developer from Ukraine, living in Barcelona. Learning and sharing my knowledge with people are the things I enjoy to do. In a free time, I'm mentoring at NodeSchool Barcelona and helping to organize local ReactJS and .NET meetups.
</p>
<p>My developer's journey started when I was 10 years old. Father showed me how to code with Basic and we've created a tiny chat bot. At that point, I understood that programming is a huge universe without boundaries. Currently, I'm interested in software design and architecture.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-starratio-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-starratio-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>StarRatio</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-starratio-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Usually, when you need to choose a library or component and you have a couple of the competitors - it's easy, you just check them one by one, looking at the code, examples, issues. But what to do when you have a bunch of options, let's say 8 or even 10?</p>
<p>For sure you would like to check which of them are still maintained, how popular they are and how actively they are maintained. So you will go to npm to see download stats, to github to check stars, issues, a number of contributors. Would be cool to have a tool for this?</p>
<p>As I say, StarRatio is a <em>handy tool to compare JavaScript open source projects</em>.</p>
<p><figure><img src="/3cd7d5ca08659991e9e5619a70c2cc28.png" alt="Basic comparison" class="" width="" height="" /><figcaption>Basic comparison</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-starratio-work-" id="how-does-starratio-work-"></a><span class="text">How does <em>StarRatio</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-starratio-work-">#</a></h2>
<p>From the user perspective it is really easy to use, you just to go <a href="http://starratio.js.org">StarRatio site</a>, enter a couple of GitHub repos and see the comparison by multiple interesting stats. Here are couple of examples:</p>
<ul>
<li><a href="http://starratio.js.org/#/compare/tiles?keys=reactjs%2Fredux%2Cfacebook%2Fflux%2Cgoatslacker%2Falt%2Creflux%2Frefluxjs%2Freflux">State Containers (Flux-like)</a></li>
<li><a href="http://starratio.js.org/#/compare/tiles?keys=facebook%2Fjest%2Cmochajs%2Fmocha%2Cjasmine%2Fjasmine%2Csubstack%2Ftape">Testing Frameworks</a></li>
</ul>
<p>From technical perspective it is a client-server web application. On the client side it is a react application, built with <a href="https://github.com/facebookincubator/create-react-app">react-create-app</a>. On the server side, it is a simple Express app, which gathers the data from the different sources. Currently, we support npm and GitHub, but planning to extend a number of supported package managers.</p>
<p>Under the hood, StarRatio API is really simple. It is just aggregating data from npm and GitHub, processing it and caching the results.</p>
<p><figure><img src="/9ad1b7cc9b27f1dc2e11ee547c2e1970.png" alt="Card view" class="" width="" height="" /><figcaption>Card view</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-starratio-differ-from-other-solutions-" id="how-does-starratio-differ-from-other-solutions-"></a><span class="text">How does <em>StarRatio</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-starratio-differ-from-other-solutions-">#</a></h2>
<p>StarRatio tries to gather and calculate stats that are really important from a developer point of view.</p>
<p>It is quite unique as it doesn't try to solve the problem of choice, it just helps to simplify it by showing all needed information on one page in a way that is easy to compare.</p>
<p><figure><img src="/ac6ddf774ef414ecbd64ca0e41fe155f.png" alt="Chart view" class="" width="" height="" /><figcaption>Chart view</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-starratio-" id="why-did-you-develop-starratio-"></a><span class="text">Why did you develop <em>StarRatio</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-starratio-">#</a></h2>
<p>I've found a problem and haven't found a good solution, isn't it a reason for any developer to build new tool?</p>
<p>So I've planned to develop simple, usable tool over a weekend and ship it within less than a week. And here it is.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Currently, we are actively discussing different possibilities and directions in which this tool can grow. In the near future, we are going to release a version for .NET-based projects. Also, we are developing a way to save comparison sets, so users will be able to add useful comparisons to the tool.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-starratio-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-starratio-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>StarRatio</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-starratio-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>One of the biggest trends right now is JavaScript and especially different approaches, frameworks, libraries and tooling around JavaScript.</p>
<p>The is even a term - "JavaScript fatigue", that becomes really popular these days. You always need to choose on which subset of JavaScript to write, which framework/library/component/tool/bundler to use.</p>
<p>You can see that people are already really tender because of this and they already starting to think how to solve it.</p>
<p>StarRatio is one of the tools that helps to solve at least one problem from the whole "fatigue" set. I hope that in near future there would be more tools that help to rescue from that problem of choice.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I will not be unique and will advise to never stop learning.</p>
<p>But I will suggest one cool way of learning - prototyping.</p>
<p>Prototyping is an amazing way to learn and trying new things!</p>
<p>You can set a goal, as I did with StarRatio - create an app over a weekend. This will allow you to focus on the result and build a small but functional product.</p>
<p>Believe me, you will face a lot of real problems and you will learn how to solve them in a short period of time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I would suggest to interview <a href="https://github.com/andrew">Andrew Nesbitt</a>, the creator of <a href="https://github.com/DependencyCI">Dependency CI</a>, <a href="https://github.com/Librariesio">Libraries.io</a>, <a href="https://github.com/24pullrequests">24 Pull Requests</a> and <a href="https://github.com/splitrb">Split</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Dmitry! You should check out the <a href="http://starratio.js.org">StarRatio site</a> to learn more. Be sure to visit <a href="https://github.com/StarRatio/star-ratio">GitHub</a> too.</p>
RE:DOM - Tiny but Super Fast DOM Library - Interview with Juha Lindstedtaredomtinybutsuperfastdomlibraryinterviewwithjuhalindstedt2016-10-31t00:00:00z2016-10-31T00:00:00Z<p>Sometimes small is beautiful. <a href="https://twitter.com/pakastin">Juha Lindstedt</a>'s FRZR, a 4kB view library, was a nice example of that <a href="https://survivejs.com/blog/frzr-interview">as we saw earlier</a>. This time we'll discuss evolution of Juha's work - a solution known as <em>RE:DOM</em>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-re-dom-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-re-dom-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>RE:DOM</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-re-dom-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>
<figure><img src="/6e5b5775d16747e53b36e83c508b6f95.svg" alt="RE:DOM" class="author" width="100" height="100" /><figcaption>RE:DOM</figcaption></figure>
<a href="https://redom.js.org">RE:DOM</a> is a tiny UI library (~2 kB gzipped), handling only the hardest parts of managing the DOM. You could think of it as a vanilla JavaScript tool, but it's actually really useful in almost any kind of projects – even bigger ones.
</p>
<p>I create all my projects with it, even large single page applications. You can also render it on server-side with <a href="https://github.com/pakastin/nodom">NO:DOM</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-re-dom-work-" id="how-does-re-dom-work-"></a><span class="text">How does <em>RE:DOM</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-re-dom-work-">#</a></h2>
<p>I gave a more detailed explanation in my <a href="https://www.youtube.com/watch?v=0nh2EK1xveg">talk in HelsinkiJS / Frontend Finland</a>, but basically it allows you to create HTML elements and components really easily with HyperScript syntax. Another thing it does is it helps you to keep a list of components in sync with your data. Check out examples at the <a href="https://redom.js.org">RE:DOM website</a>.</p>
<p>The basic idea is to use HyperScript to create HTML elements:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> el<span class="token punctuation" >,</span> mount <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'redom'</span>
<span class="token keyword keyword-const" >const</span> hello <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'h1'</span><span class="token punctuation" >,</span> <span class="token string" >'Hello world!'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >mount</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation" >.</span>body<span class="token punctuation" >,</span> hello<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>You can also create components by defining an object with <code>el</code> property, which is the HTML element:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> el<span class="token punctuation" >,</span> text<span class="token punctuation" >,</span> mount <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'redom'</span>
<span class="token keyword keyword-class" >class</span> <span class="token class-name" >Hello</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >constructor</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// how to create a component</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>el <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'h1'</span><span class="token punctuation" >,</span>
<span class="token string" >'Hello'</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>name <span class="token operator" >=</span> <span class="token function" >text</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'world'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token string" >'!'</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >update</span> <span class="token punctuation brackets-parentheses" >(</span>name<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// how to update it</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>textContent <span class="token operator" >=</span> name
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-const" >const</span> hello <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Hello</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >mount</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation" >.</span>body<span class="token punctuation" >,</span> hello<span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >setTimeout</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
hello<span class="token punctuation" >.</span><span class="token function" >update</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'RE:DOM'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> <span class="token number" >1000</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>Keeping lists in sync is also really easy:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> el<span class="token punctuation" >,</span> list<span class="token punctuation" >,</span> mount <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'redom'</span>
<span class="token comment" spellcheck="true" >// create some data</span>
<span class="token keyword keyword-const" >const</span> data <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Array</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >100</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-for" >for</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token keyword keyword-let" >let</span> i <span class="token operator" >=</span> <span class="token number" >0</span><span class="token punctuation" >;</span> i <span class="token operator" ><</span> data<span class="token punctuation" >.</span>length<span class="token punctuation" >;</span> i<span class="token operator" >++</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
data<span class="token punctuation brackets-square" >[</span>i<span class="token punctuation brackets-square" >]</span> <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
id<span class="token punctuation" >:</span> i<span class="token punctuation" >,</span>
name<span class="token punctuation" >:</span> <span class="token string" >'Item '</span> <span class="token operator" >+</span> i
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// define Li component</span>
<span class="token keyword keyword-class" >class</span> <span class="token class-name" >Li</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >constructor</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>el <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'li'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >update</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span> name <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>el<span class="token punctuation" >.</span>textContent <span class="token operator" >=</span> name
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// create <ul> list</span>
<span class="token keyword keyword-const" >const</span> ul <span class="token operator" >=</span> <span class="token function" >list</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'ul'</span><span class="token punctuation" >,</span> Li<span class="token punctuation" >,</span> <span class="token string" >'id'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >mount</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation" >.</span>body<span class="token punctuation" >,</span> ul<span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// shuffle it every second</span>
<span class="token function" >setInterval</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
data<span class="token punctuation" >.</span><span class="token function" >sort</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >(</span>a<span class="token punctuation" >,</span> b<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> Math<span class="token punctuation" >.</span><span class="token function" >random</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >-</span> <span class="token number" >0.5</span><span class="token punctuation brackets-parentheses" >)</span>
ul<span class="token punctuation" >.</span><span class="token function" >update</span><span class="token punctuation brackets-parentheses" >(</span>data<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> <span class="token number" >1000</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-re-dom-differ-from-other-solutions-" id="how-does-re-dom-differ-from-other-solutions-"></a><span class="text">How does <em>RE:DOM</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-re-dom-differ-from-other-solutions-">#</a></h2>
<p>RE:DOM doesn't use Virtual DOM, but still allows you to define components and how to update them. For me it's the best of both worlds: mutability gives great flexibility and performance, but defining a one-directional flow of updates is very close to VDOM-approach.</p>
<p>It's also really tiny, but still does quite a lot of work. Not to mention it's really fast. The source is also really <a href="https://github.com/pakastin/redom/tree/master/src">easily readable</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-re-dom-" id="why-did-you-develop-re-dom-"></a><span class="text">Why did you develop <em>RE:DOM</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-re-dom-">#</a></h2>
<p>I actually first developed FRZR, which eventually got renamed to RE:DOM. RE:DOM is a bit more clever with element creation from queries, and better designed lists. Originally I created FRZR because I was one of the Riot 2.0 early contributors and wrote a HTML element reorder method for it, which Riot lacked.</p>
<p>Riot's original idea was to be a really simple UI library, which I think have got a bit out of hand. RE:DOM is basically my view of the simplest possible UI library. RE:DOM is also much more performant than Riot at the moment.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>There's some things in RE:DOM I need to think through. For example, <code>mounted</code> and <code>unmounted</code> "events" happen when attached/detached related to the parent component/element. They might be better if called when attached/detached to the DOM instead. But that's something that needs careful approach, so it doesn't affect the performance that much. There's also a possibility to use Web Components instead, let's see.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-re-dom-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-re-dom-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>RE:DOM</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-re-dom-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think web standards will eventually make frameworks and UI libraries quite obsolete. That's something recently discussed a lot in the <a href="https://www.polymer-project.org/summit">Polymer Summit</a>. That's a good direction, because I think frameworks are actually the source of most of the "JavaScript fatigue" and frustration in general.</p>
<p>Web standards are more thought through and also a safer choice, because they will (almost) always be backwards compatible – you can't say the same about frameworks. Abstraction usually also comes with a vendor lock-in: if you start a project with Angular for example, it's really hard to convert the project to some other framework.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Be open-minded about web standards and the DOM. It's not as scary and complex as many say it is. You don't always need a framework and you don't always have to follow the crowd. Less is more. I recently wrote <a href="https://medium.com/re-dom/master-the-dom-bc1a2a06089b">a Medium post about the subject</a>. Even if you use some framework, you should learn how the DOM work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You should interview <a href="https://twitter.com/tipiirai">Tero Piirainen</a>, the original author of Riot.js. Ask about web standards and simplicity in web development :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Juha! RE:DOM looks great to me. Especially that Web Component direction sounds interesting. I think you are right in that given enough time, web standards will make a lot of the current solutions obsolete (a good thing!).</p>
<p>To get started with, head to <a href="https://redom.js.org">RE:DOM website</a>. Check out also the <a href="https://github.com/pakastin/redom">GitHub project</a>.</p>
Glamor - Inline CSS for React et al - Interview with Sunil Paiaglamorinlinecssforreactetalinterviewwithsunilpai2016-10-17t00:00:00z2016-10-17T00:00:00Z<p>If you ask multiple React developers their styling approaches, you will also get multiple different answers. One trend is clear, though, the movement towards inline styling.</p>
<p>This is something that was considered an anti-pattern before React, but as React has become more popular, we are also more open to question our earlier beliefs.</p>
<p>I've <a href="https://survivejs.com/react/advanced-techniques/styling-react/">discussed various approaches</a> myself. Each solve similar problems in different ways. Today I'm interviewing <a href="https://twitter.com/threepointone">Sunil Pai</a>, the author of an inline CSS solution known as Glamor. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/6eadce66e218b83b484c5e1ee293f5b9?s=200" alt="Sunil Pai" class="author" width="100" height="100" />
</span>
Hi! My name's Sunil Pai, and I wrote the css-in-js library <a href="https://github.com/threepointone/glamor">Glamor</a>. In the past, I have built a bunch of websites for Myntra, Yahoo, Visa etc. I now write JavaScript libraries for fun and/or world domination.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_glamor_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_glamor_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Glamor</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_glamor_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>The official line is Inline CSS for Components, but in my opinion it's THE missing CSS piece for React. I wrote a longer piece on how <a href="https://gist.github.com/threepointone/c382856fd2e2c325f8d230e85d85499b">React solves 'writing' web pages</a> in a natural way, and Glamor is the css companion to that piece.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_glamor_-work-" id="how-does-_glamor_-work-"></a><span class="text">How does <em>Glamor</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_glamor_-work-">#</a></h2>
<p>First the developer defines inline CSS rules as JavaScript objects. Something like <code><div {...style({ color: 'red' })/></code> or with the <code>createElement</code> replacement <code><div css={{ color: 'red' }} /></code>.</p>
<p>In the background, Glamor treats CSS rules as 'values', generates an identifier corresponding to that rule (similar to Clojure hashes for their data structures). It attaches this id to a DOM element with a data-attribute, while also adding the rule to a <strong>real</strong> stylesheet. Glamor also dedupes rules, manages universal shims, adds vendor prefixes, all the boring stuff you don't want to do by hand.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-_glamor_-differ-from-other-solutions-" id="how-does-_glamor_-differ-from-other-solutions-"></a><span class="text">How does <em>Glamor</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-_glamor_-differ-from-other-solutions-">#</a></h2>
<p>I really like this <em>css-as-values</em> abstraction. It enables a bunch of nice properties, like not having to <em>name</em> a rule unless preferred, and letting the developer choose how to compose/modularize their code. Glamor also tries hard to allow <em>all</em> possible CSS features, with no compromises on selectors and what not. And it works hard at being efficient, so you shouldn't worry about it being a part of your stack.</p>
<p>I'm also happy with the abstraction this library offers; it's low level enough that it's mostly invisible, but allows for some higher order programming. Indeed, Glamor itself ships with shims for <a href="https://github.com/Khan/aphrodite">Aphrodite</a> and <a href="https://github.com/smyte/jsxstyle">jsxstyle</a> APIs, and I'm totally on the lookout for other interesting options.</p>
<p>There's some other technical stuff like super efficient css <em>insertion</em>, <strong>precise</strong> server side rendering, a plugin system, etc, but I think the css-as-values abstraction is the nicest.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_glamor_-" id="why-did-you-develop-_glamor_-"></a><span class="text">Why did you develop <em>Glamor</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_glamor_-">#</a></h2>
<p>It started off as an exploration of <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet">a browser API I'd never used</a>. I was also checking out other css-in-js libraries at the time, and none of them really ticked off all the things I wanted from such a library.</p>
<p>One week of furious coding later, Glamor was born, tests and all. Since then, I've been tweaking and polishing away at the thing, with help from some nice online folks who are using it as well. There might be many css-in-js libraries, but this is the one I like.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Well, there a bunch of <a href="https://github.com/threepointone/glamor/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement">fun enhancements</a> planned. React Native support would be nice too, I guess? In the slightly more distant future, I'm curious to see how React itself deals with CSS / alternative styling systems (like terminals, WebGL, etc).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-_glamor_-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-_glamor_-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Glamor</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-_glamor_-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think React has really ignited this discussion around rethinking <em>best practices</em>, even if not directly connected with using React itself; as an example, I can't imagine writing another <code>className</code> by hand after having used something like Glamor. I think this trend will continue, particularly around using 'components'/JSX to represent other <em>stateful</em> parts of your <strong>system</strong>.</p>
<p>I also see some movement towards micro-transpilation; adding a plugin or two to get some compile time powers for your code. This already exists for most compile-to-js languages, and it's also how devs use <em>new</em> JavaScript features in places without support for the same.</p>
<p>I think developers will further add their own tiny compiler transforms with Babel/whatever to their apps and unlock new functionality (I'm told the LISP folks have had this for decades with macros).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>I think the internet is really noisy right now; trying to listen to everybody and doing everything will probably overwhelm most (all?) people. Don't get distracted by them, and don't try to learn everything at once. Focus on what you want to build, and having some fun while doing so. Otherwise, it's really not worth it, no matter what your stack looks like.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Could you find _why for me? I think the world could use him right now. I'd love to hear what @jingc's working on, and how @tjholowaychuk's startup journey's going.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Sunil! It's cool to see innovation around this area. Incidentally I had to work with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet">StyleSheet API</a> as well and I ended up writing some <a href="https://www.npmjs.com/package/stylesheet-helpers">helpers to make it easier</a> to use. StyleSheet API might not be the most developer friendly API, but the performance is there. Let the browser do what it does the best.</p>
<p>To learn more, check out the <a href="https://github.com/threepointone/glamor">GitHub project page of Glamor</a>. The API is beautifully simple.</p>
Teaching JavaScript - Interview with Bianca Gandolfoateachingjavascriptinterviewwithbiancagandolfo2016-10-03t00:00:00z2016-10-03T00:00:00Z<p>I have chosen one approach when it comes to teaching JavaScript and related topics. Books are just a way amongst many others. Today I'm interviewing another professional, <a href="https://twitter.com/BiancaGando">Bianca Gandolfo</a>, about the topic. Let's see what she thinks about teaching JavaScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/3a6815d1148f39b83841a55d238cd563?s=200" alt="Bianca Gandolfo" class="author" width="100" height="100" />
</span>
Sure. My name is Bianca, and I've been teaching people and writing curriculum on how to become a web developer for about 3 years now while working at Hack Reactor, cofounding Telegraph Academy and teaching in other venues like Girl Develop It, Laboratory (in Peru) and online with Frontend Masters, Pluralsight, and Udemy.
</p>
<p>I also code on the side, but I spend 70% of my work time related to education, coaching, mentoring and content creation. Right now I am in Kuala Lumpur and will be traveling with my partner and working remotely for the next several months or so.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-do-you-prefer-to-teach-javascript-" id="how-do-you-prefer-to-teach-javascript-"></a><span class="text">How do you prefer to teach JavaScript?</span><a class="header-anchor-select" href="https://survivejs.com/#how-do-you-prefer-to-teach-javascript-">#</a></h2>
<p>I prefer to teach JavaScript live and in smaller settings because it is fascinating to learn how each person's mental model evolves over time. I feel like detective trying to find the cracks in that model to fill it in. I always wanted to become Harriet the Spy so the process is just like that to me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#is-there-something-particularly-difficult-about-teaching-" id="is-there-something-particularly-difficult-about-teaching-"></a><span class="text">Is there something particularly difficult about teaching?</span><a class="header-anchor-select" href="https://survivejs.com/#is-there-something-particularly-difficult-about-teaching-">#</a></h2>
<p>Hmm. Great question. It can be tough to teach when you are disconnected from the beginner's mind. When you are so familiar with something, you start to have assumptions about what the person already knows.</p>
<p>I avoid this pattern by staying a student of my students, which looks like being annoyingly curious and asking a lot of questions. If you see my teaching style, it is very Socratic and more of a discussion because I always want to learn where everyone is.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-have-you-learned-about-teaching-and-training-in-general-" id="what-have-you-learned-about-teaching-and-training-in-general-"></a><span class="text">What have you learned about teaching and training in general?</span><a class="header-anchor-select" href="https://survivejs.com/#what-have-you-learned-about-teaching-and-training-in-general-">#</a></h2>
<p>I have learned a lot about communication, and I continue to nerd out on effective communication. Communication isn't just about saying what you intend to say and it coming out eloquently, it is about what the person walks away with with includes a message but also feelings, etc. I am always testing what message students walk away with and monitoring the environment so that I can hone in on what is going right and what I need to improve.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-javascript-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-javascript-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for JavaScript and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-javascript-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I don't like this question! Unfortunately the JS/Web community is pretty fragmented and tribal, which means people are re-inventing the wheel all the time and defending very minor points or brand identities. The future looks like it will continue that way, and I will continue to stay out of it. :)</p>
<p>I will just use whatever tool is required to get the job done until it doesn't anymore. I also like to dabble in lots of different things, but I am not the type to hold strong opinions about anything unless I have extensive experience which I'll never have with something that is new.</p>
<p>The nice thing about being an engineer and not a politician is that I can stick to my facts and not try to predict the future!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Haha, wow. I should write a book on this :)</p>
<p>I will just stick to one which I think is the most important. Aside from learning the technical pieces, you should learn how to effectively measure your learning, especially if you are self studying. There are lots of things you can do that will give you a false sense of productivity but at the end of the day you can't actually build anything.</p>
<p>The key - research, google, read, watch videos etc just enough so that you can build the thing. Laying down before bed and reading about X framework, tool or whatever will only get you so far (not far at all). It doesn't have to be complicated. Pick a small project. Make a view show up as quickly as possible and then go from there.</p>
<p>How do you know if you are learning? You are able to apply whatever you are studying to build something or solve small programming challenges.</p>
<p>The metaphor I use a lot with students is if you want to learn how to write poetry in Spanish (assuming you don't speak Spanish), you can start by reading Spanish poetry and/or about Spanish poetry, sure. But when you sit down at your laptop and try to write it, you probably won't be able to at first, despite all your research.</p>
<p>The fastest way to learn how to write poetry in Spanish is to simply start writing it in Spanish. Yes, it will be terrible at first, but you have to start somewhere. Programming is just the same!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>These are my favorite eng educators:
Albrey Brown (Telegraph Academy), Scott Moss (Angular Class, Udacity, Hack Reactor), Patrick JS (Angular Class, OSS contributor), Aysegul Yonet (Autodesk, Girl Develop It, Annie Cannons), Brenda Gin (Girl Develop It, Slack)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Bianca! It's cool to see a little different take on JavaScript every once in a while. Teaching and learning are those topics that easily go overlooked. Even though I've been working with JavaScript for a decade myself, it feels like there's always something to learn. And what's a nicer way to learn than to teach.</p>
react-game-kit - Make games with React - Interview with Ken Wheelerareactgamekitmakegameswithreactinterviewwithkenwheeler2016-09-26t00:00:00z2016-09-26T00:00:00Z<p>What's more fun than making applications with React? Making games of course! I remember coding Pong in Python (harder than it sounds) and writing a text adventure or two. Games look deceptively simple but are quite difficult to code.</p>
<p>Today I'm interviewing <a href="https://twitter.com/ken_wheeler">Ken Wheeler</a> about <a href="https://github.com/FormidableLabs/react-game-kit">react-game-kit</a>. You might recognize the name from projects such as <a href="https://github.com/FormidableLabs/spectacle">spectacle</a>, <a href="https://github.com/FormidableLabs/react-music">react-music</a>, or <a href="https://github.com/FormidableLabs/webpack-dashboard">webpack-dashboard</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/4751e2e9fe7b876958d38f86a718ca91?s=200" alt="Ken Wheeler" class="author" width="100" height="100" />
</span>
My name is Ken. It means "handsome" in Gaelic, and "yes" in Hebrew.
</p>
<p>I like America, short walks on the beach, food thats bad for you, recreational archery, and brown liquor.</p>
<p>I'm the Director of Open Source at Formidable, where I turn coffee into GitHub stars.</p>
<p>I'm a dad and husband, I used to be a rapper, and my favorite color is snow camo.</p>
<p>I'm a software engineer, but I look like a cop, so cops and military give me this nod all the time like I'm off duty, which puts me in a funny position where I am guilty yet flattered.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-game-kit-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-game-kit-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>react-game-kit</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-game-kit-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>react-game-kit</em> is a set of components that provide the basic building blocks for game development using React and React Native. It takes care of the repetitive hard stuff, so that you can focus on the hard hard stuff.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-react-game-kit-work-" id="how-does-react-game-kit-work-"></a><span class="text">How does <em>react-game-kit</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-react-game-kit-work-">#</a></h2>
<p>A central game loop is created using the <code>Loop</code> component, which is then passed down via context like <code>Provider</code> does for Redux. Next there are a set of optional components that you can use to craft your game.</p>
<p><code>Stage</code> helps set game area boundaries and calculates scale ratios, <code>World</code> creates a physics world, and you can use <code>Body</code> components to add entities to that world.</p>
<p><code>Tilemap</code> lets you generate levels from a tile atlas, and <code>Sprite</code> facilitates the creation of multi-state sprite animations using a spritesheet.</p>
<p>All of these components use the context based loop to keep everything in sync.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-react-game-kit-differ-from-other-solutions-" id="how-does-react-game-kit-differ-from-other-solutions-"></a><span class="text">How does <em>react-game-kit</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-react-game-kit-differ-from-other-solutions-">#</a></h2>
<p>I'm not sure there are other solutions in the React world? There are other ways to make games, things like Phaser and Unity, but they are super fully featured, whereas react-game-kit is literally bare bones.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-react-game-kit-" id="why-did-you-develop-react-game-kit-"></a><span class="text">Why did you develop <em>react-game-kit</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-react-game-kit-">#</a></h2>
<p>My 9 year old brother made some pixel art using Qixels, this toy where you have little blocks and you can spray water on them. He approached me and pitched a game and asked if I could build it. I was like duh bro, of course I can.</p>
<p>So my first shot was with SpriteKit on iOS. I've been doing a lot of React Native so I decided I wanted to try to bridge SpriteKit. Then I realized, this isn't going to work for Android.</p>
<p>So I decided to try and build the game with just React Native. It actually performed better than SpriteKit on the simulator.</p>
<p>After this I pitched a talk about making games with React, and when I started creating the material and the game demo, I thought, why am I doing this again, I should just build a helper lib for the repetitive stuff. And then I did.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Who knows. Probably an e-learning tool. That'd be chill.</p>
<p>I like the idea of continuing to push the limits of using React, but at the same time I should probably build some stuff that will get everyday use as well. I'd like to do some more Node OSS. And I really want to build something cool with Reason.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-game-kit-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-game-kit-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>react-game-kit</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-game-kit-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Well, for react-game-kit, I'd like to switch over to a GL based solution once the libs are ready for React/React Native. Then we can see some real perf.</p>
<p>Web dev in general? I think WebAssembly is a gonna be pretty huge, WebWorker stuff, VR, and some cool stuff with some of the APIs browsers are providing like WebAudio.</p>
<p>I would definitely check out some of the stuff the squad at ExponentJS is doing. I see a future where we have an app browser, where you get the responsiveness and power of a native app, with the urls/discovery/etc of the web.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Are they already programmers? If so, I'd say get a stress ball.</p>
<p>If they aren't, I'd recommend learning programming fundamentals. And then language fundamentals. Don't even think about using an abstraction until you understand how objects and arrays work.</p>
<p>If you know the fundamentals, its SO much easier to hop into new libraries/frameworks. If you start with a framework and then never learn fundamentals, learning the next thing will be hard all over again. If you are fundamentally sound, you see exactly what the new stuff is doing and then you just need to read the API docs and get acquainted.</p>
<p>Another thing I might say is slow down and read the manual.</p>
<p>Type things out, don't copy and paste. There is a lot of "webpack is hard" type of sentiment out there, and I don't buy it. It's more like webpack configs get copy and pasted and we don't know how to fix it.</p>
<p>If you slow down and write a config out by hand while perusing the API, webpack really isn't that bad. It's a lot easier to add stuff a la carte than to start with a huge prebuilt config and try to figure out what part doesn't work for your app.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Hmmm... Good question. I'd recommend:</p>
<ul>
<li>Sunil Pai - He builds really cool stuff and like myself, loves to make a mockery of JSX. Also wrote <a href="https://github.com/threepointone/glamor">glamor</a>, which is pretty dope.</li>
<li>Nikhilesh Sigtapu - This dude is the smartest guy I know. He builds the kind of stuff I would build if I went to college. He also makes magic happen at <a href="https://getexponent.com/">ExponentJS</a>.</li>
<li>Leland Richardson - Dude is a beast. Brought us hit records such as <a href="https://github.com/airbnb/react-native-maps">react-native-maps</a> and <a href="https://github.com/airbnb/enzyme">Enzyme</a>, and has this chill new project <a href="https://github.com/lelandrichardson/redux-entity">redux-entity</a>.</li>
<li>Safia Abdalla - She is the master of all things data, and works on <a href="https://github.com/nteract/nteract">Nteract</a>, which is a really cool interactive notebook built in React on Electron.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Ken! Check out <a href="https://github.com/FormidableLabs/react-game-kit">react-game-kit</a> on GitHub to learn more.</p>
Reactotron - A CLI and OS X App for Inspecting - Interview with Steve Kellockareactotronacliandosxappforinspectinginterviewwithstevekellock2016-09-19t00:00:00z2016-09-19T00:00:00Z<p>If there's one thing that has set React community apart, it's the focus on developer experience (DX). Historically developer tools haven't been the greatest, but this is slowly and surely changing. Reactotron by <a href="https://twitter.com/skellock">Steve Kellock</a> is a good example of this trend. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/0fb48c7e9a462c7e6d312ef50d618e12?s=200" alt="Steve Kellock" class="author" width="100" height="100" />
</span>
Hi. I’m Steve. I live with my wife and 2 boys (4 and 2) in Tiny, Canada (2 hours north of Toronto). It’s pretty rural. Farms and tractors. That sort of thing. =)
</p>
<p>Been a professional dev for 23(ish?) years. First computer was a TI 99/4A. First real language was Turbo Pascal, which turned in long love affair with Borland Delphi.</p>
<p>I’m currently working with the crazy-awesome folks at <a href="https://infinite.red">Infinite Red</a> doing mobile dev. React Native to be specific.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-reactotron-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-reactotron-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Reactotron</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-reactotron-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>If the app you’re building had a Twitter feed, it’d be Reactotron. It streams to you information about your app’s state, API calls, benchmarks, exceptions, and other stuff.</p>
<p>If you love debuggers like gdb or lldb, <a href="https://www.sadtrombone.com/?autoplay=true">this isn’t for you</a>. If your debugging experience consists of well placed <code>console.log</code> calls, then, welcome home my friend.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-reactotron-work-" id="how-does-reactotron-work-"></a><span class="text">How does <em>Reactotron</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-reactotron-work-">#</a></h2>
<p>It plugs into your React JS or React Native app and relays info up to 1 of the 2 flavours of Reactotron running on your computer: Desktop or CLI.</p>
<p>If your app uses Redux, you can track state changes, subscribe to parts of your state tree, and even replay & dispatch actions. There are ways to pass data like you would <code>console.log</code> and even supports images.</p>
<p><figure><img src="/bf4a71a4fbcb78c0a7dd5ac5150607ab.gif" alt="Reactotron in action" class="" width="" height="" /><figcaption>Reactotron in action</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-reactotron-differ-from-other-solutions-" id="how-does-reactotron-differ-from-other-solutions-"></a><span class="text">How does <em>Reactotron</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-reactotron-differ-from-other-solutions-">#</a></h2>
<p>So, I consider <code>console.log</code> the “other solution”. There’s something magical about it, right?</p>
<p>It’s first tool that most people turn to when something goes sideways. With little effort, it is placed in (hopefully) the right place to lift up the answer to your problem. Maybe an API response? Maybe a piece of poorly-behaving state?</p>
<p>Now, there are wonderful tools out there that specialize in specifics like breakpoints & code stepping. There are fantastic add-ons for working with just Redux.</p>
<p>Continue to use them. They’re great. The harder problems will require these heavy hitters.</p>
<p>But for me, streaming a series of manually-placed debug logs or automatically-streaming API calls & state changes is a pretty pleasant experience.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-reactotron-" id="why-did-you-develop-reactotron-"></a><span class="text">Why did you develop <em>Reactotron</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-reactotron-">#</a></h2>
<p>Classic itch scratching.</p>
<p>The apps I was helping build exceed the limit working memory & attention capacity of my aging brain.</p>
<p>This pattern was becoming too common:</p>
<ul>
<li>you kick off an API call</li>
<li>it returns some goodies</li>
<li>you transform it for your app</li>
<li>shotgun it through your reducers</li>
<li>have it appear in your views</li>
<li>and maybe trigger other workflows & sagas…</li>
</ul>
<p>Well, I couldn’t follow it.</p>
<p>I mean, I could. But it involved focusing; which is not a strength of mine. Squirrel!</p>
<p>And I didn’t want to litter log statements everywhere.</p>
<p>I just wanted to see the final state.</p>
<p>Or better yet, the journey of actions & network calls it made along the way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I have a big list of candidates. The things that top that list are visualization problems.</p>
<ul>
<li>Filtering events within Reactotron</li>
<li>Tracking redux-saga effects</li>
<li>things like memory, cpu usage, and other perf issues</li>
</ul>
<p>Windows compatibility is up there too.</p>
<p>MobX is coming. Reactotron is built with MobX but can only track Redux-based state. Awk....ward.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-reactotron-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-reactotron-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Reactotron</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-reactotron-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Reactotron will likely stay in JS and try to service that passive-debugging need that lives between <code>console.log</code> and a real debugger.</p>
<p>Reactotron started out as a CLI app.</p>
<p>But it wasn’t until I ported it to the desktop with Electron did I realize just how deep the web dev rabbit hole goes.</p>
<p>React Native feels more like web dev than mobile dev, but it wasn’t until I finished building the desktop version that it donned on me: this “way” to create apps is MUCH better.</p>
<p>Next few years will be a steamroller for “web” and compile-to-js.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>The web isn’t just the web anymore. Web apps, mobile apps, and desktop apps are just apps, so try to focus on things that help you do one thing: ship.</p>
<p>Focusing only on the tech is a mistake. No stack will guarantee a successful product. There are always multiple right answers.</p>
<p>Don’t get hung up in the great “State Wars” of 2016 or the upcoming Battle of JS Compilers in 2017. You’ve got work to do.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I’d like to hear more about Ken Wheeler’s React adventures. Behind the hilarious persona is a guy delivering some crazy awesome open source React-based projects.</p>
<p>Janic Duplessis, the unsung hero of React Native, would be another good pick.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Steve! It's definitely one cool looking tool. To get started, head to <a href="https://github.com/reactotron/reactotron">GitHub</a>. Consider also following <a href="https://twitter.com/reactotron">@reactotron</a> for fresh news related to it.</p>
Reactabular - Spectacular tables for React - Interview with Juho Vepsäläinenareactabularspectaculartablesforreactinterviewwithjuhovepsalainen2016-09-12t00:00:00z2016-09-12T00:00:00Z<p>Writing a little HTML table isn't particularly hard. It all gets more complex when you need logic like filtering, pagination, or fixed headers. A simple problem becomes difficult fast as requirements appear.</p>
<p>When it comes to React, there are a few established alternatives out there. Consider Facebook's <a href="https://www.npmjs.com/package/fixed-data-table">fixed-data-table</a>, <a href="https://griddlegriddle.github.io/Griddle/">Griddle</a>, <a href="https://allenfang.github.io/react-bootstrap-table/">react-bootstrap-table</a>, <a href="https://react-component.github.io/table/">rc-table</a>, <a href="https://bvaughn.github.io/react-virtualized/">react virtualized</a>, or <a href="https://glittershark.github.io/reactable/">Reactable</a> for a few examples.</p>
<p>Today I'm going to discuss an alternative which I developed during the Summer. The project actually goes way back, but a client made this work possible. Read on to learn what makes <a href="http://reactabular.js.org/">Reactabular</a> different.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/b26ec3c2769168c2cbc64cc3df9cdd9c?s=200" alt="Juho Vepsäläinen" class="author" width="100" height="100" />
</span>
I maintain this site and have written a book on React and webpack (available on the site). I've been programming well over a decade and started web development when jQuery didn't even exist. The last year or two have been focused on establishing a little business. The books are an important part of that effort.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-reactabular-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-reactabular-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Reactabular</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-reactabular-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>When it comes to React tables, you will always find several key ideas: <strong>rows</strong>, <strong>column definition</strong>, <strong>React components</strong>. This is the trinity of Reactabular.</p>
<p>I expect that you pass an array of objects (or arrays) to it. You will define how to display these rows using a separate column definition that maps properties to specific columns. React components are more about how the table is laid out. You can swap portions of the rendering pipeline with parts of your own to customize it further. This has enabled me to build functionality on top of the light table core.</p>
<p>Reactabular might not be the easiest component to use. It actually consists of a series of small packages (around twenty) that work together. I've implemented something known as <a href="https://www.npmjs.org/package/reactabular-easy">reactabular-easy</a> that provides an interface closer to the alternatives. You'll lose out on flexibility, but it should be literally easier to pick up without wiring that much.</p>
<p>There's also a meta-package of sort known as simply <a href="https://www.npmjs.com/package/reactabular">reactabular</a>. It contains most of the functionality behind a single interface. You still have to fetch extra functionality, such as editing or pagination, from separate ones. I see it as a legacy way out and I actually generate an old-fashioned build found at the <a href="https://github.com/reactabular/reactabular">project repository</a> based on this packages.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-reactabular-work-" id="how-does-reactabular-work-"></a><span class="text">How does <em>Reactabular</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-reactabular-work-">#</a></h2>
<p>As I mentioned earlier, Reactabular has a strong conceptual foundation. I would say column definition is the most interesting part of the component as I've pushed a lot of problems there. Instead of providing a prop for every feature, I rather let you compose your solutions on top of my ideas.</p>
<p>I didn't want to grow the core to support every possible use case. Instead I wanted to end up with a design that would allow me to push problems into user space. That said, the packages I've implemented cover a lot of ground and depending on your case, not a lot of extra work might be required.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#column-definition" id="column-definition"></a><span class="text">Column Definition</span><a class="header-anchor-select" href="https://survivejs.com/#column-definition">#</a></h3>
<p>To understand better how Reactabular works, it's a good idea to dig into the column definition. Consider the following example:</p>
<pre><code class="lang-jsx"><span class="token keyword keyword-const" >const</span> columns <span class="token operator" >=</span> <span class="token punctuation brackets-square" >[</span>
<span class="token comment" spellcheck="true" >// Map color to the first column</span>
<span class="token punctuation brackets-braces" >{</span>
property<span class="token punctuation" >:</span> <span class="token string" >'color'</span><span class="token punctuation" >,</span>
header<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
label<span class="token punctuation" >:</span> <span class="token string" >'Color'</span><span class="token punctuation" >,</span>
transforms<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
color <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Show alert when a color header cell is clicked</span>
onClick<span class="token punctuation" >:</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token function" >alert</span><span class="token punctuation brackets-parentheses" >(</span><span class="token template-string" ><span class="token string" >`clicked </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span>color<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
cell<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Format color content cells in a special way</span>
format<span class="token punctuation" >:</span> color <span class="token operator" >=></span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>span</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >{</span> color <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span><span class="token punctuation brackets-braces" >{</span>color<span class="token punctuation brackets-braces" >}</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// Map name parts to a column</span>
<span class="token punctuation brackets-braces" >{</span>
header<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
label<span class="token punctuation" >:</span> <span class="token string" >'Name'</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token comment" spellcheck="true" >// Given a name is given in parts, define separate</span>
<span class="token comment" spellcheck="true" >// columns for it</span>
children<span class="token punctuation" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token punctuation brackets-braces" >{</span>
property<span class="token punctuation" >:</span> <span class="token string" >'name.first'</span><span class="token punctuation" >,</span>
header<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
label<span class="token punctuation" >:</span> <span class="token string" >'First Name'</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
property<span class="token punctuation" >:</span> <span class="token string" >'name.last'</span><span class="token punctuation" >,</span>
header<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
label<span class="token punctuation" >:</span> <span class="token string" >'Last Name'</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-square" >]</span><span class="token punctuation" >;</span>
</code></pre>
<p>A lot of the column definition likely explains itself. There are a couple of parts that will require additional explanation to see the point. Consider <code>format</code> for instance. It allows you to shape value formatting when rendering. This is useful if you want to transform the input into something else or attach extra logic to it.</p>
<p>While <code>format</code> operates within a cell, <code>transforms</code> operate on a table cell itself. You can use it to attach handlers to it like above. There's also an interception mechanism that allows us to implement editors through this interface. If a transform returns <code>children</code>, it will override any subsequent result. That's a powerful mechanism in its simplicity.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-definition" id="react-definition"></a><span class="text">React Definition</span><a class="header-anchor-select" href="https://survivejs.com/#react-definition">#</a></h3>
<p>Besides row data and a column definition, Reactabular requires one more part to work - React definition. To give you an idea of a fairly advanced one, consider the following example where I split data into two bodies while showing a header for both:</p>
<pre><code class="lang-jsx"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Provider</span> <span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>columns<span class="token punctuation brackets-braces" >}</span></span><span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Header</span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Body</span>
<span class="token attr-name" >rows</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>rows<span class="token punctuation" >.</span><span class="token function" >filter</span><span class="token punctuation brackets-parentheses" >(</span>r <span class="token operator" >=></span> r<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>first <span class="token operator" >===</span> <span class="token string" >'Adam'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >rowKey</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>id<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Header</span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Body</span>
<span class="token attr-name" >rows</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>rows<span class="token punctuation" >.</span><span class="token function" >filter</span><span class="token punctuation brackets-parentheses" >(</span>r <span class="token operator" >=></span> r<span class="token punctuation" >.</span>name<span class="token punctuation" >.</span>first <span class="token operator" >===</span> <span class="token string" >'Brian'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span></span>
<span class="token attr-name" >rowKey</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>id<span class="token punctuation" >"</span></span>
<span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Table.Provider</span><span class="token punctuation" >></span></span>
</code></pre>
<p>A minimal definition with an extra <code>className</code> could be like this:</p>
<pre><code class="lang-jsx"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Provider</span>
<span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>pure-table pure-table-striped<span class="token punctuation" >"</span></span>
<span class="token attr-name" >columns</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>columns<span class="token punctuation brackets-braces" >}</span></span>
<span class="token punctuation" >></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Header</span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Table.Body</span> <span class="token attr-name" >rows</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation brackets-braces" >{</span>rows<span class="token punctuation brackets-braces" >}</span></span> <span class="token attr-name" >rowKey</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>id<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Table.Provider</span><span class="token punctuation" >></span></span>
</code></pre>
<p>The table definition is fairly flexible. It generates standard <code>table</code> elements by default. You could add <code>tfoot</code> within the definition and expect it to work without any problems. That's something handy for generating summaries based on data for example.</p>
<p>There are also hooks for customizing rendering per row (<code>Table.Body.onRow</code> prop). You can also replace <code>Table.Provider</code> <code>components</code> with your own if you aren't happy with the defaults. Instead of rendering a regular table, you could render divs. Or you could inject React components. I implemented drag and drop on top of the core this way. The hooks also enabled a performance related feature known as virtualization without a lot of effort.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-reactabular-differ-from-other-solutions-" id="how-does-reactabular-differ-from-other-solutions-"></a><span class="text">How does <em>Reactabular</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-reactabular-differ-from-other-solutions-">#</a></h2>
<p>When I started developing Reactabular in early 2015 I found the existing solutions too monolithic. I gravitated towards the idea of a column definition early on. I would say the work done during this Summer helped to make the ideas shine. The emphasis on keeping the core decoupled and extensible is the thing that sets Reactabular apart in good and bad.</p>
<p>I learned a lot in the process and became a great fan of <a href="https://medium.com/@bebraw/the-case-for-monorepos-907c1361708a">monorepos</a>. I also picked up a few React tricks along the way. All of this is good as it will lead to stronger content.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-reactabular-" id="why-did-you-develop-reactabular-"></a><span class="text">Why did you develop <em>Reactabular</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-reactabular-">#</a></h2>
<p>I needed a table component for my <a href="https://github.com/bebraw/react-crm-frontend">old CRM project</a>. The idea was to develop something on top of React, Swagger, and all that. The project has since then died out, but a table component, and a few others, came out of it.</p>
<p>The Summer work was sponsored by a company known as <a href="http://www.kenandy.com/">Kenandy</a>. The component wouldn't be where it is today without their support. Having a client as a driver is most helpful and keeps you grounded as you are solving actual problems instead of only the fun ones.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>From my point of view Reactabular is in maintenance mode right now. It is packed with functionality and I will work on it based on the client needs. I consider it ready on a conceptual level and I'm quite happy with the design. There's always something to improve, but it feels fairly solid right now.</p>
<p>As there's less technical work to be done, I'll put more of my personal effort towards pushing webpack and SurviveJS further. The project taught me quite a bit and I'll be able to recycle the learnings into new content.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-reactabular-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-reactabular-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Reactabular</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-reactabular-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope the right people find Reactabular. I believe it has potential to make table related tasks less arduous. There's certain upfront investment as you have to understand the design and concepts to make most out of it, but if you do, I think you could find value in it.</p>
<p>Web development itself is in an interesting place. If you consider something like Reactabular, it's currently limited within the domain of React. A lot of the logic actually works without, but even then the potential market is limited by definition. I truly hope we can push towards solutions that allow us to reuse more component level code across boundaries.</p>
<p>I'm likely not alone with this pain and I hope standards catch up with the recent developments. It always takes some time, but eventually we get there I hope. An alternative is of course that it will all get even messier and fragmented.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Web development is a broad domain. Don't try to understand all of it at once. Instead, try to develop strength in one area before moving to another. Understanding JavaScript the language opens a lot of doors by itself. Topics such as CSS are difficult by themselves.</p>
<p>In short, don't bite too much at once. Patience is gold.</p>
<p>When it comes to motivation, find projects that are interesting to you. Sometimes getting to your goal might not be that easy, but that's when you learn the most. If you are doing something you find challenging, the chances are that you are learning.</p>
<p>I bet when most of us look to our old projects, we find a lot of room for improvement. Even within a year you'll change a lot as a developer as you learn more about the field. Technological advancement makes sure it never grows old.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have a couple of names in mind, but I'll keep those to me. I guess you'll have to wait and see.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you find <a href="http://reactabular.js.org/">Reactabular</a> useful for your projects. Even if the component or its approach aren't that interesting to you, consider checking out <a href="https://github.com/reactabular/reactabular">the project repository</a>.</p>
<p>Given the project has been arranged as a monorepo, it might look a little different than what you are used to. The approach is worth understanding and I believe it might change the way we think about structuring applications even instead of just npm packages.</p>
<p>To understand the design decisions I took with Reactabular, check out <a href="https://survivejs.github.io/react-api-design/">my slides on React API design</a>.</p>
<p>Here's a presentation I gave about the topic:</p>
<iframe width="100%" height="300px" src="https://www.youtube.com/embed/nEn5k_HXeNc" frameborder="0" allowfullscreen></iframe>
Assetgraph - Optimization Framework for Web Pages and Applications - Interview with Peter Mülleraassetgraphoptimizationframeworkforwebpagesandapplicationsinterviewwithpetermuller2016-09-05t00:00:00z2016-09-05T00:00:00Z<p>If you have written a web application or site, you have had to deal with various assets like images, fonts, HTML, JavaScript code, whatnot. It's not a simple task to keep it all organized. This is why we have tools like <a href="https://webpack.github.io/">webpack</a>, <a href="http://browserify.org/">browserify</a>, or <a href="http://jspm.io/">jspm</a> after all.</p>
<p>Today I'm interviewing <a href="https://twitter.com/_munter_">Peter Müller</a>, the author of <a href="https://github.com/assetgraph/assetgraph">AssetGraph</a>, a tool fitting this category. Read on to learn more about the problem and how the tool solves it in a rather unique way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/01349d877b6e4b9c0ddbadf97f07fa0d?s=200" alt="Peter Müller" class="author" width="100" height="100" />
</span>
I am a seasoned front-end developer with lots of experience in developing high usage productivity applications that drive daily workflows. I've focused my attention on the problems surrounding development and build tooling for web sites for a long time and have gained an ever-increasing appreciation of simplicity wherever it can be found.
</p>
<p>I am a maintainer of the <a href="https://github.com/assetgraph/assetgraph">Assetgraph</a> project, authored <a href="https://github.com/One-com/one-color">one-color</a> and contribute to <a href="https://github.com/mochajs/mocha">Mocha</a> and <a href="https://github.com/unexpectedjs/unexpected">Unexpected</a>. I recently had my first child, dealt with cancer, and became the owner of a garden, where I hope to put my feet up and relax once in a while.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong>. I'm actually using <em>one-color</em> to power my colorpicker, <a href="https://bebraw.github.io/colorjoe/">colorjoe</a>. Good API. Thanks Peter!</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-assetgraph-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-assetgraph-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Assetgraph</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-assetgraph-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Assetgraph is a dependency graph that instantiates full data models of all types of typical web assets; HTML, CSS, JavaScript, images and so on. It also comes with the ability to automatically populate this dependency graph by static analysis and crawling of the found dependencies.</p>
<p>To make this graph model useful it has a query language to find assets (nodes) or relations (edges), a transform pipeline to chain modifications of the graph and many curated graph transformations that all focus on common web performance optimizing tasks.</p>
<p>In itself Assetgraph is not useful to the common web developer, but it enables tool developers to take advantage of a full and consistent data model that has a larger scope than any other build tool out there. Let's call it a toolmakers toolbox.</p>
<p>The really interesting applications are in the specific opinionated tool implementations and the API they expose to the end-user.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-assetgraph-work-" id="how-does-assetgraph-work-"></a><span class="text">How does <em>Assetgraph</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-assetgraph-work-">#</a></h2>
<p>There is a certain life cycle that usually makes sense for most Assetgraph based tools:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#1-loading" id="1-loading"></a><span class="text">1. Loading</span><a class="header-anchor-select" href="https://survivejs.com/#1-loading">#</a></h3>
<p>Load in some initial assets, entry points of your website like <strong>index.html</strong>, <strong>webmanifest.json</strong>, or similar. You can load any number of asset entry points into the graph using the <a href="https://github.com/assetgraph/assetgraph#assetgraphloadassetsfilenamewildcardurlasset-">loadAssets transform</a>. At this point these assets are nodes without any relation in the dependency graph. To set up the relations between the assets you need to use the <a href="https://github.com/assetgraph/assetgraph#transformspopulateoptions">populate transform</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#2-expanding-the-graph-by-crawling" id="2-expanding-the-graph-by-crawling"></a><span class="text">2. Expanding the graph by crawling</span><a class="header-anchor-select" href="https://survivejs.com/#2-expanding-the-graph-by-crawling">#</a></h3>
<p>Populating the graph with a <code>populate()</code> call will start a deep traversal of all outgoing relations to other assets. So if we start the graph with <strong>index.html</strong>, <code>populate()</code> will find all outgoing anchors to other pages, HTML script tags, style tags, images, RSS feeds, and so forth.</p>
<p>For each of these it will recursively expand their dependencies and keep going until there are no more or it hits a stop condition. If you just let it run unlimited it has the potential to start scraping the entire internet, which I don't recommend. ;)</p>
<p>This is where the query model comes into play. By passing a query into the populate transform, only assets or relations matching that query will be populated in the graph. A good starter query is <code>{ followRelations: { crossorigin: false }}</code> in case your focus is a build system.</p>
<p>This will basically give you a fully populated graph of all your local files if you started with <code>file:///project/index.html</code>, but you could just as well start it off with a URL to a website and get a graph of all its same-origin dependencies.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> Peter has written a tool known as <a href="https://github.com/Munter/assetviz">Assetviz</a> that allows you to visualize the structure of your site in a graph format. <a href="https://github.com/Munter/hyperlink">hyperlink</a>, a hyperlink integrity checker, is another useful tool based on the technology.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#3-transforming-the-graph" id="3-transforming-the-graph"></a><span class="text">3. Transforming the graph</span><a class="header-anchor-select" href="https://survivejs.com/#3-transforming-the-graph">#</a></h3>
<p><figure><img src="/6f2b59152ff49a0495d19fe0a129a207.png" alt="Transforming the graph" class="" width="" height="" /><figcaption>Transforming the graph</figcaption></figure></p>
<p>Now you have a fully populated graph model of your code, and this is where the fun starts. Using the transform pipeline you can queue transformations to run on the graph. If you want to rename a file, change its URL with <code>asset.url = 'foo.html'</code>. As a result all relations pointing to it will be updated.</p>
<p>If you want to inline some relations based on the target assets file size, call <code>relation.inline()</code>. There is a long <a href="https://github.com/assetgraph/assetgraph/tree/master/lib/transforms">list of available transformations</a> to do these common tasks.</p>
<p>In the end, when you have made all your modifications, you can write the contents of the graph to disk, use it from memory or whatever you can come up with.</p>
<p>Writing your own transformations is relatively straight forward, since the data models are kind of standard these days. HTML is is modeled using jsdom, so you can simply traverse DOM as you are used to. CSS is modeled with the PostCSS data model and JavaScript with Esprima. So you have raw access to the bare metal if you need to, but can still reap all the benefits from the high level modeling.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-assetgraph-differ-from-other-solutions-" id="how-does-assetgraph-differ-from-other-solutions-"></a><span class="text">How does <em>Assetgraph</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-assetgraph-differ-from-other-solutions-">#</a></h2>
<p>I am not aware of any project with a scope comparable to core Assetgraph, but I can compare <a href="https://github.com/assetgraph/assetgraph-builder">Assetgraph-builder</a> to other projects. Assetgraph-builder is the teams opinionated take on what a web performance optimizing build tool should do, so it comes with all the bells and whistles and attempts to expose a very powerful set of functionality with a focus on simple configuration.</p>
<p>From a build system perspective I'd say the main difference between Assetgraph and other solutions is the scope of what the model tries to cover. Build tools come in lots of varieties, but what most other tools have in common is that to use them you have to adapt your code and development environment for the tool.</p>
<p>With Assetgraph we have a core belief that the tool should not dictate your code. It should instead be able to understand your code like a browser can. This makes a big difference in how you develop. Using Assetgraph you can write a web page like you did in the 90's. Just make pages, include scripts, reference images etc.</p>
<p>With Assetgraph you don't think about optimization, and instead focus on making it work in your browser. Then, when you are ready to deploy, you point Assetgraph-builder at your index file and deploy the optimized website that comes out at the other end.</p>
<blockquote>
<p>The way Assetgraph works is a stark contrast to all other tools that has you build things in pieces and the tool must assemble things for you before you even have a working web page.</p>
</blockquote>
<p>In this way Assetgraph gives you an independence of your tool chain which other tools can't. If all tools took a similar approach to not dictating how you assemble your code, tools could actually be fully interoperable and be chained together with ease because they would all work with the same data model, a full dependency graph of the entire website.</p>
<p>Other dependency graph based tools, like Browserify, systemjs-builder and webpack have the potential to come close, but as long as they limit their entry point to JavaScript they will always have to expose this leaky abstraction where the user needs to have a environment variable switch between development and production code.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> webpack accepts CSS entries. The <a href="https://github.com/webpack/webpack/issues/1967">problem is that it generates functionally useless JavaScript files</a> at the moment. There has also been <a href="https://github.com/webpack/webpack/issues/536">discussion of using HTML files as entry points</a>.</blockquote><p>A really big difference is that having the entire scope of your site automatically discovered and modeled on a high level, is that a lot of configuration that you see in other tools simply disappears. File based tools like Grunt, Gulp, Broccoli or even Make, make you configure manifests of files that someone needs to maintain the correct order of. Assetgraph simply finds these things itself.</p>
<p>I've seen <strong>Gruntfiles</strong> where I could literally remove 80-90% of the configuration and replace it with a call to Assetgraph-builder or <a href="https://github.com/Munter/grunt-reduce">grunt-reduce</a>, which is a Grunt wrapper I wrote for that audience. This simplicity is a thing we focus on keeping across all our transforms and tools. We only want to expose the "what", not the "how" of operations.</p>
<p>The feature set Assetgraph comes with is also quite impressive in its range and stability compared to other tools. Being able to automatically generate shared bundles across pages by taking advantage of the knowledge of multiple html entry points is something I haven't seen anywhere else.</p>
<p>Another example is automated spriting, where you work with your raw images as CSS backgrounds in development and just append the URL with <code>?sprite=spriteName</code> and you get a sprite sheet and all image references updates automatically. The ability to populate external dependencies outside of your own code, to check subresource integrity hashes, update URL's based on 301 redirects, warn about 404's, inject them for external critical resources like Web Fonts are examples of further functionality.</p>
<p>Some things just become so much simpler when you are working with a dependency graph. I have looked on in sadness while file based tools like grunt-filerev has struggled to fix bugs and new ones just kept popping up, while we've been able to have consistent file hashing across an entire site with what is almost a one-liner. I hope more tools will start taking advantage of dependency graphs in the future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-assetgraph-" id="why-did-you-develop-assetgraph-"></a><span class="text">Why did you develop <em>Assetgraph</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-assetgraph-">#</a></h2>
<p>As most other projects we created Assetgraph to scratch an itch. Back in around 2007 <a href="https://github.com/papandreou">Andreas Lind Petersen</a> and I were working for an atypical web hosting company that was investing heavily in developing their own solutions for webmail, calendaring, blog creation, galleries etc.</p>
<p>These were all fairly large and complex web applications with heavy use of lots of CSS and JavaScript. At the same time awareness was growing about web performance and the lack thereof as <a href="https://github.com/stevesouders">Steve Souders</a> had released his inital research results and the resulting 10 rules for better web performance.</p>
<p>Since we had a lot of users on each of our apps and these apps were driving people's every day communication for work and play, we took performance seriously. At the time our most used app was simply loading blocking script tags in order, CSS nicely divided into multiple requests and so forth. A load performance nightmare. This was further complicated by the app not being single page like in these modern times, but a frameset with multiple pages that had a set of common dependencies.</p>
<p>We iterated through a number of build systems. At the time the best thing available was Yahoo Builder with its Java dependency, massive XML configuration and slowness. Later we tried Make files for bundling and eventually ended up with a hybrid Makefile and Perl script.</p>
<p>At this point we had added our own custom syntax for a JavaScript dependency with <code>// INCLUDE 'foo.js'</code> (I think, long time ago), which would then be picked up by the scripts and in development flattened out to a number of script tags (source maps didn't exist), but in production it would bundle things together. We ran into all the same problems that Grunt and Gulp plugins have done historically and were never quite satisfied with being stuck with file and string manipulation.</p>
<p>Then Node.js came around, and immediately some really useful modules started becoming available. jsdom, CSSOM and UglifyJS provided ASTs for their respective data model. So Andreas had this brilliant idea of using a graph model to describe the assets and their relations. This was still quite early, I think the first release of Assetgraph came out half a year before Grunt.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i><strong>Editor's note:</strong> AST as in <em>Abstract Syntax Tree</em>. It is an intermediate format these tools use for manipulation.</blockquote><p>In the beginning it was crude and only had a few use cases like bundling and file renaming, only worked with our code and assumed a lot of things. Since then we saw more and more of the value of having a graph model and started separating the core functionality from the build specific ones, creating Assetgraph-builder for our specific purposes, while Assetgraph was getting trimmed down to become more of a tool collection that one could assemble in many ways.</p>
<p>Since then Assetgraph has been driving the web front-end builds of every web application at that web hosting company, and is even used to optimize customer websites created through a "drag and click your own website"-application.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We're preparing a new major release that has updated old and stale dependencies with newer ones, putting Assetgraph on par with other current tools. We were running our own fork of jsdom, which has now been deprecated and replaced with the latest jsdom. CSSOM was replaced with PostCSS and the UglifyJS AST with Esprima.</p>
<p>We've killed a lot of features and support for obscure cases that were primarily interesting for internal reasons at that web hosting company. So the upcoming release is simpler to use and has less code to read and maintain.</p>
<p>We're changing our focus from trying to do everything ourself to offloading some work to other tools that fit into the Assetgraph model in a collaborative way. There is now a SystemJS integration which offloads the complexity of modeling SystemJS compatible modules and their configuration to systemjs-builder.</p>
<p>There is now a webpack integration which runs webpack as a step in the build, hopefully enabling people to use webpack for its awesome development experience, but still use Assetgraph-builder for its configuration simplicity.</p>
<p>I'm hoping we can find more common interfaces between build systems so there could be future hooks for Browserify, Gulp, Broccoli and all the build tools I have forgotten about. The webpack community is making great efforts to try to get cross community collaboration going and I have to applaud that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-assetgraph-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-assetgraph-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Assetgraph</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-assetgraph-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>For Assetgraph I have a number of hopes for the future. First of all I would hope that Assetgraph-builder will become a recognizable name in the community and that the builder sees some adoption. Maybe not for large complicated web apps where people have already dug deep and invested in other build setups, but for simpler static pages like blogs. Assetgraph-builder is extremely well suited for being run on the output of Jekyll, Harp and all the myriads of other static site generators.</p>
<p>I hope Assetgraph will become a driver of more than just build tooling. Using the full knowledge of all site dependencies I could easily see it become the engine that drives HTTP2 push in a server middleware, the engine of an editor plugin that lets you navigate site dependencies and informs auto suggest in a better way.</p>
<p>The crawling ability of Assetgraph is something I already used to create <a href="https://github.com/Munter/hyperlink">hyperlink</a> a hyperlink integrity checker, but I see many more similar applications where tools could extract and test external information.</p>
<p>I am really excited about the movement behind Service Workers and progressive web apps and I see great things happening in that direction. I really hope that the web can start displacing many of these webview and CRUD apps that live in the app stores, while the open web could do a better job with discoverability and delivery. I want to make that happen, so I focus on keeping Assetgraphs static analysis up to speed with all the new specs.</p>
<p>I am excited about the React movement. I hope that it will somehow be possible to adopt some of these techniques into more standardized practices. I had great hopes for Web Components, and I still like the idea, but the simplicity of React's model of composition and declarative UI just wins big for me.</p>
<p>Build tooling wise I see a continued trend of working with development in a very fragmented way where source code is written to not work without a build tool, and the build tool is required to assemble the bits before you have a working web page. This makes me sad.</p>
<p>In an ideal world we would move towards making the code work in the browser runtime without any external build tool dependencies. That would be a great step towards simplifying web development for newcomers, which I think is very important.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Focus on the basics before you join one of the many hype trains.</p>
<p><strong>Learn HTML.</strong> Not just the bare minimum, but all the tags and that they have accessibility implications. This is a fundamental building block that can't be skipped.</p>
<p><strong>Learn JavaScript.</strong> Not ES6 and Babel and transpilers and Gulp and watchers and that whole mess. Just ES5 that works in browsers and Node.js. When you have the basics down it's easier to understand what all the fuss is about when Hacker News explodes in awe of some new play toy that might do one or two things different from the rest of the frameworks.</p>
<p><strong>Learn CSS.</strong> Not some methodology. "Just" how layout works. When I put quotes around that it's because I think CSS is actually the hardest web technology of the three to learn and master. Pushing pixels just right is tough! Understand that most of the different methodologies are mostly about creating globally unique selectors that don't conflict through the cascade, and all that crap is side-stepped if you use locally scoped CSS with web components, CSS in JavaScript or CSS components.</p>
<p>Ask a lot of questions and engage with the people who help you find the right answers.</p>
<p>Contribute to open source projects you use. In the beginning a contribution might just be asking a question about missing documentation in a GitHub issue. Then help document it. Eventually you might find a bug you can fix or a feature you can add, but start slow and get a feel for it.</p>
<p>Work in the open. It's really daunting letting other people see your code, especially when you are just starting out. But it makes you a better programmer in the end.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/sunesimonsen">Sune Simonsen</a>, who has authored an incredibly powerful assertion library called <a href="http://unexpected.js.org/">Unexpected</a>. His views on testing and his continuous work on improving the testing experience is what finally got me excited about testing front-end code. It has improved my programming skills immensely, so I hope other people can find similar inspiration and start using his really awesome assertion library.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Peter! I've dealt with graphs myself in the past in other context (<a href="https://www.blender.org/">Blender</a> node editor) and can appreciate the approach. It's a good abstraction and it fits web development well.</p>
<p>You can <a href="https://github.com/assetgraph/assetgraph">learn more about Assetgraph at the GitHub</a>. Check out also <a href="https://github.com/Munter/hyperlink">hyperlink</a> and <a href="https://github.com/Munter/assetviz">AssetViz</a> to get more insight into your site or application.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>I set up a little <a href="https://survivejs-demos.github.io/assetviz-demo/">AssetViz demo</a> based on this site to give you a better idea of what kind of visualization it provides. Given the tool constructs the site based on RSS, it's missing a part of the site, but it's good enough for a demo.</blockquote>PureScript - Strongly Typed Programming Language Compiling to JavaScript - Interview with Phil Freemanapurescriptstronglytypedprogramminglanguagecompilingtojavascriptinterviewwithphilfreeman2016-08-22t00:00:00z2016-08-22T00:00:00Z<p>It's interesting how JavaScript development proceeds in cycles. While a lot of people might be happy with the standard language, there are always some that are willing to go further and push the envelope.</p>
<p>Sometimes this leads to a better standard as we saw with ES2015 when it adopted a variety of CoffeeScript inspired features. The cycle will likely repeat as we see more experimentation around the language.</p>
<p>To get a better idea of the topic, I'm interviewing <a href="https://twitter.com/paf31">Phil Freeman</a>, the author of <a href="http://www.purescript.org/">PureScript</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/cbed6f201f9a0e735e5660d118c6662d?s=200" alt="Phil Freeman" class="author" width="100" height="100" />
</span>
I created the PureScript language and compiler a few years ago, and I continue to develop the language and its libraries. I write Haskell code for a living, and I'm interested in the problem of program correctness generally, so I tend to enjoy using statically typed functional programming languages where possible.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-purescript-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-purescript-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>PureScript</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-purescript-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>PureScript is a purely-functional, strongly-typed programming language for the web. If you've seen Haskell before, many of the ideas will be familiar. However, unlike Haskell, PureScript is designed specifically for compilation to (straightforward) JavaScript, and compiled PureScript code can run in any environment where JavaScript runs.</p>
<p>PureScript allows developers to identify errors at compile time, instead of at runtime, by using its expressive type system. At a simple level, this means no more <code>undefined is not a function</code> or similar errors, but we can use the type system to validate more interesting things like <code>this function reads from (but does not write to) the filesystem</code>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-purescript-work-" id="how-does-purescript-work-"></a><span class="text">How does <em>PureScript</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-purescript-work-">#</a></h2>
<p>The PureScript compiler takes PureScript source files as input, parses and checks them, and turns them into either a collection of CommonJS modules, or a single JavaScript bundle for the browser. You can run the compiler on source files directly, but in practice, most users prefer to use additional tools to integrate PureScript into their existing JavaScript workflow.</p>
<p>One of the most popular tools is <a href="https://github.com/bodil/pulp">Pulp</a>, which is a build (and general automation) tool for PureScript projects. Like many PureScript tools, Pulp is written in PureScript itself, and can be installed and run using NPM.</p>
<p>Another essential tool for PureScript development is <a href="https://pursuit.purescript.org">Pursuit</a>, which is our package database.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-purescript-differ-from-other-solutions-" id="how-does-purescript-differ-from-other-solutions-"></a><span class="text">How does <em>PureScript</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-purescript-differ-from-other-solutions-">#</a></h2>
<p>The three main features which distinguish PureScript from other similar transpilers are:</p>
<ul>
<li>Strong, expressive types</li>
<li>Compatibility with the JavaScript ecosystem</li>
<li>Minimalism</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#expressive-types" id="expressive-types"></a><span class="text">Expressive Types</span><a class="header-anchor-select" href="https://survivejs.com/#expressive-types">#</a></h3>
<p>Other languages have strong type systems - <a href="http://elm-lang.org/">Elm</a> is probably the most notable example of a language with an ML-like type system, compiling to JavaScript - but PureScript provides many advanced type system features which those languages lack: higher kinded types and type classes are two examples of advanced type system features which PureScript takes from Haskell. These features can enable a high level of code reuse.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#javascript-compatibility" id="javascript-compatibility"></a><span class="text">JavaScript Compatibility</span><a class="header-anchor-select" href="https://survivejs.com/#javascript-compatibility">#</a></h3>
<p>There are other projects with advanced Haskell-like type systems. <a href="https://github.com/ghcjs/ghcjs">GHCJS</a> is a great example - where PureScript is inspired by Haskell, GHCJS is actually full Haskell compiled to JavaScript.</p>
<p>This is powerful, since you get to reuse lots of existing work from the Haskell community. However, what separates PureScript from projects like GHCJS is that PureScript aims for strong compatibility with existing JavaScript tools, as opposed to using existing Haskell tooling.</p>
<p>Also, compiled PureScript code is readable, and code generation is predictable. By comparison, compiling the full Haskell language to JavaScript (along with its non-strict semantics) can result in large, unreadable code.</p>
<p>So PureScript sits in an interesting niche between languages like Elm and GHCJS, providing some of the more advanced type system features from Haskell, but keeping very close ties to the JavaScript platform.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minimalism" id="minimalism"></a><span class="text">Minimalism</span><a class="header-anchor-select" href="https://survivejs.com/#minimalism">#</a></h3>
<p>PureScript tries quite hard to assume as little as possible about your development workflow. The compiler itself ships with no libraries, although we do provide a comprehensive suite of core libraries which most larger projects will use. This means that users are free to build their own standard libraries if they like. With this approach, compiled PureScript code can be very small and fast.</p>
<p>Also, many things which would be implemented as language or compiler features in other programming languages are implemented in either external tools or PureScript libraries.</p>
<p>Consider language features like generators or promises in JavaScript. Those are implemented with special support in the language itself, but in PureScript they can be implemented as user libraries, which means we don't need to maintain those additional features in the compiler.</p>
<p>I think this sort of approach is essential if we want to continue to apply PureScript to projects of all sizes, from small single-module projects, to full-application development. If you choose to write a single application module in PureScript, you shouldn't have to pull in an array of tools or a large standard library of unrelated code.</p>
<p>Another important benefit of a minimalist approach is that it allows the community to try out several ideas at once. For example, PureScript isn't limited to only one approach to user interface development - instead, we have several libraries - all experimenting with novel applications of functional programming techniques to UI development.</p>
<blockquote>
<p>In fact, pretty much every part of the PureScript library ecosystem can be replaced with some alternate implementation. That wouldn't be possible with a batteries-included compiler distribution.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-purescript-" id="why-did-you-develop-purescript-"></a><span class="text">Why did you develop <em>PureScript</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-purescript-">#</a></h2>
<p>A few years ago, I was writing TypeScript for a living, and for the most part I enjoyed it. Coming from a Java/C# background, the type system concepts were familiar. However, I had been reading about and practicing Haskell at the time, and the benefits of things like immutable data and the pure functional approach generally were becoming more obvious. So I knew I wanted a language which could enable pure, typed functional programming.</p>
<p>At the time, there were a few options. Elm was relatively new, and at the time, it was focused on FRP and certain types of UI applications. I knew I wanted something a bit more general purpose. GHCJS was very interesting, but might have been difficult to sell to the rest of the team, given that we were used to reading JavaScript and using JavasSript tools.</p>
<p>The <a href="http://roy.brianmckenna.org/">Roy programming language</a> was very close to what I wanted, but I had a few relatively minor concerns about that too, mostly around the treatment of side-effects in code.</p>
<p>So, these were all great options, but there was no language exactly like the one I wanted. I had some bits and pieces of code from my experiments with Haskell: parsers, simple type checkers, optimizer passes, these sorts of things. So I decided to put together a prototype of the language I wanted, and a few months later, I posted version 0.1 to Reddit.</p>
<p>It turned out that plenty of people were interested and wanted a language with similar features, so I quickly found contributors to help work on the project after that. Now, we have a great group of contributors working on the compiler and its libraries and tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>In the short term, we have contributors actively working on different things - I'm working on some new type system enhancements, and others are working on a range of interesting things, such as pretty printing source code, new optimizer passes, new backends (Lua, Erlang, Python and C++ backends exist right now), and novel editor plugins.</p>
<p>In the longer term, we continue to work towards a 1.0 release. Along with fixing various bugs, and adding features in the compiler, that means that we'll be working on tools to ensure a complete developer experience: package management, tools for easier integration with JavaScript, continued work on editor tooling, and so on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-purescript-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-purescript-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>PureScript</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-purescript-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope to see more adoption of PureScript, and functional programming generally in industry. Functional programming is gradually becoming more popular for both backend and frontend JavaScript, both in terms of functional languages like PureScript, but also in the form of ideas from functional programming making their way into regular JavaScript libraries (React, Redux, etc.).</p>
<p>PureScript has been adopted successfully and put into production at several companies now, and I'd like to see that trend continue. To make that possible, I'd like to work on lowering the barrier to adoption, so that PureScript becomes a more obvious choice of programming language for more people.</p>
<p>Other than that, I think the future for PureScript looks like more of the same - a group of contributors trying to build the programming language that they want to use. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Phil! Learning to use new languages is always a worthwhile idea. I've found it puts the ones you know well already into a perspective. You can <a href="http://try.purescript.org">try PureScript</a> online. Phil has also written a free book, known as <a href="http://leanpub.com/purescript/read">PureScript by Example</a>, about the topic.</p>
<p>See also <a href="http://purescript.org">PureScript Website</a> and <a href="http://pursuit.purescript.org">Pursuit Package Database</a> for further information.</p>
CodeceptJS - Modern Era Acceptance Testing for Node.js - Interview with Michael Bodnarchukacodeceptjsmoderneraacceptancetestingfornodejsinterviewwithmichaelbodnarchuk2016-08-15t00:00:00z2016-08-15T00:00:00Z<p>Testing is a complicated topic. Just peppering your code with unit tests isn't often enough. You'll need something more, especially if you are developing something user facing. That's where techniques like integration or acceptance testing come in.</p>
<p>Michael Bodnarchuk, an old friend of mine from the <a href="http://jster.net/">JSter</a> era, is a testing specialist. He has developed a testing tool known as <a href="http://codeception.com/">Codeception</a> for PHP. Today we will discuss <a href="http://codecept.io/">Codecept.js</a>, a tool focused on acceptance testing using Node.js.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/8193cbc929cf9b73b4efc41af9f1634e.jpg" alt="Michael Bodnarchuk" class="author" width="100" height="100" /><figcaption>Michael Bodnarchuk</figcaption></figure>
My name is Michael, I live in Kyiv, Ukraine. What I do the most is open-source development, mountain trips, and exploring the world step by step.
</p>
<p>To be honest, I didn't ever have a motivation to travel a lot (except for tracking) so I started to send my talks to conferences. After I started being accepted there, I visited Barcelona, Istanbul, Amsterdam. What would I do there without tech conferences? No idea. :)</p>
<p>My primary language is PHP but I'm also passionate about Ruby and JavaScript. We can't be bound to one language if we are web developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-codeceptjs-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-codeceptjs-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>CodeceptJS</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-codeceptjs-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>CodeceptJS</em> is a tool that makes acceptance testing fun and easy thing to do. Have you ever had a pain using various Selenium libraries or Protractor? How hard was it to create the simplest test, fight over asynchronous callbacks, and different API versions?</p>
<p><em>CodeceptJS</em> provides an engine that allows to write test once and run it using library of your choice: webdriverio, Protractor, Nightmare, etc.</p>
<p>The API was designed to make tests easy to read, write, and develop. Actually the test is written in JavaScript DSL, which describes user's actions:</p>
<pre><code class="lang-js">I<span class="token punctuation" >.</span><span class="token function" >amOnPage</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'/'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
I<span class="token punctuation" >.</span><span class="token function" >click</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'Login'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
I<span class="token punctuation" >.</span><span class="token function" >see</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'Welcome'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Those commands are written in synchronous manner and handled in a global promise chain. That makes tests clean, you can even write tests in your native language!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-codeceptjs-" id="why-did-you-develop-codeceptjs-"></a><span class="text">Why did you develop <em>CodeceptJS</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-codeceptjs-">#</a></h2>
<p>I had some experience developing <a href="http://codeception.com">Codeception</a>, a testing framework for PHP. It is my main product. I started to think If I have experience to share with JS community. And after some investigation I found that there is no good tool of such kind. Tool that could make tests elegant and use different running engines. I think it worked.</p>
<p>I know there are already many folks around using it in different projects, one of them is a Brazilian government organization. If you think of it, it may save a lot of time (and money) by just making testing easier.</p>
<p>I don't see reason why senior JavaScript developers should learn Selenium libraries to write test automation. The less time they spend on such tasks the more they can do for business part of applications. And <em>CodeceptJS</em> is a perfect time saver.</p>
<p><figure><img src="/3bd2240b94ab85e9c235fbff93130ee9.png" alt="In action" class="" width="" height="" /><figcaption>In action</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>As a newcomer from the PHP world it was hard to get into the event loop. Especially when I had ambitious plan to fight the asynchrony. This also make me able to think in a different way. I wanted to see tests written without callbacks and chain of execution.</p>
<p>I wanted a tester to concentrate on a test itself and not on its implementation. So the implementation is hidden in the engine. I ended up with global promise chain and a my own interface working on top of Mocha. By the way, I learned Node.js by reading Mocha sources and I really liked how it is implemented.</p>
<p>It is really compact, simple, and powerful. I tried to make my library to be written elegantly as well, that's why I've chosen to use ES6. I don't use transpiler of any kind, as I'm perfectly fine with current ES6 support in Node. And nope, I'm not planning to migrate to TypeScript. :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Currently, <em>CodeceptJS</em> allows you to use webdriverio, Selenium, WebdriverJS, Protractor, Nightmare as a backend for running tests. Probably this can be extended with testing mobile and Electron apps. Yes, we plan to add support for Electron testing using its official Spectron library.</p>
<p>We also have localization for Russian and Portuguese, so you can write in it and see it in test reports. I think we will extend to more languages. One part of my global plan is to embrace Cucumber - to allow writing not only tests but business expectation as well. However, currently the focus is on stabilizing the product, getting more and more people on board, and making it not only fancy but reliable too.</p>
<p><figure><img src="/73a315f5a4fe60bc55e851f141a2f01b.png" alt="Interactive session" class="" width="" height="" /><figcaption>Interactive session</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I'm a backend developer, and <em>CodeceptJS</em> is a Node.js tool, so to be honest I don't deal with frontend heavily. However, I really like the paradigm shift in front-end. We stopped thinking in terms of pages, now we think everything as an autonomous component.</p>
<p>Nevertheless, components are still need to be grouped into a web pages, ensuring they play nicely together. Even they are unit tested this may not be enough. The more front-end JavaScript is written, the harder is to ensure everything works smoothly.</p>
<p>That's why I see that we still need acceptance tests with heavy tools like Selenium. They are slow, fragile, but they give us the real picture of web site. What can we do to speed up testing is to use libraries like Electron to recreate browser in own environment.</p>
<p>That what actually NightmareJS does, it use Electron for testing and this makes speed to be really fast. I think more development and more testing will be done in JavaScript just because we can't ignore fact that more and more apps are being built using React, React Native, Flux, Redux, etc.</p>
<blockquote>
<p>Testers should have understanding of those technologies to optimize test execution. I don't imagine writing such E2E tests in Java, it doesn't sound optimal to me.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I'd like to hear from <a href="https://twitter.com/bromann">Christian Bromann</a>. He maintains the best WebDriver library in JS - webdriverio. He knows much more about acceptance testing, not only in web but for mobile too. Ask him!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Michael! CodeceptJS is one of those tools I should integrate to certain projects of mine. Unit testing takes you only so far after all and it's easy to end up with an application that has perfect test coverage but still fails to work the way it matters.</p>
<p>If you want to give CodeceptJS a go, check out <a href="http://codecept.io/quickstart/">the quickstart guide</a>. Only a couple of steps to get up and running.</p>
Mostly Adequate Guide to Functional Programming - Interview with Brian Lonsdorfamostlyadequateguidetofunctionalprogramminginterviewwithbrianlonsdorf2016-08-01t00:00:00z2016-08-01T00:00:00Z<p>You might have heard about <a href="https://github.com/MostlyAdequate/mostly-adequate-guide">Mostly Adequate Guide to Functional Programming (in JavaScript)</a> by <a href="https://twitter.com/drboolean">Brian Lonsdorf</a>. It's one of the better known free books discussing JavaScript.</p>
<p>Today I'm bugging Brian about the topic. Functional programming is close to my heart so I'm very curious to hear what he has to say.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/eace1736cd5e31e6c5288e363ed669ea?s=200" alt"Brian Lonsdorf" class="author" width="100" height="100" />
</span>
I'm a software developer at Salesforce working on dev-ops stuff like build servers and css analyzers. Like many, I cut my teeth on Rails, then started to wander out into the world of different languages.
</p>
<p>I was an object-oriented fanatic for about 5 years, then grew to strongly prefer the functional paradigm despite my lack of academic prowess. In my spare time, I like to create learning content with a little spice and whimsy.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-mostly-adequate-guide-to-fp-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-mostly-adequate-guide-to-fp-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Mostly Adequate Guide to FP</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-mostly-adequate-guide-to-fp-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Serious functional programming taught through vanilla JavaScript from the perspective of a grumpy British badger.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-was-it-like-to-write-mostly-adequate-guide-to-fp-" id="what-was-it-like-to-write-mostly-adequate-guide-to-fp-"></a><span class="text">What was it like to write <em>Mostly Adequate Guide to FP</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#what-was-it-like-to-write-mostly-adequate-guide-to-fp-">#</a></h2>
<p>Fun! The moment it became excruciating, I ceased to work on it. Easy as that. When the passion is gone, it probably shows in the work.
I’d hate for people to waste time reading uninspired rubbish (only the inspired rubbish…).</p>
<p>In fact, I think that might be the key to great work. Or perhaps that’s just a way to end up with an unfinished book…</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-mostly-adequate-guide-to-fp-differ-from-the-other-available-books-" id="how-does-mostly-adequate-guide-to-fp-differ-from-the-other-available-books-"></a><span class="text">How does <em>Mostly Adequate Guide to FP</em> differ from the other available books?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-mostly-adequate-guide-to-fp-differ-from-the-other-available-books-">#</a></h2>
<p>Well, it is not very long. I use excessive metaphor. I think the main difference is that I wanted to teach the paradigm as seen in languages like Haskell or PureScript. With that in mind, I didn’t have to apologize for using point free style, IO, or other unconventional, unidiomatic js. Haskell style FP actually works quite well in JS and I haven’t hit any real issues programming in it despite the lack of laziness.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-mostly-adequate-guide-to-fp-" id="why-did-you-develop-mostly-adequate-guide-to-fp-"></a><span class="text">Why did you develop <em>Mostly Adequate Guide to FP</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-mostly-adequate-guide-to-fp-">#</a></h2>
<p>I’d give these talks about FP here and there at JS conferences or meetups - preaching FP at a Haskell meetup seemed redundant. Anyways, after the talk I’d get folks asking me where to learn more and I’d have to tell them to read <a href="http://learnyouahaskell.com/">Learn You a Haskell</a> or <a href="https://leanpub.com/purescript/read">PureScript by Example</a>. This had the side effect of immediately extinguishing any spark of interest I had going with my talk.</p>
<p>So yeah, it was to hopefully get more folks writing functional code in general, JavaScript or otherwise. I feel really good when I hear people were inspired to write Elm after reading my book or if they had the confidence to pick up PureScript afterwards.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I’ve been working on a stop motion video series for egghead.io that teaches the Scala-esq style. I’m giving some workshops at Strangeloop, and Connect.tech. When I’m feeling like writing again, I have a few new chapters started about monoids, traversable, and foldable to throw into the guide.</p>
<p>Those are really important because when you start working with “containers”, you end up having to swap them around or remove values from them and I feel as though the book is almost a full guide, but certainly leaves the reader hanging without those tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-mostly-adequate-guide-to-fp-are-you-planning-to-write-more-books-" id="what-does-the-future-look-like-for-mostly-adequate-guide-to-fp-are-you-planning-to-write-more-books-"></a><span class="text">What does the future look like for <em>Mostly Adequate Guide to FP</em>? Are you planning to write more books?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-mostly-adequate-guide-to-fp-are-you-planning-to-write-more-books-">#</a></h2>
<p>There is an amazing community effort to keep the book going and port it to es2015. Shout out to Matthias Benkort, Christian Takle, Chet Harrison and so many other contributors I won’t, but should name drop here. So once it’s ported to the new style, I’ll put those final chapters in and call it a book. There’s also talk of a limited edition publish after that, but we’ll see.</p>
<p>Not to get the cart ahead of the horse here, but as far as new books go, I’m interested in practical use cases and patterns for abstractions in FP. Things like using the Env Comonad to pass along meta information or Profunctor for temporary type conversions or Monoids for tracing. It’s very hard to find this kind of material; most is scattered throughout the internet, casually mentioned amongst the clamor in forums or tiny gems in the grab bag of Stack Overflow.</p>
<p>The other interest of mine is computer science guided decision making. Every decision one makes in programming comes with a drawback and I think there should be a book out there that spells these out. Just little stuff like “want more modularity? Invert control, but beware that the caller must now assemble the pieces” or “event handlers making control flow hard to follow? Introduce streams, but remember, you’ll end up wrapping all your standard callback functions.”</p>
<p>Anyways, maybe these books already exist. I’d rather just read them if they did.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Bianca Gandolfo who is crushing it when it comes to teaching JavaScript in an approachable way or Michael Ficarra who's on TC39, an open sourcerer, and committed to fixing the front end.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Brian! Remember to <a href="https://github.com/MostlyAdequate/mostly-adequate-guide">check out his book</a> to level up your functional programming skills.</p>
tcomb - Type checking and DDD for JavaScript - Interview with Giulio Cantiatcombtypecheckinganddddforjavascriptinterviewwithgiuliocanti2016-07-25t00:00:00z2016-07-25T00:00:00Z<p>Given JavaScript is loosely typed, it can be amazingly productive language for prototyping. The problems begin once your project grows in complexity. It is very easy to end up with a runtime error if you miss a simple check at the right place.</p>
<p>Testing can help to control the situation, but it's not the only way. Typing systems, like <a href="https://github.com/gcanti/tcomb">tcomb</a> by <a href="https://twitter.com/GiulioCanti">Giulio Canti</a>, can help. Read on to learn more.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/17e7c06ba6bf8429ce311069b95c57d7?s=200" alt"Giulio Canti" class="author" width="100" height="100" />
</span>
I am Giulio Canti, a mathematician turned frontend developer 15 years ago. I live in Milan, Italy. Math is still my love and passion and I try to bring its spirit and methodologies in my day to day work. I'm interested in functional programming languages, in particular the ML family: Scala, Haskell and OCaml.
</p>
<p>Two years ago I started to do open source, which I genuinely love, with a precise goal: bring type safety to JavaScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-tcomb-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-tcomb-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>tcomb</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-tcomb-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><strong>tcomb</strong> is a library for checking the types of JavaScript values at runtime with a simple and concise syntax. It's great for Domain Driven Design and for adding safety to your internal code. It has solid mathematical foundations, being based on <a href="https://en.wikipedia.org/wiki/Set_theory">set theory</a>.</p>
<p>Type instances are not boxed, meaning tcomb works great with existing libraries (lodash, Ramda, ...). You can of course use them as props to React components and it works great paired with <a href="https://github.com/gcanti/tcomb-react">tcomb-react</a>, an alternative to <code>PropTypes</code>.</p>
<p>It's enforces immutability, using the native <code>Object.freeze</code> on type instances.</p>
<p>Finally, it's performance friendly, since asserts and "freezes" are only present in development mode and stripped out in production builds.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-tcomb-work-" id="how-does-tcomb-work-"></a><span class="text">How does <em>tcomb</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-tcomb-work-">#</a></h2>
<p>tcomb defines a set of basic types (e.g. <code>t.String</code>, <code>t.Number</code>, <code>t.Boolean</code>, ...) and a set of type combinators, i.e. functions that return a new type (e.g. <code>t.list</code>, <code>t.maybe</code>, <code>t.interface</code>, ...). The power of tcomb, comes from the composition of combinators:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> t <span class="token keyword keyword-from" >from</span> <span class="token string" >'tcomb'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// the maybe combinator returns a new type</span>
<span class="token comment" spellcheck="true" >// that represents an optional value</span>
<span class="token keyword keyword-const" >const</span> MyOptString <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token function" >maybe</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span>String<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// an optional string</span>
<span class="token comment" spellcheck="true" >// the list combinator returns a new type</span>
<span class="token comment" spellcheck="true" >// that represents a list of values</span>
<span class="token keyword keyword-const" >const</span> MyList <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token function" >list</span><span class="token punctuation brackets-parentheses" >(</span>MyOptString<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span> <span class="token comment" spellcheck="true" >// a list of optional strings</span>
</code></pre>
<p>Using combinators like <code>t.interface</code> or utilities like <code>t.assert</code>, you can model your own domain and its invariants:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> t <span class="token keyword keyword-from" >from</span> <span class="token string" >'tcomb'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// a domain model</span>
<span class="token keyword keyword-const" >const</span> Person <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token keyword keyword-interface" >interface</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span>String<span class="token punctuation" >,</span>
surname<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span><span class="token function" >maybe</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span>String<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span>Number<span class="token punctuation" >,</span>
tags<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span><span class="token function" >list</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span>String<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> <span class="token string" >'Person'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >getFullName</span><span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// an invariant</span>
t<span class="token punctuation" >.</span><span class="token function" >assert</span><span class="token punctuation brackets-parentheses" >(</span>
Person<span class="token punctuation" >.</span><span class="token function" >is</span><span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token string" >'Invalid argument person supplied to getFullName'</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>name<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>surname<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>When an assert fails, the default behavior throws a <code>TypeError</code> with a descriptive message, so you can leverage the power of the debugger, inspect the stack and find out what's wrong with little effort.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-tcomb-differ-from-other-solutions-" id="how-does-tcomb-differ-from-other-solutions-"></a><span class="text">How does <em>tcomb</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-tcomb-differ-from-other-solutions-">#</a></h2>
<p>For a start, tcomb is a mature project: it's five years old, battle tested and deployed in several production environments (it recently hit 70K/month downloads).</p>
<p>It's also an extremely flexible tool and its strength comes from two unique features: refinements and runtime type introspection:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#refinements" id="refinements"></a><span class="text">Refinements</span><a class="header-anchor-select" href="https://survivejs.com/#refinements">#</a></h3>
<p>A refinement type is a type endowed with a predicate which must hold for all instances of the refined type. Here's a simple example:</p>
<pre><code class="lang-js"><span class="token keyword keyword-import" >import</span> t <span class="token keyword keyword-from" >from</span> <span class="token string" >'tcomb'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> Integer <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token function" >refinement</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span>Number<span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span>n<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> n <span class="token operator" >%</span> <span class="token number" >1</span> <span class="token operator" >===</span> <span class="token number" >0</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> PositiveInteger <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token function" >refinement</span><span class="token punctuation brackets-parentheses" >(</span>Integer<span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span>n<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> n <span class="token operator" >>=</span> <span class="token number" >0</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-const" >const</span> Person <span class="token operator" >=</span> t<span class="token punctuation" >.</span><span class="token keyword keyword-interface" >interface</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span>String<span class="token punctuation" >,</span>
surname<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span><span class="token function" >maybe</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span>String<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
age<span class="token punctuation" >:</span> PositiveInteger<span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// <= much better!</span>
tags<span class="token punctuation" >:</span> t<span class="token punctuation" >.</span><span class="token function" >list</span><span class="token punctuation brackets-parentheses" >(</span>t<span class="token punctuation" >.</span>String<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span> <span class="token string" >'Person'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>This means you can narrow your types defining <em>precise</em> invariants, something that static type checkers can do only partially.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#runtime-type-introspection" id="runtime-type-introspection"></a><span class="text">Runtime Type Introspection</span><a class="header-anchor-select" href="https://survivejs.com/#runtime-type-introspection">#</a></h3>
<p>All models are inspectable at runtime. You can read and reuse the informations stored in your types. For example, you can build a validation library on top of tcomb with a few lines of code; or maybe a form generator library like <a href="https://github.com/gcanti/tcomb-form">tcomb-form</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-tcomb-" id="why-did-you-develop-tcomb-"></a><span class="text">Why did you develop <em>tcomb</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-tcomb-">#</a></h2>
<p>In my day to day work I make many mistakes. I mean <em>many</em> mistakes. I wanted a tool which would allow me to speed up the development phase, bringing in solid type safety, yet flexible enough to define my own types and progressively introduce them in the code base.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm really excited about my last project, a <a href="https://github.com/gcanti/babel-plugin-tcomb">babel plugin</a> for combining static and runtime type checking using <a href="https://github.com/facebook/flow">Flow</a> and tcomb.</p>
<p>It allows to define your tcomb types (refinements included!) as type annotations fully compatible with Flow. This means you can run them side by side, statically checking your code with Flow and catching the remaining mistakes with tcomb at runtime: the best of the two worlds!</p>
<p>Here's the first example we've seen above, rewritten leveraging the plugin:</p>
<pre><code class="lang-js">type Person <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> string<span class="token punctuation" >,</span>
surname<span class="token punctuation" >:</span> <span class="token operator" >?</span>string
age<span class="token punctuation" >:</span> number
tags<span class="token punctuation" >:</span> Array<span class="token operator" ><</span>string<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >getFullName</span><span class="token punctuation brackets-parentheses" >(</span>person<span class="token punctuation" >:</span> Person<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >:</span> string <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token template-string" ><span class="token string" >`</span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>name<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" > </span><span class="token interpolation" ><span class="token interpolation-punctuation punctuation" >${</span><span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>surname<span class="token interpolation-punctuation punctuation" >}</span></span><span class="token string" >`</span></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Flow can typecheck this, but you can also turn it off and let tcomb check it at runtime. This simple example may not be particularly useful, but, once you start using type refinements, the mixed approach really starts to shine!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-tcomb-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-tcomb-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>tcomb</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-tcomb-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Now that we have static type checkers for JavaScript like Flow or TypeScript one could think that tcomb will be irrelevant in the long run. Far from it, there are features that I want (namely refinements, IO validation and runtime type introspection) which are either too hard or impossible for a static type checker to provide. Static and runtime type checking are complementary and both useful.</p>
<p>More in general, I'm pleased to see functional programming going mainstream in many communities, included the frontend one.
I think smart type checkers and functional techniques are going to become common tools for a growing number of frontend developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I'd like to read what Phil Freeman has to say about the future of PureScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Giulio! I've definitely seen the light with types after getting familiar with languages like Haskell myself. Even though you can manage without a strong typing system, it can still be highly useful to document your types when you know them.</p>
<p>Particularly the new <a href="https://github.com/gcanti/babel-plugin-tcomb">babel plugin</a> seems interesting to me and no doubt I'll be giving it a good go in the near future and integrate it to the material.</p>
<p>Perhaps we will see something similar with types and JavaScript as we saw with CoffeeScript and JavaScript. The current standard integrated the best ideas from there and as a result we have a stronger language.</p>
<p>I hope we see stronger options for typing in the language itself in the future. Projects like <a href="https://github.com/gcanti/tcomb">tcomb</a> are important in that they allow us to experiment with these ideas.</p>
redux-saga - Saga Middleware for Redux to Handle Side Effects - Interview with Yassine Elouafiareduxsagasagamiddlewareforreduxtohandlesideeffectsinterviewwithyassineelouafi2016-07-18t00:00:00z2016-07-18T00:00:00Z<p>When developing front-ends, handling asynchronous behavior is always bit of a challenge. <a href="https://twitter.com/YassineElouafi2">Yassine Elouafi</a>'s <a href="https://www.npmjs.com/package/redux-saga">redux-saga</a> provides one solution to this problem. Read on to learn more about sagas and <strong>redux-saga</strong> in particular.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>Check out <a href="https://survivejs.com/blog/redux-interview">the earlier interview about Redux</a> if you haven't dug into <a href="http://redux.js.org/">Redux</a> just yet.</blockquote><h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>
<figure><img src="/8dd90e6539b275dd9a35c7e193d47026.jpg" alt="Yassine Elouafi" class="author" width="100" height="100" /><figcaption>Yassine Elouafi</figcaption></figure>
My name is Yassine Elouafi, 39 old and Dad for 2 kids. I live in Tangier (Morocco) and work on a real estate company. I have a lot of passion for coding and learning and hacking new things, exploring new ideas.
</p>
<p>Graduated? Nope (well yes and no, I'm graduated in Finances not in CS). I'm a self taught programmer. I hack things for myself, my company and occasionally others.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-redux-saga-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-redux-saga-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>redux-saga</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-redux-saga-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It is a Redux middleware for handling <strong>side effects</strong>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#redux-middlewares" id="redux-middlewares"></a><span class="text">Redux Middlewares</span><a class="header-anchor-select" href="https://survivejs.com/#redux-middlewares">#</a></h3>
<p>Redux middleware is an add-on you plug into Redux to get additional features. Redux is an opinionated library for managing the state of an application. Without middleware, all we can do in Redux is compute a new state from the previous state and a given action through reducers which are pure functions.</p>
<p>All the handling inside reducers is synchronous and pure. But in real applications we need also to do things that are asynchronous (may not complete immediately like an AJAX request) and impure (change the state of the outside world, like saving to a database). In functional programming (FP) jargon we commonly refer to those things as <strong>side effects</strong>.</p>
<blockquote>
<p>The <em>redux-saga</em> middleware isolates all side effects into software artifacts called <strong>sagas</strong> so that side effects can be managed.</p>
</blockquote>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#sagas" id="sagas"></a><span class="text">Sagas</span><a class="header-anchor-select" href="https://survivejs.com/#sagas">#</a></h3>
<p>The term <em>saga</em> was historically used by <a href="http://www.cs.cornell.edu/andru/cs711/2002fa/reading/sagas.pdf">Hector Garcia-Molina and Kenneth Salem</a> to define a mechanism to handle long lived transactions in database systems. But in <em>redux-saga</em>, The closest meaning is actually a <a href="https://msdn.microsoft.com/en-us/library/jj591569.aspx">process manager</a> basically: "a process that receive events, and may emit new events (sync or async), aiming to orchestrate complex workflows inside your application" (kudos to @slorber).</p>
<p>I want to emphasize that you don't actually have to go through academic papers and backend concepts in order to use <em>redux-saga</em>. It's sufficient to know that a saga is a piece of code which runs in the background, watch for dispatched actions, may perform some async calls (or synchronous impure calls like browser storage) and can dispatch other actions to the store.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-redux-saga-work-" id="how-does-redux-saga-work-"></a><span class="text">How does <em>redux-saga</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-redux-saga-work-">#</a></h2>
<p>Sagas are implemented using generator functions (a new ES2015 feature). Unlike normal functions which run to completion and return a final value, generator functions can be paused and resumed on demand and can return (more accurately <code>yield</code>) multiple values.</p>
<blockquote>
<p>In <em>redux-saga</em>, Generators typically yield <em>effects</em>. They are simply JavaScript objects containing instructions to be performed by the middleware.</p>
</blockquote>
<p>To understand how saga works, I'll illustrate with a fairly common example and compare with <a href="https://www.npmjs.com/package/redux-thunk">redux-thunk</a>, the idiomatic way to handle async actions in Redux.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#requesting-data-using-redux-thunk-" id="requesting-data-using-redux-thunk-"></a><span class="text">Requesting Data Using <em>redux-thunk</em></span><a class="header-anchor-select" href="https://survivejs.com/#requesting-data-using-redux-thunk-">#</a></h3>
<p>Suppose we want to request some data from a given url each time an UI Button is clicked. With <em>redux-thunk</em> we'll write a thunk which will typically look like:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-function" >function</span> <span class="token function" >fetchUrl</span><span class="token punctuation brackets-parentheses" >(</span>url<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token punctuation brackets-parentheses" >(</span>dispatch<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >dispatch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> <span class="token string" >'FETCH_REQUEST'</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >fetch</span><span class="token punctuation brackets-parentheses" >(</span>url<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >then</span><span class="token punctuation brackets-parentheses" >(</span>data <span class="token operator" >=></span> <span class="token function" >dispatch</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> <span class="token string" >'FETCH_SUCCESS'</span><span class="token punctuation" >,</span>
data
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Then, assuming the thunk middleware is mounted in the Redux store, we can dispatch the above function like this:</p>
<pre><code class="lang-javascript"><span class="token function" >dispatch</span><span class="token punctuation brackets-parentheses" >(</span>
<span class="token function" >fetchUrl</span><span class="token punctuation brackets-parentheses" >(</span>url<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >:</span>
</code></pre>
<p>That is, You write the <em>task</em> to be performed (the <code>fetchUrl</code> which return the thunk). And you invoke that task directly from UI components.</p>
<p>If you don't want to pollute your React components with business logic, then thunks are a the simplest and the most idiomatic way to perform side effects in Redux. However, they may have some drawbacks:</p>
<ol>
<li>In order to test the logic inside thunks, you must mock all invoked functions, including the store methods.</li>
<li>Coordinating concurrent tasks can be difficult: If you want to cancel a pending fetch whenever a new fetch is triggered, you'll have to use the Redux store to keep track of the control state (whether the previous fetch is still running or not). It might not be that difficult for simple concurrency requirements but can get quickly become awkward.</li>
<li>Business logic tends to be scattered in various places: startup modules, components, and thunks themselves.</li>
</ol>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#requesting-data-using-redux-saga-" id="requesting-data-using-redux-saga-"></a><span class="text">Requesting Data Using <em>redux-saga</em></span><a class="header-anchor-select" href="https://survivejs.com/#requesting-data-using-redux-saga-">#</a></h3>
<p>In <em>redux-saga</em>, things are slightly different. First, UI Components never invoke the tasks themselves, instead they always dispatch plain object actions to notify that something happened in the UI:</p>
<pre><code class="lang-javascript"><span class="token function" >dispacth</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> <span class="token string" >'FETCH_REQUEST'</span><span class="token punctuation" >,</span>
url<span class="token punctuation" >:</span> <span class="token comment" spellcheck="true" >/* ... */</span><span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Everything else must be encapsulated inside sagas. To perform the task that will perform the actual fetch, you must create a saga that will <em>watch</em> for the dispatched action <code>FETCH_REQUEST</code> and <em>fork</em> the task whenever we get the desired action:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> take<span class="token punctuation" >,</span> fork<span class="token punctuation" >,</span> call<span class="token punctuation" >,</span> put <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'redux-saga/effects'</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// The watcher: watch actions and coordinate worker tasks</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >watchFetchRequests</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-while" >while</span><span class="token punctuation brackets-parentheses" >(</span><span class="token boolean" >true</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> action <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >take</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'FETCH_REQUEST'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >fork</span><span class="token punctuation brackets-parentheses" >(</span>fetchUrl<span class="token punctuation" >,</span> action<span class="token punctuation" >.</span>url<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// The worker: perform the requested task</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >fetchUrl</span><span class="token punctuation brackets-parentheses" >(</span>url<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> data <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >call</span><span class="token punctuation brackets-parentheses" >(</span>fetch<span class="token punctuation" >,</span> url<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >put</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
type<span class="token punctuation" >:</span> <span class="token string" >'FETCH_SUCCESS'</span><span class="token punctuation" >,</span>
data
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Note all the 4 functions we imported from <code>redux-saga/effects</code> are pure functions. I said previously that generators yield plain JavaScript objects called effects. The above functions serve that purpose.</p>
<p>Each function constructs a particular object which embeds some instruction to be fullfilled by the middleware. For example <code>call(fetchUrl, url)</code> returns an object like <code>{ type: CALL, function: fetchUrl, args: [url] }</code>.</p>
<p>This is a fundamental concept in <em>redux-saga</em>: we're not actually executing the side effect (i.e. function call) ourselves, but just constructing a description of the desired effect. The middleware takes care of the real execution then hands the result back to the generator.</p>
<p>In the above example, we used <code>yield take('FETCH_REQUEST')</code> to tell the middleware that we're waiting for an action of type <code>FETCH_REQUEST</code>. What happens is that the middleware will block the <code>watchFetchRequests</code> generator until a <code>FETCH_REQUEST</code> action is dispatched. Once we get a matching action, the middleware will resume the generator with the result which is the action object.</p>
<p>The next instruction <code>fork(fetchUrl, action.url)</code> tells the middleware to <em>fork</em> a new <code>fetchUrl</code> task with <code>action.url</code> as argument. Now the middleware will invoke the <code>fetchUrl</code> Generator but <strong>without blocking</strong> <code>watchFetchRequests</code>. It's as if the 2 tasks are now evolving in parallel.</p>
<p><code>watchFetchRequests</code> continues listening to other <code>watchFetchRequests</code> actions <em>while</em> the <code>fetchUrl</code> starts doing its work. Of course in reality only on thing can be done at time since JavaScript is single threaded, <em>redux-saga</em> is performing the scheduling behind the scene to make it look like things are done in parallel.</p>
<p>Similarly, in <code>fetchUrl</code>, we used <code>call(fetch, url)</code> to instruct the middleware to call the <code>fetch</code> function. But this time, the call is <em>blocking</em>, the middleware will suspend the generator until the <code>Promise</code> returned by <code>fetch</code> is resolved (or rejected) then resume the generator with the resolved value (or throw with the rejected error)</p>
<p>It may sound like a lot of indirection, but this separation between effect creation and execution makes it really simple to test the logic inside generators. For example, we can test <code>fetchUrl</code> simply by iterating over the generator and inspecting the yielded effects:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> generator <span class="token operator" >=</span> <span class="token function" >fetchUrl</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
assert<span class="token punctuation" >.</span><span class="token function" >deepEqual</span><span class="token punctuation brackets-parentheses" >(</span>
generator<span class="token punctuation" >.</span><span class="token function" >next</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>value<span class="token punctuation" >,</span>
<span class="token function" >take</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'FETCH_RESULT'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// we can easily mock the result of the `take('FETCH_RESULT')` call</span>
<span class="token keyword keyword-const" >const</span> mockAction <span class="token operator" >=</span> <span class="token punctuation brackets-braces" >{</span>
url<span class="token punctuation" >:</span> <span class="token string" >'some url'</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// and inject the result back into the Generator</span>
assert<span class="token punctuation" >.</span><span class="token function" >deepEqual</span><span class="token punctuation brackets-parentheses" >(</span>
generator<span class="token punctuation" >.</span><span class="token function" >next</span><span class="token punctuation brackets-parentheses" >(</span>mockAction<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>value<span class="token punctuation" >,</span>
<span class="token function" >take</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'FETCH_RESULT'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>And since generators are stateful, we have much more flexibility to coordinate concurrent tasks. For example, if we want to cancel any pending fetch whenever we request a new fetch, we can store a reference to the current task in a local variable and use the <code>cancel</code> effect:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-import" >import</span> <span class="token punctuation brackets-braces" >{</span> take<span class="token punctuation" >,</span> fork<span class="token punctuation" >,</span> cancel<span class="token punctuation" >,</span> call<span class="token punctuation" >,</span> put <span class="token punctuation brackets-braces" >}</span> <span class="token keyword keyword-from" >from</span> <span class="token string" >'redux-saga/effects'</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span><span class="token operator" >*</span> <span class="token function" >watchFetchRequests</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-let" >let</span> currentTask<span class="token punctuation" >;</span>
<span class="token keyword keyword-while" >while</span><span class="token punctuation brackets-parentheses" >(</span><span class="token boolean" >true</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> action <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >take</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'FETCH_REQUEST'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-if" >if</span><span class="token punctuation brackets-parentheses" >(</span>currentTask<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-yield" >yield</span> <span class="token function" >cancel</span><span class="token punctuation brackets-parentheses" >(</span>currentTask<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
currentTask <span class="token operator" >=</span> <span class="token keyword keyword-yield" >yield</span> <span class="token function" >fork</span><span class="token punctuation brackets-parentheses" >(</span>fetchUrl<span class="token punctuation" >,</span> action<span class="token punctuation" >.</span>url<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-redux-saga-differ-from-other-solutions-" id="how-does-redux-saga-differ-from-other-solutions-"></a><span class="text">How does <em>redux-saga</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-redux-saga-differ-from-other-solutions-">#</a></h2>
<ul>
<li><strong>Declarative effects</strong>: all operations inside sagas are yielded as plain JavaScript objects, which then get executed by the middleware. This makes it very easy to test the business logic inside the saga. You simply iterate over the generator and test the yielded sequence of objects by a simple <code>deepEqual</code>.</li>
</ul>
<p>In other solutions, you'll typically have to mock all the surrounding environment which can make the tests very complicated and less reliable.</p>
<ul>
<li><strong>Advanced async control flow and concurrency management</strong>: You can describe your async flow using a simple synchronous style and familiar control flow constructs (<code>if/else</code>, loops, <code>try/catch</code>...).</li>
</ul>
<p>The library also provides primitives and operators to manage concurrency between tasks (e.g. coordinate concurrent AJAX requests). You can <em>fork</em> multiple background tasks in parallel. You can also cancel a running task.</p>
<ul>
<li>Sagas has also some architectural benefits: In <em>redux-saga</em> applications, since all side effects are moved into sagas, UI components do not typically perform any business logic but only dispatch actions as pure JavaScript objects to notify what happened.</li>
</ul>
<p>This makes the components more reusable in different contexts. A saga can also act as a decoupling point between 2 parts of the UI, by listening for events from one part and emitting actions that may update another part of the UI. Without any part being aware of the other part.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-redux-saga-" id="why-did-you-develop-redux-saga-"></a><span class="text">Why did you develop <em>redux-saga</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-redux-saga-">#</a></h2>
<p>It all started with <a href="https://medium.com/@yelouafi/react-less-virtual-dom-with-snabbdom-functions-everywhere-53b672cb2fe3#.98gygakup">an article</a> I wrote about virtual DOM and a functional front-end architecture inspired by Elm. The architecture makes it possible to write the entire web application using pure functions. After finishing the article, I was looking for the possible ways to introduce side effects. Elm has already introduced the concept of Declarative Effects (effects as data).</p>
<p>I <a href="https://github.com/paldepind/functional-frontend-architecture/issues/20">started a discussion</a> in the <a href="https://github.com/paldepind/functional-frontend-architecture">functional-frontend-architecture</a> repository which turned out to be immensely useful.</p>
<p>Sebastien Lorber (@slorber) introduced me to the concept of Sagas as <em>process managers</em>: a kind of background threads which listen for incoming events and can emit themselves other events. Although my initial focus was not on Redux, I started playing with the idea as a Redux middleware and later realized I could have a more powerful implementation using Generators and by introducing the <code>take</code> effect.</p>
<p>Instead of subscribing to Redux actions and continually invoke a piece of code (the handler) each time an action is dispatched. I could describe the concept of <em>waiting an action</em> as a normal function call which would block the generator until the expected action is dispatched. This would offer a lot more flexibility to describe complex async flows.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'm still toying with 'alternative' ways (to virtual DOM) to describe dynamic and interactive UIs. I was recently looking at <a href="https://github.com/tildeio/glimmer">Glimmer</a> (the rendering engine behind Ember) which has some interesting ideas borrowed from Functional Reactive Programming (FRP).</p>
<p>Basically it's a kind of a pull based model (no subscription or change propagation through listeners) which is a concept I'm very attached to. I intend to play with the concept when I have some time and see if we can combine the data-flow model of React with the templating approach of Glimmer/Ember.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-redux-saga-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-redux-saga-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>redux-saga</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-redux-saga-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Hard to tell. There are more and more people using <em>redux-saga</em> but front-end development is continually evolving and the community is more receptive to innovations (more than in other languages like Java for example).</p>
<p>There seems to be an increasing interest on static typing. There is also a trend toward declarative data fetching (GraphQL, Falcor) although less marked (perhaps because the solutions are still very young and evolving).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Brian Lonsdorf (@drboolean). He's doing a great job on demystifying FP concepts to JavaScript developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Yassine! Sagas seem like a great solution to problems of asynchronous sort.</p>
<p>If you want to give redux-saga a go, head to the <a href="https://github.com/yelouafi/redux-saga">project GitHub</a> and learn more!</p>
Snabbdom - a Virtual DOM Focusing on Simplicity - Interview with Simon Friis Vindumasnabbdomavirtualdomfocusingonsimplicityinterviewwithsimonfriisvindum2016-07-11t00:00:00z2016-07-11T00:00:00Z<p>If you have been using React, you have used one implementation of virtual DOM perhaps without thinking too much about it. It's one of those concepts that's worth understanding in greater detail, though.</p>
<p>There are specific virtual DOM implementations like <a href="https://github.com/Matt-Esch/virtual-dom">Matt-Esch/virtual-dom</a> or <a href="https://github.com/paldepind/snabbdom">palpepind/snabbdom</a>. Today I'm interviewing <a href="https://twitter.com/paldepind">Simon Friis Vindum</a>, the author of the latter. Read on to learn more about the technology.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/894d95cf834e9c3b4966d10eaa52d610?s=200" alt="Simon Friis Vindum" class='author' width='100' height='100' />
</span>
My name is Simon Friis Vindum. I live in Aarhus, Denmark. I currently study computer science at Aarhus University and work as a JavaScript developer on the side. Programming was my hobby for many years. After secondary school I was looking for a job and I was lucky to get one as a JavaScript developer.
</p>
<p>I realized that my hobby was probably going to become my profession. I worked for two years and then began studying CS last summer. I love programming and learning about programming. I have written quite a few JavaScript libraries that are published on my <a href="https://github.com/paldepind">GitHub account</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-snabbdom-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-snabbdom-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Snabbdom</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-snabbdom-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Snabbdom is a virtual DOM library. You hand it two JavaScript representations of two DOM trees. These JavaScript representations are called virtual DOM trees. The first represents how the actual DOM currently looks and the second how you want it to look. Snabbdom then figures out the differences between the two and changes the real DOM accordingly.</p>
<p>The beauty of it all is that application code now never needs to manually make changes to the DOM. It only needs to produce a DOM representation of the application as a function of the application state and the virtual DOM library will then take care of making the correct changes.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-snabbdom-" id="why-did-you-develop-snabbdom-"></a><span class="text">Why did you develop <em>Snabbdom</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-snabbdom-">#</a></h2>
<p>I wanted to use a virtual DOM library for a project of mine. I looked at the existing libraries available, but none of them was exactly what I was looking for. I found React to be too huge and I could see that other virtual DOM libraries where much smaller.</p>
<p>When I decide on libraries simplicity is a big deal to me. The more complex a library is the more opaque it is the its users. In the case of React I found its size, and thus complexity, to out of proportions to the functionality that I needed from it. However, when looking into the alternatives I found that they lacked certain features that I needed. Furthermore, I realized that it should be possible to create an even simpler virtual DOM implementation.</p>
<p>The original project was a spare time project so I chose to delay it and spend the time to create a virtual DOM library exactly after my head. In the end, I managed to implement one that was very simple and performant. I made the library modular and extensible so that new features can be implemented separately from the core. This made it possible for me to get the features that I wanted and for others to add theirs as modules.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-would-you-use-snabbdom-over-react-or-other-solutions-" id="why-would-you-use-snabbdom-over-react-or-other-solutions-"></a><span class="text">Why would you use <em>Snabbdom</em> over React or other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#why-would-you-use-snabbdom-over-react-or-other-solutions-">#</a></h2>
<p>React is in many ways a great library and in some cases I would prefer it to Snabbdom. Especially in a professional setting since React is so ubiquitous. I would use Snabbdom because of its simplicity and flexibility. It is simple because it only concerns itself with the very essence of being a virtual DOM library. As a result it is many times smaller than React.</p>
<p>To me that makes the library more elegant and it suits my aesthetics with regards to libraries. I invite people to look at the implementation of Snabbdom and compare it is React. One has to ask why React is so huge when a virtual DOM library can be so small.</p>
<p>The other benefit of Snabbdom is its flexibility. Its modular nature makes it extensible and its simplicity makes it unopinionated. This should make it possible for people to use Snabbdom no matter what architecture they want to use in structuring their application.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Snabbdom does everything I want. I continue to maintain it, albeit at a slow pace. An upcoming release will have some performance improvements and TypeScript support thanks to Tylor Steinberger.</p>
<p>Unrelated to Snabbdom I will probably release more libraries and continue to explore new approaches to front-end development in JavaScript.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-snabbdom-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-snabbdom-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Snabbdom</em> and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-snabbdom-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I am very happy that the JavaScript community as a whole seems to be moving toward more functional and more reactive approaches. I think we can go further, but React and Redux are important steps in that direction.</p>
<p>I am also curious about what relevance virtual DOM will have in the future. Currently it is everywhere and for some very good reasons. But when I look at recent libraries, like Cycle.js and MobX, I wonder if these approaches really benefit much from virtual DOM. I am currently exploring that myself right now.</p>
<p>I am also excited about the future of static typing in JavaScript. I am a bit torn because I personally prefer Flow, but TypeScript seems to enjoy more mindshare. Fortunately TypeScript is catching up on features which is really great because I don't think having two competing solutions is beneficial to the community. Primarily because adding typings to existing libraries is a lot of work and duplicating that effort is wasteful.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Yassine Elouafi has been doing some very great work with redux-saga and some very innovative FRP libraries. I'd love to hear what he has to say.</p>
<p>An interview with Brian Cavalier author of the most impressive library Most.js (pun intended) and other libraries would also be very interesting.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Simon! It's definitely interesting to see where the web will head. I don't expect we've seen it all just yet and virtual DOM is likely just one step amongst many.</p>
<p>If you want to dig deeper, check out <a href="https://github.com/paldepind/snabbdom">Snabbdom's GitHub repository</a>!</p>
SurviveJS - Webpack - v1.3.1asurvivejswebpackv1312016-06-14t00:00:00z2016-06-14T00:00:00Z<p>Compared to <a href="https://survivejs.com/blog/survivejs-webpack-120">the previous release</a> this is a conservative release. There are certain bug fixes and content improvements, but no new chapters. The focus was on pushing the current content further based on feedback.</p>
<p>I am very happy that <a href="https://survivejs.com/blog/survivejs-react-253">the book split has been completed now</a>. That was a big undertaking, but well worth it as it's easier to move forward now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>Even though it's a better book now, there are still tasks to be done. I don't have a clear roadmap for 2.0 yet. If you have specific ideas on what you would like to see in the book, <a href="https://github.com/survivejs/webpack/issues">open an issue</a>. That will give me a better idea on what kind of content to develop for the book.</p>
<p>I've been thinking of writing a small tool that would generate a Git repository based on the book code. This kind of automation would help a lot, and even though it's not trivial to achieve, it could be worth it as it would save time and effort. In addition, this would allow me to lint the book code somewhat effectively so I'll likely prioritize the development of this tool.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-3-1" id="book-improvements-1-3-1"></a><span class="text">Book Improvements - <code>1.3.1</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-3-1">#</a></h2>
<p>In total 53 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.2.0...v1.3.1">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<p>Special thanks to David Lee, Steve Schwartz, and Jesús Rodríguez Rodríguez for their helpful contributions and feedback! It has been great to discuss about the topic at <a href="https://gitter.im/survivejs/webpack">the book chat</a>. That helps to shape the future of the content.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h2>
<ul>
<li>Added a section for <a href="http://brunch.io/">Brunch</a>. It's an interesting alternative to webpack and worth covering. There's even a <a href="https://github.com/brunch/hmr-brunch">HMR runtime</a> available for it.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-started" id="getting-started"></a><span class="text">Getting Started</span><a class="header-anchor-select" href="https://survivejs.com/#getting-started">#</a></h3>
<ul>
<li>Explained Webpack output in detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>Explained why HMR is easy with CSS but hard with JavaScript.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#refreshing-css" id="refreshing-css"></a><span class="text">Refreshing CSS</span><a class="header-anchor-select" href="https://survivejs.com/#refreshing-css">#</a></h3>
<ul>
<li>Linked the <code>css?modules</code> idea to the <a href="https://survivejs.com/webpack/loading/loader-definitions/">Loader Definitions</a> chapter.</li>
<li>Fixed generated class. Instead of <code>styles.locals.redButton</code> it should be just <code>styles.redButton</code>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#enabling-sourcemaps" id="enabling-sourcemaps"></a><span class="text">Enabling Sourcemaps</span><a class="header-anchor-select" href="https://survivejs.com/#enabling-sourcemaps">#</a></h3>
<ul>
<li>Explained the topic in greater detail and separated the ideas of JavaScript and CSS sourcemaps.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-environment-variables" id="setting-environment-variables"></a><span class="text">Setting Environment Variables</span><a class="header-anchor-select" href="https://survivejs.com/#setting-environment-variables">#</a></h3>
<ul>
<li>Explained the basic idea of <code>DefinePlugin</code> in detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-bundles" id="splitting-bundles"></a><span class="text">Splitting Bundles</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-bundles">#</a></h3>
<ul>
<li>Reworked and explained the split idea in greater detail to get the point.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying-the-build" id="minifying-the-build"></a><span class="text">Minifying the Build</span><a class="header-anchor-select" href="https://survivejs.com/#minifying-the-build">#</a></h3>
<ul>
<li>Reworked the section about UglifyJS specific options. It should be clearer what's going on now.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/uglify-loader">uglify-loader</a> as an alternative.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#analyzing-build-statistics" id="analyzing-build-statistics"></a><span class="text">Analyzing Build Statistics</span><a class="header-anchor-select" href="https://survivejs.com/#analyzing-build-statistics">#</a></h3>
<ul>
<li>Reworked and explained the value of analysis in greater detail. Now there are also more tools listed.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-assets" id="loading-assets"></a><span class="text">Loading Assets</span><a class="header-anchor-select" href="https://survivejs.com/#loading-assets">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-fonts" id="loading-fonts"></a><span class="text">Loading Fonts</span><a class="header-anchor-select" href="https://survivejs.com/#loading-fonts">#</a></h3>
<ul>
<li>Dropped <code>query.prefix</code> and replaced it with <code>name: 'font/[hash].[ext]'</code> given the latter form has been deprecated.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting" id="linting"></a><span class="text">Linting</span><a class="header-anchor-select" href="https://survivejs.com/#linting">#</a></h3>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/eslint-plugin-import">eslint-plugin-import</a>. It's able to lint your ES6 imports effectively.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-packages" id="authoring-packages"></a><span class="text">Authoring Packages</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-packages">#</a></h3>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/lockdown">lockdown</a> as an alternative to <code>npm shrinkwrap</code>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-chunks" id="understanding-chunks"></a><span class="text">Understanding Chunks</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-chunks">#</a></h3>
<ul>
<li>Added an image showing the idea and mentioned <code>require.ensure</code> respects <code>output.publicPath</code>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Added more context to <code>resolve.extensions</code> idea.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll do a pass on <a href="https://survivejs.com/react/introduction">the React book</a> next and then continue plowing through my TODO list for this one. There are always topics to cover and you can affect the direction of the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though this is another small release, it's a step ahead. Keep up providing feedback and I'll integrate as well as I can.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his.</p>
npms.io - A better and open source search for node modules - Interview with André Cruzanpmsioabetterandopensourcesearchfornodemodulesinterviewwithandrecruz2016-06-13t00:00:00z2016-06-13T00:00:00Z<p>As I <a href="http://www.nixtu.info/2016/02/discovery-and-quality-services-for-npm.html">lamented earlier this year</a>, it's increasingly difficult to find npm packages. One way to describe this is <em>npmopeia</em>. The feeling that the package you need exists. The problem is how to find that package.</p>
<p>That is where services like <a href="https://npms.io/">npms.io</a> by <a href="https://twitter.com/satazor">André Cruz</a> come in. To learn about the problem and this service in particular, let's hear more.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/1a691c6ddec4c073246eeaf13afeb0ef?s=200" alt="André Cruz" class="author" width="100" height="100" />
</span>
My name is André Cruz. I'm 28 years old and I live in Porto, Portugal with my wife and little child.
</p>
<p>When I was a kid, I used to sneak into my brothers computer. Every time I used his computer, I asked myself how this little metal box was able to interpret and execute commands on my behalf. I quickly become intrigued and interested in knowing how it was built. Several years passed and, in the IRC apogee, I developed a several scripts for mIRC.</p>
<p><figure><img src="/c34946272989d1984e4ba81713c3e56b.jpg" alt="mIRC scripts" class="" width="" height="" /><figcaption>mIRC scripts</figcaption></figure></p>
<p>That's where my passion in coding and programming started. Since then, I've explored and used several technologies, became graduated in Computers and Telematic Engineering, gave a couple <a href="https://www.youtube.com/watch?v=PHlZan97TN0">of</a> <a href="https://www.youtube.com/watch?v=5h66mv6Ve4o">talks</a> and built many projects.</p>
<p>Fast-forward to the future, I'm the lead developer of <a href="http://baboom.com">BABOOM</a> and I contribute to many open-source <a href="https://github.com/IndigoUnited">projects</a>. Working in open-source heavily influenced me as a developer and as a person, for the better. I encourage everyone to the same. Not doing so is like going to Paris without visiting the Eiffel tower :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-npms-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-npms-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>npms</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-npms-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><a href="https://npms.io/">npms.io</a> is a replacement to the official <a href="https://www.npmjs.com/">npmjs.com</a> search but with a key difference: the quality of the results are much much better:</p>
<ul>
<li>npmjs.com search is not fine tuned and, because of that, produces strange results. Try searching for <code>promise</code> and <code>promises</code> and you get totally different results just because of the plurality. This is just an example, but there are many more.</li>
<li>npmjs.com search results are simply based on the relevance they have to the terms you put into the search box. npms.io combines the relevance with the modules' score producing results with far greater quality.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-npms-work-" id="how-does-npms-work-"></a><span class="text">How does <em>npms</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-npms-work-">#</a></h2>
<p><em>npms</em> may look simple but is actually complex and it's composed of several projects:</p>
<ul>
<li>npms-analyzer: analyzes the npm ecosystem, collecting info, evaluating and scoring each module.</li>
<li>npms-api: the http API that serves the search results</li>
<li>npms-www: the frontend for <a href="http://npms.io">http://npms.io</a></li>
<li>npms-cli: a cli program that allows searching in the command line (not yet done)</li>
<li>npms-badge: generates and serves score badges for developers to put into their modules' README.</li>
</ul>
<p>The most interesting stuff happens in the <code>npms-analyzer</code>. Its role is to process and analyze every single module from the npm ecosystem. The analysis process collects as much information as possible about a module which is then used to evaluate and produce a score. If you are interested in knowing more, you may read our <a href="https://github.com/npms-io/npms-analyzer/blob/master/docs/architecture.md">architectural documention</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-npms-differ-from-other-solutions-" id="how-does-npms-differ-from-other-solutions-"></a><span class="text">How does <em>npms</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-npms-differ-from-other-solutions-">#</a></h2>
<p>When I started the project, I knew that there were several other projects that tried to solve the npmjs.com problem. While they were an improvement over the official search, I felt that there was room for improvement.</p>
<p>What really makes <code>npms</code> stand out from solutions like <a href="http://npmsearch.com/">npmsearch</a> or <a href="http://nipstr.com/">nipster</a> is the quality of the search results. We collect much more information about a module, using sources like GitHub, <a href="https://david-dm.org/">David</a> and <a href="https://nodesecurity.io/">Node Security Platform</a>.</p>
<p>The more information we have from a module the better we can evaluate and score it. We have also invested a lot of time into polishing the scoring algorithm and the search weights to make the results even better.</p>
<p>Another strong point of <em>npms</em> is the clean and carefully written code. This makes it easier to do additions and modifications and will certainly benefit contributions.</p>
<p>Last but not least, <em>npms</em> is a new and shiny project which uses recent technologies such as ES6 modules, React and Redux.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-npms-" id="why-did-you-develop-npms-"></a><span class="text">Why did you develop <em>npms</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-npms-">#</a></h2>
<p>npmjs.com allows developers to search for node modules, but, having used it for several years, I always felt that the overall experience and quality of the results were bad. I wanted to make my life and yours easier every time we wanted to search for a module.</p>
<p>I also saw an opportunity to learn and use new technologies, which I couldn't do due to my job's nature.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p><em>npms</em> is far from being finished and every contribution is much appreciated:</p>
<ul>
<li>We urgently need a logo and identity. If you have the design skills please <a href="https://github.com/npms-io/npms-www/issues/15">help</a>!</li>
<li>Both <code>npms-cli</code> and <code>npms-badge</code> projects are yet to be done. Those will make the whole <code>npms</code> project more complete.</li>
<li>We want to make the search results more personal. The goal is to use data from your GitHub account (who you follow, what you starred, etc.) to further improve the quality of the search results.</li>
<li>We are paying the infrastructure costs ourselves to provide this service for free. Though, if you use the service regularly, please consider <a href="https://salt.bountysource.com/teams/npms">donating</a> to cover these costs.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-npms-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-npms-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>npms</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-npms-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p><em>npms</em> will become obsolete by the time the official npm improves its current offering. Until then, <em>npms</em> will continue to evolve and improve over time. Diversity drives change.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You should definitively interview <a href="https://github.com/atduarte">André Duarte</a>. He has built <em>npms</em> with me and he has proven to be very valuable both conceptually and technically to the project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview André! The quality of the official npm search is definitely something I've felt personally. Sometimes finding the right package can be more painful than it has to be. Services like <a href="https://npms.io/">npms.io</a> are therefore valuable as they save developer time.</p>
<p>Beyond using <a href="https://npms.io/">npms.io</a>, <a href="https://github.com/npms-io">consider contributing to the project</a>. I'm sure André won't mind. :)</p>
Mikey - React/Redux CLI/Framework - Interview with Michael Farrellamikeyreactreduxcliframeworkinterviewwithmichaelfarrell2016-06-06t00:00:00z2016-06-06T00:00:00Z<p>It is tedious and boring to do the same thing over and over. That's where generator tools come in as they take some grunt work out of coding. <a href="https://github.com/Mikeysax/mikey">Mikey</a> by <a href="https://twitter.com/MichaelMFarrell">Michael Farrell</a> is a tool like that for React and Redux. To learn more about the tool, read on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://secure.gravatar.com/avatar/5549c6f94f271b3cedd522e6b9d930b1?s=200" alt="Michael Farrell" class='author' width='100' height='100' />
</span>
I am Michael Farrell, a musician and music educator turned developer. I decided to pursue my love and passion for programming by diving into online resources for coding and attending The Firehose Project to learn all I can about programming and related computer science topics. Currently, I am looking for work in the Metro New York area.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-mikey-to-someone-who-has-never-heard-of-it-how-does-it-differ-from-other-solutions-" id="how-would-you-describe-mikey-to-someone-who-has-never-heard-of-it-how-does-it-differ-from-other-solutions-"></a><span class="text">How would you describe <em>Mikey</em> to someone who has never heard of it? How does it differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-mikey-to-someone-who-has-never-heard-of-it-how-does-it-differ-from-other-solutions-">#</a></h2>
<p><em>Mikey</em> is a CLI/Framework for React/Redux applications. <em>Mikey</em> was designed to be simple, intuitive to use, and increase development speed and productivity of React/Redux applications.</p>
<p><em>Mikey</em> can generate React/Redux projects and files, saving the developer valuable time that can be spent building features. <em>Mikey</em> can also be used in any React/Redux project and is intended to be a broad solution.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#project-generation" id="project-generation"></a><span class="text">Project Generation</span><a class="header-anchor-select" href="https://survivejs.com/#project-generation">#</a></h3>
<p>With <code>mikey new projectName</code>, you can immediately start with a fully functioning application with testing integration, source mapping, linting, hot reloading, and any other key dependencies and features a developer would expect from a React/Redux application.</p>
<p><em>Mikey</em> generated projects are also very minimal in dependency integration, unlike a lot of boilerplates, and strike a good balance between features and bloat.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#file-generation" id="file-generation"></a><span class="text">File Generation</span><a class="header-anchor-select" href="https://survivejs.com/#file-generation">#</a></h3>
<p>What really makes <em>Mikey</em> extra special are the CLI commands for file generation. When you generate a file, <em>Mikey</em> will look through your working project directory and dynamically find the folder for the corresponding file type.</p>
<p>This feature is very important and allows <em>Mikey</em> to be used with other React/Redux projects with different file trees. These file paths are stored in a generated <code>.mikeyPath</code> folder for performance and automatically added to <code>.gitignore</code>. On file generation, a test file is also created and setup for immediate use within the project test directory.</p>
<p>Another useful feature is the ability to add import statements to the top of the file on file generation. Imports are stored as defaults for corresponding file type and allow you to include them in the next file generation instead of typing out each import over again.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-mikey-" id="why-did-you-develop-mikey-"></a><span class="text">Why did you develop <em>Mikey</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-mikey-">#</a></h2>
<p>When I started learning React and Redux I was coming from a background of primarily using Ruby on Rails. During this period, I became rather annoyed that I had to keep typing the same thing, over and over again. A lot of time was spent just configuring and setting up basic project dependencies and components.</p>
<p>Out of annoyance and my background with Ruby on Rails, I saw a need for a CLI tool to easily generate files and projects. <em>Mikey</em> was inspired by the <code>rails generate</code> command and sees to make React/Redux development more enjoyable, productive, and faster.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I am constantly looking for feedback from the community and hope that other developers find enjoyment in using <em>Mikey</em>. My goal is to make <em>Mikey</em> the most robust CLI / Framework that the community would be proud to support and back. If anyone wants to get in touch about an idea for <em>Mikey</em> you can <a href="mailto:michaelfarrelldev@gmail.com">email</a> me directly as well; I would love to hear from you.</p>
<p>Here are just some ideas and I haven't contemplated if some are good or bad just yet. Some possible features for the future might include... API user authentication (like devise), automatic import dependency installation, more templates, plain React project generation, and MobX integration.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-mikey-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-mikey-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Mikey</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-mikey-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope that as React/Redux matures (and the JavaScript community as a whole), we will see an adoption of better practices.</p>
<p>What I realized when developing <em>Mikey</em> is that there are two arguments to be made:</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#convention-over-configuration" id="convention-over-configuration"></a><span class="text">Convention Over Configuration</span><a class="header-anchor-select" href="https://survivejs.com/#convention-over-configuration">#</a></h3>
<p>This means that applications should follow the same structure, the configuration can happen automatically.</p>
<p><strong>The pros:</strong> Write fewer lines of code.</p>
<p><strong>The cons:</strong> People don't often understand how to configure their application.</p>
<p><strong>Example:</strong> Most Rails developers don't know what every single configuration line means. I know I don't, but I am an effective Rails developer. Learning one or two configuration options is easy because it is well documented, and you already have a reference built for you.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuration-over-convention" id="configuration-over-convention"></a><span class="text">Configuration Over Convention</span><a class="header-anchor-select" href="https://survivejs.com/#configuration-over-convention">#</a></h3>
<p>Instead of having one "right" way to do things, learn the configuration and then build the configuration that's right for you.</p>
<p><strong>The pros:</strong> If you've explicitly configured every aspect of your application, you fully understand it all.</p>
<p><strong>The cons:</strong> All applications will be different and jumping into a new code base won't be familiar. In the real world, projects are built by teams. On most teams different people have different expertise.</p>
<p>That means projects built by multiple people's configuration will likely be the result of a single person who fully understands the configuration. If this person were to leave the project, people would be left with a working configuration that they don't know how to use.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-facts" id="the-facts"></a><span class="text">The Facts</span><a class="header-anchor-select" href="https://survivejs.com/#the-facts">#</a></h3>
<p>People don't want to learn how to configure their code. In the current React ecosystem, rather than learning how to configure their application, people use boilerplates that they don't understand. This is a problem for multiple reasons.</p>
<p><strong>1.</strong> Since there are no conventions, people can not specify how to fix their application, because each application is different.</p>
<p><strong>2.</strong> People want to extend beyond the limitations of a limited boilerplate but, they are stuck because they don't understand the configuration.</p>
<p><strong>3.</strong> This leads to trying to hack something they don't understand to work, and often results in failure.</p>
<p>Other people are making new boilerplates that have different configurations after saying "it shouldn't take 15 hours to craft the perfect webpack config! Let me share mine with the world so someone else doesn't need to feel my pain". Currently, there are around 100+ different React boilerplates. (<strong>Editor's note</strong>: there are actually far more!)</p>
<p><strong>This makes the matter only worse.</strong></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-solution-" id="the-solution-"></a><span class="text">The Solution:</span><a class="header-anchor-select" href="https://survivejs.com/#the-solution-">#</a></h3>
<blockquote>
<p>The problem will continue to get worse until the react community unites behind a standard, robust, CLI implementation; Even if it isn't <em>Mikey</em>.</p>
</blockquote>
<p>As for the future of web development, there will definitely be a movement towards pushing more responsibilities on to the server and removing them from the client. We are already seeing this with isomorphic React applications, which gives you the ability to render components on both client and server which offers a better user experience and improved SEO.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You should interview the very opinionated and wise <a href="https://twitter.com/kenmazaika">Ken Mazaika</a>! He has a lot to say on this topic of convention over configuration, among other things.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Michael!</p>
<p>If you want to check out Mikey and learn more about the tool, <a href="https://github.com/Mikeysax/mikey">head to GitHub</a>.</p>
SurviveJS - React - v2.5.3asurvivejsreactv2532016-06-01t00:00:00z2016-06-01T00:00:00Z<p>It has been a while since <a href="https://survivejs.com/blog/survivejs210">the previous release</a> and a lot has happened. In addition to ramping up my consulting and <a href="https://survivejs.github.io/training">training</a> business, I managed to publish a <a href="https://survivejs.com/webpack/preface">book on webpack</a>. That was the first part of my planned split. This is the second.</p>
<p>From now on we'll continue with two books - "SurviveJS - Webpack" and "SurviveJS - React". I am a lot more comfortable with this setup as now it's easier to focus and we can cover more advanced topics. In short, the effort is more manageable now.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>To reward my current Leanpub readers, you will receive the Leanpub version of "SurviveJS - Webpack" for free. You will receive an email about that.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>This release, 2.5, is easily the biggest I've done in a while. Just extracting the webpack portions wasn't enough. I felt the book needed polish. As a result I ended up rewriting a significant portion of it. It took time but I'm happy with the outcome.</p>
<p>The book consists of smaller, more focused chapters now. This brings down the difficulty while allowing me to cover different dimensions of React in greater detail. The rework enables me to develop further content easier than the old one. You can see this also in the application architecture.</p>
<p>In short, I'm confident about the direction of the effort. Thanks to the effort I'll be able to pick up the pace again and add more advanced information to the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-5-3" id="book-improvements-2-5-3"></a><span class="text">Book Improvements - <code>2.5.3</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-5-3">#</a></h2>
<p>In total 191 commits went to book since the last release. Given the book has changed so much, it would be easier to tell you what hasn't changed that what did, but I'll try my best.</p>
<p>You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.1.0...v2.5.1">all changes</a>. Especially the "Files changed" tab is highly useful although in this case it's probably going to be a little sluggish.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you were following an old version through the web, remember that you can find the versions tagged at <a href="https://github.com/survivejs/react">GitHub</a>.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-started" id="getting-started"></a><span class="text">Getting Started</span><a class="header-anchor-select" href="https://survivejs.com/#getting-started">#</a></h2>
<p>This part replaces the earlier <em>Setting Up Webpack</em> chapter. Rather than stepping you through how to develop your own webpack configuration, you will start from a <a href="https://github.com/survivejs/react-boilerplate">small boilerplate</a> instead. <a href="..webpack/preface">The webpack book</a> covers the techniques used there in detail.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction-to-react" id="introduction-to-react"></a><span class="text">Introduction to React</span><a class="header-anchor-select" href="https://survivejs.com/#introduction-to-react">#</a></h3>
<p>I felt the previous version didn't spend enough time on discussing React. This has been remedied now as I discuss the basic ideas of React in greater detail. Especially the Virtual DOM has received more attention. This chapter will likely grow further as I receive feedback on it.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-up-the-project" id="setting-up-the-project"></a><span class="text">Setting Up the Project</span><a class="header-anchor-select" href="https://survivejs.com/#setting-up-the-project">#</a></h3>
<p>The idea of this chapter is to show you how to get the boilerplate project up and running. It also describes the boilerplate and the custom language features used.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-note-application" id="implementing-a-note-application"></a><span class="text">Implementing a Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-note-application">#</a></h3>
<p>This chapter existed in the previous version as well. This time, however, I have split it up into multiple smaller ones. All major steps belong to chapters of their own. This allows more detailed discussion where needed.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#deleting-notes" id="deleting-notes"></a><span class="text">Deleting <code>Notes</code></span><a class="header-anchor-select" href="https://survivejs.com/#deleting-notes">#</a></h3>
<p>Even though a short chapter, I felt deletion deserved a chapter of its own. It's a breather after the a heavier chapter if nothing else.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-react-components" id="understanding-react-components"></a><span class="text">Understanding React Components</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-react-components">#</a></h3>
<p>Earlier the React component discussion was quite terse and scattered. I resolved the problem by gathering the material to a chapter of its own. This is more of a reference level chapter that you can check out if you have some component level related question in mind. I'll likely use it a lot myself for this purpose.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#editing-notes" id="editing-notes"></a><span class="text">Editing <code>Notes</code></span><a class="header-anchor-select" href="https://survivejs.com/#editing-notes">#</a></h3>
<p>This is another tutorial level chapter that moves the implementation forward. As usual, there's material on component design. I pushed the entire <code>Editable</code> component here to simplify the later portions of the book.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-the-notes-application" id="styling-the-notes-application"></a><span class="text">Styling the Notes Application</span><a class="header-anchor-select" href="https://survivejs.com/#styling-the-notes-application">#</a></h3>
<p>I pushed the Notes application styling related aspects to a chapter of its own. Also <a href="https://www.npmjs.org/package/classnames">classnames</a> is discussed briefly now. It would be possible to expand this chapter to discuss <strong>CSS Modules</strong> in detail. I'm still on the edge about that, though.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-kanban" id="implementing-kanban"></a><span class="text">Implementing Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-kanban">#</a></h2>
<p>This part existed in the earlier version. It is more focused, though, as the Notes application was pushed to the new part we just covered.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<p>I expanded the scope of this chapter a notch. It mentions solutions such as Redux and MobX and puts them into a perspective. I evolved the application architecture so that instead of using <code>AltContainer</code> directly, we push the state management related aspects behind a facade.</p>
<p>I achieved this by implementing a <code>Provider</code> and a <code>connect</code> higher order function pair based on <a href="https://www.npmjs.com/package/react-redux">react-redux</a> API. It takes effort to implement the pair, but on the plus side now the Kanban has a looser dependency on Alt.</p>
<p>The point of this change was to enable the development of new content. I could imagine Redux and MobX specific chapters. It would be possible to achieve now without having to rewrite significant portions of the application. Even then the rewrite needed would be very instructive.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-store-and-actions" id="implementing-store-and-actions"></a><span class="text">Implementing Store and Actions</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-store-and-actions">#</a></h3>
<p>Given the previous chapter focused on theory and connecting a state management system with React, this one adds a missing concepts - store and actions.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-persistency-over-localstorage" id="implementing-persistency-over-localstorage"></a><span class="text">Implementing Persistency over <code>localStorage</code></span><a class="header-anchor-select" href="https://survivejs.com/#implementing-persistency-over-localstorage">#</a></h3>
<p>Persistency felt like a chapter of its own so I changed it that way. It might be possible to push this chapter further (offline usage?) but even the current version is quite fine. At least it is focused.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#handling-data-dependencies" id="handling-data-dependencies"></a><span class="text">Handling Data Dependencies</span><a class="header-anchor-select" href="https://survivejs.com/#handling-data-dependencies">#</a></h3>
<p>Earlier the difficult concept of data relations was within the <em>From Notes to Kanban</em> chapter. Now the idea is an entire chapter of its own as it felt like one of those ideas that deserves more emphasis.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#editing-lanes" id="editing-lanes"></a><span class="text">Editing Lanes</span><a class="header-anchor-select" href="https://survivejs.com/#editing-lanes">#</a></h3>
<p>This chapter does the remainder of the implementation apart from drag and drop. It just uses the collection of components we have together to get it together.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#drag-and-drop" id="drag-and-drop"></a><span class="text">Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#drag-and-drop">#</a></h3>
<p>The drag and drop portion related more or less the same. The chapter is simpler now as certain logic is handled earlier. I was able to drop a couple of steps as a result. The chapter should flow a little better now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<p>This part gained a new chapter as I moved structuring ideas here. The part received a beauty pass as I went through the content to make it work with the new implementation of Kanban.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<p>This Leanpub exclusive chapter gained updated graphics. Thanks to the improved implementation, now the tests are a little simpler as well. There's some complexity involved given now the book defaults to stateless functional components, but overall the chapter feels better.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react-" id="typing-with-react-"></a><span class="text">Typing with React*</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react-">#</a></h3>
<p><em>Typing with React</em> received a beauty pass as well. Given Flow supports stateless functional components now, this was a fun one to improve.</p>
<p>TypeScript might deserve more attention in the future. Especially the upcoming 2.0 release looks promising!</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<p>Not a lot happened here. I removed webpack references but nothing drastic happened.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#structuring-react-projects" id="structuring-react-projects"></a><span class="text">Structuring React Projects</span><a class="header-anchor-select" href="https://survivejs.com/#structuring-react-projects">#</a></h3>
<p>I felt structuring is a core topic so I pushed it here. The chapter should probably be pushed further. It could perhaps use more concrete examples.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#appendices" id="appendices"></a><span class="text">Appendices</span><a class="header-anchor-select" href="https://survivejs.com/#appendices">#</a></h2>
<p>Apart from that move the appendices didn't see a lot of action. There were minor tweaks but those are too small to mention.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Now that I have completed the split, it is easier to develop the content again. I will prioritize state management related work. Here is my task list based on priority:</p>
<ul>
<li>Add a new chapter or two on state management. Essentially we would port the application to Redux and MobX here and discuss different systems in detail. I feel Alt works adequately for the purposes of the book but having this sort of advanced discussion would improve it.</li>
<li>Expand on asynchronous handling. The current edition improves on this but we can do better.</li>
<li>Figure out what to do after these have been tackled. I have proposed chapters at <a href="https://github.com/survivejs/react/issues">the issue tracker</a>. Feel free to propose one or comment on the existing ones there. Maybe a routing chapter would be nice?</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#pricing-changes" id="pricing-changes"></a><span class="text">Pricing Changes</span><a class="header-anchor-select" href="https://survivejs.com/#pricing-changes">#</a></h2>
<p>Given the content has changed (two books!), I've implemented the following pricing changes:</p>
<ul>
<li>The <a href="https://www.amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X">Amazon edition</a> will be available for $19.99. Once I have paper versions of the new books out there, this book will go out of market.</li>
<li><a href="https://leanpub.com/survivejs-webpack">"SurviveJS - Webpack" - Leanpub edition</a> goes to $15.99. Thanks early supporters!</li>
<li><a href="https://leanpub.com/survivejs-react">"SurviveJS - React" - Leanpub edition</a> goes to $15.99. If you bought the original book, you will receive "SurviveJS - Webpack" for free.</li>
<li><a href="https://leanpub.com/b/survivejs-webpack-react">"SurviveJS - Webpack" + "SurviveJS - React" bundle</a> - $27.99.</li>
</ul>
<p>The idea is that as more content gets developed, the price will gradually go up. Also if splits like this happen, the modus operandi is the same. You will receive the split book as well. This is my way of saying thanks to those who support the effort monetarily.</p>
<blockquote class="tip"><i class="icon-attention-circled"></i>If you have bought the paper version before June 2016, get in touch and I'll hook you up with the digital versions.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy this release. As usual, your support keeps this effort going on. Thanks!</p>
<p>Remember that you can find up to date code from <a href="https://github.com/survivejs/react">the book repository</a>. The stable version of the book is available at the <code>master</code> branch.</p>
<p>You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/react">Gitter</a> will work. There are topic specific channels now so it's easier to handle.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs-react">purchasing the book at Leanpub</a> or an earlier version of the book at <a href="https://amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X">Amazon</a> (paper version). Every little bit counts and allows me to keep it up.</p>
Builder - A npm-based task runner - Interview with Ryan Roemerabuilderanpmbasedtaskrunnerinterviewwithryanroemer2016-05-16t00:00:00z2016-05-16T00:00:00Z<p><a href="https://github.com/FormidableLabs/builder">Builder</a> by Formidable Labs is one of those projects tackling the boilerplate issue. It is a project that repurposes npm <code>scripts</code> into something more powerful. To learn more, let's let <a href="https://twitter.com/ryan_roemer">Ryan Roemer</a> discuss builder in detail.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/e5b6fdf2e8af6487241497183581f87a?s=200" alt="Ryan Roemer" class="author" width="100" height="100" />
</span>
I am the CTO and co-founder of <a href="http://formidable.com/">Formidable</a>, a development shop in (the delightfully weird neighborhood of) Fremont in Seattle, WA. Our main area of focus is React frontends and Node.js backends. Most of my client and open source work these days tends towards frontend build infrastructures.
</p>
<p>Before Formidable, I've had stints as a distributed systems engineer and security researcher. And, in my deep, dark past, I used to be a patent attorney before finding my way to engineering.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-builder-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-builder-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>builder</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-builder-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Builder is a tool for wrangling build infrastructures and workflows for a collection of similar projects. It leverages the modern development trend of <a href="http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/"><code>npm</code>-based workflows</a> with better scalability and flexibility.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-builder-work-" id="how-does-builder-work-"></a><span class="text">How does <em>builder</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-builder-work-">#</a></h3>
<p>Let's walk through a basic example. Imagine that we have two projects with identical <code>npm</code> tasks:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// <project1>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"foo"</span><span class="token punctuation" >:</span> <span class="token string" >"echo FOO"</span><span class="token punctuation" >,</span>
<span class="token string" >"bar"</span><span class="token punctuation" >:</span> <span class="token string" >"echo BAR"</span><span class="token punctuation" >,</span>
<span class="token string" >"foobar"</span><span class="token punctuation" >:</span> <span class="token string" >"npm run foo && npm run bar"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// <project2>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"foo"</span><span class="token punctuation" >:</span> <span class="token string" >"echo FOO"</span><span class="token punctuation" >,</span>
<span class="token string" >"bar"</span><span class="token punctuation" >:</span> <span class="token string" >"echo BAR"</span><span class="token punctuation" >,</span>
<span class="token string" >"foobar"</span><span class="token punctuation" >:</span> <span class="token string" >"npm run foo && npm run bar"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>which allows us to:</p>
<pre><code class="lang-bash">$ <span class="token function" >cd</span> <span class="token operator" ><</span>project1<span class="token operator" >></span>
$ <span class="token function" >npm</span> run foobar
FOO
BAR
$ <span class="token function" >cd</span> <span class="token operator" ><</span>project2<span class="token operator" >></span>
$ <span class="token function" >npm</span> run foobar
FOO
BAR
</code></pre>
<p>Great! Unfortunately, as the number of projects increases and these similar tasks change, we end up with a bit of a maintenance nightmare -- keeping up with and updating the latest task set across all projects.</p>
<p>Builder solves this problem with the notion of an <a href="http://formidable.com/open-source/builder/#archetypes">"archetype"</a> -- a separate npm module responsible for abstracting and managing the common tasks, configurations, and dependencies. Builder allows us to move common <code>scripts</code> tasks and <code>dependencies</code> / <code>devDependencies</code> for those tasks into an archetype project. The archetype can then be published and consumed just like any normal Node.js module.</p>
<p>The builder version of the above example would be:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// <project1>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// <project2>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// <archetype>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"foo"</span><span class="token punctuation" >:</span> <span class="token string" >"echo FOO"</span><span class="token punctuation" >,</span>
<span class="token string" >"bar"</span><span class="token punctuation" >:</span> <span class="token string" >"echo BAR"</span><span class="token punctuation" >,</span>
<span class="token string" >"foobar"</span><span class="token punctuation" >:</span> <span class="token string" >"builder run foo && builder run bar"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>Note that we're now using <code>builder run <task></code> in the place of <code>npm run <task></code>. We can execute the tasks with:</p>
<pre><code class="lang-bash">$ <span class="token function" >cd</span> <span class="token operator" ><</span>project1<span class="token operator" >></span>
$ builder run foobar
FOO
BAR
$ <span class="token function" >cd</span> <span class="token operator" ><</span>project2<span class="token operator" >></span>
$ builder run foobar
FOO
BAR
</code></pre>
<p>With this simple abstraction, builder allows us to have one central location for:</p>
<ul>
<li><a href="https://github.com/FormidableLabs/builder#tasks"><code>scripts</code> tasks</a></li>
<li><a href="https://github.com/FormidableLabs/builder#moving-scripts-and-config-files">configuration files</a> (typically in a <code>config/</code> directory)</li>
<li><a href="https://github.com/FormidableLabs/builder#moving-dependencies-and-devdependencies-from-an-existing-packagejson"><code>dependencies</code> / <code>devDependencies</code></a> for the tasks</li>
<li><a href="https://github.com/FormidableLabs/builder#npm-config">npm <code>config</code></a> variables in <code>package.json</code></li>
</ul>
<p>while still mostly behaving "just like <code>npm</code>".</p>
<p>Builder also provides critical <em>flexibility</em> for tasks. Many meta / build frameworks are great when you follow the given workflows, but break down when a project goes "off script". By contrast, builder supports projects doing sub-tasks differently as a first class concern and at a very granular level.</p>
<p>Let's tweak our example so that <code><project2></code> has a slightly different <code>bar</code> task like:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// <project1>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span><span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// <project2>/package.json</span>
<span class="token string" >"scripts"</span><span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token string" >"bar"</span><span class="token punctuation" >:</span> <span class="token string" >"echo \"I'M GONNA BE DIFFERENT\""</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>If we run the specific tasks, we get the correct overrides:</p>
<pre><code class="lang-bash">$ <span class="token function" >cd</span> <span class="token operator" ><</span>project1<span class="token operator" >></span>
$ builder run bar
BAR
$ <span class="token function" >cd</span> <span class="token operator" ><</span>project2<span class="token operator" >></span>
$ builder run bar
I'M GONNA BE DIFFERENT
</code></pre>
<p>Builder resolves tasks starting with the root project and then moves up to the archetype on a <em>per task</em> basis. This means that composed tasks like <code>foobar</code> will pick up root overrides together with existing archetype commands giving us:</p>
<pre><code class="lang-bash">$ <span class="token function" >cd</span> <span class="token operator" ><</span>project1<span class="token operator" >></span>
$ builder run foobar
FOO
BAR
$ <span class="token function" >cd</span> <span class="token operator" ><</span>project2<span class="token operator" >></span>
$ builder run foobar
FOO
I'M GONNA BE DIFFERENT
</code></pre>
<p>And just like that, a single project can easily do one-off changes from the archetype, while keeping all the overall composed tasks and workflows intact.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#what-else-can-builder-do-" id="what-else-can-builder-do-"></a><span class="text">What else can <em>builder</em> do?</span><a class="header-anchor-select" href="https://survivejs.com/#what-else-can-builder-do-">#</a></h3>
<p>Aside from archetypes, builder provides an enhanced script runner and a project generator.</p>
<p>The motivation for builder's <strong>script runner</strong> capabilities is that <code>npm run <task></code> is sometimes a bit limited, particularly when you want to write cross-operating-system compatible projects. Thus, builder has a few "nice to have" extras beyond <code>builder run <task></code>:</p>
<ul>
<li><a href="https://github.com/FormidableLabs/builder#builder-concurrent"><strong>Concurrent tasks</strong></a>: <code>builder concurrent <task1> <task2></code> - Great for running multiple tasks at the same time.</li>
<li><a href="https://github.com/FormidableLabs/builder#builder-envs"><strong>Multiple environment variables</strong></a>: <code>builder envs <task> '[{"MSG": "hi"}, {"MSG": "yo"}]'</code> - Run the same task many times concurrently, but with different environment variables injected into the respective processes. Great for scenarios like integration tests on various different OS / browser combinations.</li>
</ul>
<p>At Formidable, we have a couple of one-off projects that don't need an archetype for central control, but do use builder for these task execution helpers.</p>
<p>Looking to builder's <strong>project / boilerplate generation</strong> features, archetypes usually following a defined file structure. It is thus a natural extension for builder archetypes to actually create new, idiomatic projects.</p>
<p>With this in mind, we created <a href="https://github.com/FormidableLabs/builder-init"><code>builder-init</code></a> -- a simple script that generates projects from special archetype files:</p>
<ul>
<li><a href="https://github.com/FormidableLabs/builder-init#archetype-data"><code>init.js</code></a> - a control file with prompts for template variables. (<a href="https://github.com/FormidableLabs/builder-react-component/tree/master/init.js">example</a>)</li>
<li><a href="https://github.com/FormidableLabs/builder-init#archetype-templates"><code>init/**</code></a> - template files to expand into a new project. (<a href="https://github.com/FormidableLabs/builder-react-component/tree/master/init">example</a>)</li>
</ul>
<p>Once these are defined in an archetype, <code>builder-init</code> can then create a new project via any means that <code>npm</code> can install a module:</p>
<pre><code class="lang-bash">$ builder-init builder-react-component
$ builder-init builder-react-component@0.3.3
$ builder-init FormidableLabs/builder-react-component<span class="token comment" spellcheck="true" >#v0.3.3</span>
$ builder-init git+ssh://git@github.com:FormidableLabs/builder-react-component.git<span class="token comment" spellcheck="true" >#v0.3.3</span>
$ builder-init /FULL/PATH/TO/builder-react-component
</code></pre>
<p>This is a great way to keep your new project boilerplate always up to date. Additionally, we utilize <code>builder-init</code> in the <a href="https://github.com/FormidableLabs/builder-react-component/blob/master/.travis.yml#L35-L58">CI for the archetype</a> to check that the archetype works as expected in consuming projects. It's a fantastic sanity check on your boilerplate to ensure it's always ready to ship.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#when-is-builder-appropriate-when-is-it-not-" id="when-is-builder-appropriate-when-is-it-not-"></a><span class="text">When is <em>builder</em> appropriate? When is it not?</span><a class="header-anchor-select" href="https://survivejs.com/#when-is-builder-appropriate-when-is-it-not-">#</a></h3>
<p>Builder is great for situations in which you have:</p>
<ul>
<li>Many nearly identical projects</li>
<li>With lots of <code>npm</code> <code>scripts</code> tasks and dependencies</li>
<li>Large teams of developers</li>
</ul>
<p>We have been helping Walmart Labs migrate their web properties to React. Just looking at React components, there are already something like 60 component repositories, split across many verticals and development teams. Builder archetypes manage the components, allowing us to funnel all of the infrastructure / workflow updates, bug fixes, and everything else into <em>one place</em>.</p>
<p>At Formidable, we use a multi-repository strategy for our collection of <a href="http://formidable.com/open-source/victory/">Victory</a> data visualization components, all controlled by a single archetype, <a href="https://github.com/FormidableLabs/builder-victory-component"><code>builder-victory-component</code></a>. This has been great for having a single location for things like our <a href="https://github.com/FormidableLabs/builder-victory-component/pull/40">upgrade to Babel 6</a>, <a href="https://github.com/FormidableLabs/builder-victory-component/pull/59">switch to optimized lodash plugins</a>, etc.</p>
<p>At the same time, not all projects would benefit from a builder archetype solution. If you have a one-off, single-purpose project, there's no need to abstract to an archetype. And the same goes for projects (like <a href="https://github.com/babel/babel">Babel</a>) that follow a <a href="https://github.com/babel/babel/blob/4c371132ae7321f6d08567eab54a59049e07f246/doc/design/monorepo.md">monorepo strategy</a> with a single repository.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-builder-differ-from-other-solutions-" id="how-does-builder-differ-from-other-solutions-"></a><span class="text">How does <em>builder</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-builder-differ-from-other-solutions-">#</a></h2>
<p>Builder is unlike most other "meta" approaches that I'm aware of...</p>
<p>Builder differs from other React infrastructure / build frameworks in that it's completely technology agnostic -- it's really a way of enhancing <code>npm</code> to work from a single, controllable location. It doesn't specify dependencies, tasks, or anything really.</p>
<p>While the <em>substantive content</em> of a given archetype will end up being very opinionated (tasks, dependencies, and workflows, specific to the team writing the archetype), the underlying builder mechanics are not.</p>
<p>Builder differs from other task runners like <a href="http://gulpjs.com/">Gulp</a> or <a href="http://gruntjs.com/">Grunt</a> in that:</p>
<ul>
<li>Builder doesn't require "plugins" or depend on wrappers for task functionality. It uses the same dependencies / scripts that you would use from the command line in a normal, non-builder project.</li>
<li>Builder is much more flexible for a single project going "off script" at a fine-grained level.</li>
<li>Builder has a specific strategy for coordinating tasks across multiple projects.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-builder-" id="why-did-you-develop-builder-"></a><span class="text">Why did you develop <em>builder</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-builder-">#</a></h2>
<p>The motivation for writing builder really goes back to our community's ongoing conversation regarding multiple vs. single repositories.</p>
<p>As JavaScript has become more complex, there has been a shift to "monorepos" -- monolithic repositories that house all of the code for an organization / project. And while there definitely <em>are</em> appropriate scenarios for monorepos, several of our client projects have run into significant difficulties with them, particularly in the cases of:</p>
<ul>
<li>Large teams and sub-organizations</li>
<li>Many developers of varying abilities and backgrounds</li>
<li>Complex production build / release cycles</li>
<li>Differing team sprint and release cadences</li>
</ul>
<p>In a monorepo, these factors can lead to higher likelihoods of bug introduction, one team stomping on the toes of another team, slower code velocity, etc. That is not to say that monorepos can't be implemented successfully, just that many of the organizations we've helped have encountered many painful experiences with them.</p>
<p>These days in particular, I think many teams choose a monorepo because it <em>appears easier</em> and in large part due to the lack of effective tools for multiple-repository management. And that's really why builder was created -- to make multiple project wrangling sensible, scalable, and flexible.</p>
<p>Before creating builder, I kept seeing the same <code>scripts</code> tasks and dependencies copied and pasted across multiple repositories, and the end result was always the same -- a maintenance and coordination nightmare. As someone who likes to have "one source of truth" across repositories, I really wanted a way to define tasks and infrastructures <em>once</em> for many repositories.</p>
<p>As we were already using <code>npm</code>-based workflows for most projects, I realized I just wanted a slightly enhanced version of <code>npm</code> for multiple projects. And that has really been the guiding direction for builder -- it's "almost" <code>npm</code>.</p>
<p>We support <code>scripts</code>, dependencies, and <code>config</code> just like <code>npm</code> does. And <code>builder-init</code> works with modules the same as <code>npm</code> does. And to keep us honest and grounded, we even include a section in the builder documentation on <a href="https://github.com/FormidableLabs/builder#i-give-up-how-do-i-abandon-builder">how to abandon builder archetypes</a> and go back to vanilla <code>npm</code>-based workflows.</p>
<p>That said, it is not all roses and unicorns with builder archetypes. Turning back to the complexity of modern JavaScript, archetypes don't <em>reduce</em> this complexity in any fashion, they just <em>channel</em> it to one place. And because of some idiosyncrasies with Node.js <code>require</code> resolution, it's even a bit <em>harder</em> to wrangle an archetype than straight <code>npm</code> tasks in a vanilla project.</p>
<p>But for us and clients like Walmart Labs, the ability to funnel complexity has been a big enough win in allowing a smaller group of senior developers to manage the really tricky build / test / transpilation / infrastructure intricacies for the larger group of developers working in individual project repositories.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The base feature set for builder is mostly complete for folks wrangling "just a few" to "enterprise-level number" of projects. We've still got some tickets left on the roadmap, but there's nothing really transformative at this point.</p>
<p>Most of my current work is more broadly supporting multi-repository projects. Our latest project is <a href="https://github.com/FormidableLabs/multibot">Multibot</a>, which allows you to use simple JavaScript transforms to change files (text, markdown, JS, etc.) across multiple repositories, going all the way to a pull request with a single command and no files actually touching disk.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-builder-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-builder-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>builder</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-builder-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The future looks <strong>increasingly complex</strong>. And extremely powerful. With the meteoric rise of <a href="https://babeljs.io/">Babel</a>, we're seeing developers becoming more and more interested in tweaking the language itself that we are writing. And in ways that are in no way on the eventual ECMAScript roadmap. (Witness the power of the <a href="https://github.com/thejameskyle/babel-plugin-ken-wheeler"><code>babel-plugin-ken-wheeler</code></a> plugin.)</p>
<p>I think developers of all levels of experience will have to work very hard to keep up with both our application and infrastructure technologies. I know I certainly do.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>One Ryan is nice, but two would be <strong>awesome</strong>. Interview <a href="https://twitter.com/ryanflorence">Ryan Florence</a> next. In addition to leading projects that help in the boilerplate arena, he works in the trenches with an incredibly wide swath of developers of all backgrounds and will surely have some good insights as to how all these technologies are working in the wild.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Ryan! Builder definitely seems like a powerful tool especially if you have to orchestrate a complex setup. If you want to study it further, consider the links below:</p>
<ul>
<li><a href="http://formidable.com/open-source/builder/">Builder Website</a> (generated off GitHub README)</li>
<li><a href="https://github.com/FormidableLabs/builder">Builder GitHub</a></li>
<li><a href="https://github.com/FormidableLabs/builder-init">Builder-init GitHub</a></li>
<li>Example Archetypes:<ul>
<li><a href="https://github.com/FormidableLabs/builder-react-component">https://github.com/FormidableLabs/builder-react-component</a></li>
<li><a href="https://github.com/FormidableLabs/builder-victory-component">https://github.com/FormidableLabs/builder-victory-component</a></li>
</ul>
</li>
</ul>
SurviveJS - Webpack - v1.2.0asurvivejswebpackv1202016-05-11t00:00:00z2016-05-11T00:00:00Z<p>As I've been working towards splitting <a href="https://survivejs.com/react/introduction">the first book</a>, I realized I must do one more release of this webpack one before I can complete it. That's what the current release, <code>1.2.0</code>, is about. I've moved certain content there (mainly linting, npm related) and done assorted tweaks based on feedback.</p>
<p>Compared to <a href="https://survivejs.com/blog/survivejs-webpack-110">the previous release</a> we have something more mature together now. There are still improvements in store, but you have to take one step at a time.</p>
<p>Getting the split done successfully is my next major goal with this effort. Completing that will take a lot of pressure out of my shoulders and allow new content to be developed more easily.</p>
<blockquote>
<p>Speaking of new content, I produced <a href="https://survivejs.github.io/training/">a set of React training slides</a> for a session. A lot of the research done for the slides will fold back to the written content eventually. Even though it took a lot of time and effort to produce the set, I believe it was worth it.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>In addition to pushing the book content further, I spent some time contributing to <a href="https://www.npmjs.com/package/webpack-validator">webpack-validator</a>. The tool is growing nicely. There's still a lot to do, but it's progressing nicely. The biggest advantage of having this kind of shell around webpack is that it is able to catch issues early while saving your valuable time.</p>
<p>The development of the <a href="https://survivejs.github.io/training/">training slides</a> took serious effort, but fortunately now that's done, I don't have to worry about slides so much anymore should I get training requests. The initial set can be developed further and perhaps turned into something greater, but more on this later.</p>
<p>My next goal is to finish the split. There is still some content to be developed and infrastructure work to be done, but it's gladly it's not that far away! Most importantly <a href="https://medium.com/@leanpub/the-leanpub-blog-in-progress-publishing-and-ebook-mitosis-2ab707198ca7">Leanpub has completed its share</a> so now I just need to finish my part and we are in a good place with this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-2-0" id="book-improvements-1-2-0"></a><span class="text">Book Improvements - <code>1.2.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-2-0">#</a></h2>
<p>In total 36 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.1.0...v1.2.0">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#general-improvements" id="general-improvements"></a><span class="text">General Improvements</span><a class="header-anchor-select" href="https://survivejs.com/#general-improvements">#</a></h2>
<ul>
<li>Ported <code>path.join</code> and other path related portions to a platform agnostic format. This is to avoid issues on Windows. Slashes tend to be problematic. Thanks Viktor!</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>Mentioned <code>webpack --watch</code>. That provides a nice bridge to the HMR topic and it's one of those features you might want to be aware of in case you don't want to use webpack-dev-server for some reason and are just interested in generating a build automatically.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#refreshing-css" id="refreshing-css"></a><span class="text">Refreshing CSS</span><a class="header-anchor-select" href="https://survivejs.com/#refreshing-css">#</a></h3>
<ul>
<li>Explained CSS scoping in greater detail. This was a good chance to discuss the basic idea behind <a href="https://github.com/css-modules/css-modules">CSS Modules</a> as well so you can see the difference. Thanks Christian!</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#enabling-sourcemaps" id="enabling-sourcemaps"></a><span class="text">Enabling Sourcemaps</span><a class="header-anchor-select" href="https://survivejs.com/#enabling-sourcemaps">#</a></h3>
<ul>
<li>Explained browser side support better. Thanks Tom!</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-bundles" id="splitting-bundles"></a><span class="text">Splitting Bundles</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-bundles">#</a></h3>
<ul>
<li>Used <code>vendor: Object.keys(pkg.dependencies)</code> over <code>vendor: Object.keys(pkg)</code>. That was the original intention after all. Thanks Viktor!</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying-build" id="minifying-build"></a><span class="text">Minifying Build</span><a class="header-anchor-select" href="https://survivejs.com/#minifying-build">#</a></h3>
<ul>
<li>Mentioned that you can use <a href="https://www.npmjs.com/package/babel-plugin-remove-console">babel-plugin-remove-console</a> to drop the <code>console</code> statements from your source. Uglify works too, but this is a good alternative to be aware of especially if you use Babel already.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#separating-css" id="separating-css"></a><span class="text">Separating CSS</span><a class="header-anchor-select" href="https://survivejs.com/#separating-css">#</a></h3>
<ul>
<li>Explained PurifyCSS in greater detail. Now <code>paths</code> and additional options should be a little clearer. Thanks Christian!</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hosting-on-github-pages" id="hosting-on-github-pages"></a><span class="text">Hosting on GitHub Pages</span><a class="header-anchor-select" href="https://survivejs.com/#hosting-on-github-pages">#</a></h3>
<ul>
<li>Explained the purpose of the <code>output.publicPath</code> field. That is useful to be aware of as you can use it to manipulate your asset paths and point to a CDN for instance.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#loading-assets" id="loading-assets"></a><span class="text">Loading Assets</span><a class="header-anchor-select" href="https://survivejs.com/#loading-assets">#</a></h2>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/babel-plugin-webpack-loaders">babel-plugin-webpack-loaders</a>. Sometimes you might get away without using webpack. Less work means more speed. <em>babel-plugin-webpack-loaders</em> is particularly useful if you want to do server side rendering without getting webpack involved in the process.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Ported from the first book. While porting, I made adjustments to fit the chapter to this book better so that it doesn't assume a Kanban project. Especially the ESLint related portions have been expanded and reworked partially.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-packages" id="authoring-packages"></a><span class="text">Authoring Packages</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-packages">#</a></h3>
<ul>
<li>Integrated npm bits from the first book. I reworked the material slightly and pushed technique bits to the end of the chapter. This way you get theory first and practical parts after that.</li>
<li>Linked to <a href="https://www.npmjs.com/package/webpack-node-externals">webpack-node-externals</a>. That's one potential option for dealing with package <code>externals</code>. I don't use it myself, but I felt it was worth mentioning about.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Mentioned that <code>webpack.NoErrorsPlugin()</code> can be potentially useful with HMR. It allows you to see possible syntax errors at the console over the error overlay used by the hmre preset.</li>
<li>Linked to the <em>Setting Environment Variables</em> chapter as that's a valuable chapter to check out when you are using React.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though this isn't a huge release, it's a solid step towards something nicer. As usual, the content will evolve as more experience is gained. I find it particularly cool that a little effort like this can help to motivate improvements in tooling as well.</p>
<p>As stated earlier, my next goal is to finish the split. It's good to have this side of the fence in a good shape so we can get the other part across it as well. If you bought the original React/Webpack book, you'll get access to the digital version of this one then. The pricing model will change then (total value goes up) as I like to thank my early supporters.</p>
<p>Of course if you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. You can still gift the coupon to a friend. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his.</p>
nwb - CLI for React Applications and Components - Interview with Jonny Buchanananwbcliforreactapplicationsandcomponentsinterviewwithjonnybuchanan2016-05-09t00:00:00z2016-05-09T00:00:00Z<p>Boilerplate code is perhaps one of the leading causes of JavaScript fatigue. You often have to go through certain motions to set up a project or maintain a boilerplate of your own. In <a href="https://survivejs.com/blog/kotatsu-interview">the previous interview about kotatsu</a> we saw one possible solution.</p>
<p><a href="https://github.com/insin/nwb">nwb</a> is another similar project with its own ideas. To understand better what it's about, I am interviewing the author of the project, <a href="https://twitter.com/jbscript">Jonny Buchanan</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/98d0816016ba9c3bfafbd9cf433aeaa4?s=200" alt="Jonny Buchanan" class='author' width='100' height='100' />
</span>
I've been working as a full-stack web developer for about 12 years, mostly on enterprise intranet apps. The main app I'm currently working on has a React-based frontend and makes use of nwb for development.
</p>
<p>My wife and I live just outside Brisbane with our 3 kids after upping sticks in February this year and emigrated away from Northern Ireland.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-nwb-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-nwb-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>nwb</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-nwb-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>nwb is a tool for running live development builds, unit tests and production builds for various types of JavaScript projects without the <code>devDependency</code> and configuration file boilerplate those tasks usually require.</p>
<p>It's a bit like a meta-package which not only owns the dependencies for Babel, Webpack, Karma and other common development tools for you, but also generates configuration for them on the fly and handles the details of using them all together.</p>
<p>It allows you to get that ES6, hot-reloading, style-including, code-splitting, live unit-testing developer experience we've become accustomed to without adding umpteen <code>devDependencies</code> to every project and either having to have the initial configuration fight with these tools yourself or copying and pasting configuration files into your project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-can-nwb-offer-for-react-projects-and-components-" id="what-can-nwb-offer-for-react-projects-and-components-"></a><span class="text">What can <em>nwb</em> offer for React projects and components?</span><a class="header-anchor-select" href="https://survivejs.com/#what-can-nwb-offer-for-react-projects-and-components-">#</a></h2>
<p>For React projects, nwb can run a hot-reloading development server (with some extra development niceties), run unit tests and create a production-optimised build (including extracting stylesheets and creating a separate vendor bundle).</p>
<p>If you're running your own local development server, nwb also provides middleware (currently only for Express) you can drop in to serve its hot-reloading development build.</p>
<p>For React components and other npm modules, nwb can also create ES5 (for Node), ES6 module (for Rollup) and UMD (for <code><script></code> or AMD usage) builds ready for publishing to npm, as well as doing hot reloading and building of a demo app for your React component.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-nwb-do-it-" id="how-does-nwb-do-it-"></a><span class="text">How does <em>nwb</em> do it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-nwb-do-it-">#</a></h2>
<p>To provide a workflow around these capabilities, nwb can generate very basic skeleton projects. For example, <code>nwb init react-app && nwb serve --auto-install</code> will initialise a simple React app in the current directory and start a hot-reloading development server which will automatically install new dependencies as you import them.</p>
<p>If you need to tweak the default configuration, you can add an <code>nwb.config.js</code> file to your project which I've tried to keep as declarative as possible. For example, if you want to tweak configuration of the default set of Webpack loaders, each loader has a unique id associated with it. e.g. to enable <a href="https://github.com/css-modules/css-modules">CSS Modules</a> in the <code>css-loader</code> which is part of the default style pipeline nwb sets up:</p>
<pre><code class="lang-js"><span class="token punctuation brackets-braces" >{</span>
webpack<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
loaders<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
css<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
query<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
modules<span class="token punctuation" >:</span> <span class="token boolean" >true</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-makes-nwb-different-compared-to-other-solutions-" id="what-makes-nwb-different-compared-to-other-solutions-"></a><span class="text">What makes <em>nwb</em> different compared to other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#what-makes-nwb-different-compared-to-other-solutions-">#</a></h2>
<p>Compared to other solutions, nwb is focused almost entirely on reducing tooling boilerplate for common tasks and making the config it generates tweakable, whereas others get deeper into how you architect your React apps.</p>
<p>nwb probably has the most similar "why?" story to the one on the Formidable Labs' <a href="http://formidable.com/open-source/builder/">Builder</a> homepage and shares Builder's ability to deal with multiple project types, but limits itself to a small number commands in the core and simple skeleton projects versus Builder's extensiblity and richer project archetypes.</p>
<p>Ryan Florence's <a href="https://github.com/ryanflorence/react-project">React Project</a> has the same philosophy to be "a dependency - not a boilerplate", but it's also concerned with owning some of the details of creating React apps for you, such as how you create a server configured for server rendering with React Router.</p>
<p>Both of these are probably better bets than nwb if you want to get started with a production-ready React app with routing, server rendering etc. ready to go, whereas nwb was extracted from the experience of frequently building React apps from scratch which didn't always need those capabilities.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-nwb-" id="why-did-you-develop-nwb-"></a><span class="text">Why did you develop <em>nwb</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-nwb-">#</a></h2>
<p>It's one of those "scratch your own itch" projects - I was getting tired of copying the same <code>devDependencies</code> and configuration files around when creating new projects, then having to deal with updating dependency versions and making sure the latest configuration tweaks were present when maintaining projects.</p>
<p>The initial <code>0.0.x</code> versions were a prototype: copy the various configuration files I was using into a new module, install all the necessary development dependencies next to them and figuring out how to run the tools with the config against a different project.</p>
<p>This worked fine for most of my projects which were using the same vanilla config, but others had some very specific needs which would need configuration to be dynamic beyond the usual <code>dev</code>/<code>test</code>/<code>prod</code> logic people tend to have in their Webpack config to avoid repitition.</p>
<p>As I was still scratching my own itch, I could have hardcoded special cases for the other config I needed in the prototype, but that didn't feel right, while making everything properly dynamic felt like a lot of work when the benefit to my apps was relatively small.</p>
<p>I used the knowlege I'd gained about running tools in a different context to do for <a href="https://github.com/insin/eslint-config-jonnybuchanan">ESLint configuration</a> (which was also getting copied around) what I'd done for my build tooling and thought that would probably be the last time I'd touch nwb.</p>
<p>A few days later, the video of <a href="https://www.youtube.com/watch?v=gk-xyLM7R4g">Yehuda Katz's keynote from EmberCamp London 2015</a> got posted to YouTube, in which he gives an accelerated demo of building a GitHub issues browser from scratch using Ember CLI. I'd looked at Ember CLI to see what the API was like and played about with it a bit, but I'd never seen a complete example of someone using it from scratch to a working app.</p>
<p>Seeing the convenience of that workflow in action put a picture in my mind of exactly what I'd need to implement to be able to do a similar demo with nwb and React (with HMR instead of full page refreshes, which felt really strange to see again) - it'd need to be able to create skeleton apps for a start, and in order to be able to add extra style loaders via plugin modules (for the Sass styles used in the demo), Webpack config generation would need to be much more dynamic...</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Generally just keeping up to date with what's happening in the JavaScript ecosystem - the major benefit I get from nwb is only having to deal with the details of staying up to date in once place, and easily being able to update individual projects when I'm good and ready by bumping the dependency and following any upgrade steps in the release notes.</p>
<p>Some of the planned next steps are:</p>
<p><strong>Babel 6</strong> - nwb still uses Babel 5 due to Babel 6 effectively depending on npm3's deduplication at install time, and I'm still using Node v4 and npm2 at home and taking Babel 5 into consideration anymore. nwb needs to catch up and either explicitly drop support for npm2.</p>
<p>Alternatively I need to figure out an alternative way to consume Babel 6 plugins which doesn't disadvantage people who are using npm2. Node v6 enters active LTS in October this year, after which npm3 becomes the default version for people waiting for the next active LTS to upgrade.</p>
<p><strong>PostCSS</strong> - nwb is using the now-deprecated <code>autoprefixer-loader</code> as a part of its default Webpack style pipeline and will need to switch to using PostCSS directly instead. I've not personally used it before, so that's something else for which I need to figure out a way to make configurable.</p>
<p><strong>Proper cachebusting</strong> - using Webpack to generate builds where all output filenames have a content hash which is stable when nothing has changed proved to be tricky without a working mental model of how Webpack operates under the hood.</p>
<p>I have a possibly-working implementation of this in a branch which feels like it works by coincidence, with at least 2 places where I couldn't begin to explain why it works, so I'm holding off on that for now.</p>
<p><strong>Extensibility?</strong> - nwb is currently set up a bit like Babel 5 in that all the different types of projects it can handle are baked into the <code>nwb</code> module. These could possibly be extracted into modules like <code>nwb-react-app</code>, <code>nwb-npm-module</code> etc., but the current implementation wasn't designed with this in mind.</p>
<p>I might try to make it more extensible if I ever need new project types which need a substantially different set of development dependencies, but I like the simplicity of things for now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-nwb-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-nwb-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for nwb and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-nwb-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I hope a blessed CLI tool for React will emerge from the React community or Facebook so we can all direct our time and effort in the same direction. The approach react-project takes to avoiding boilerplate feels right to me - figure out which bits of plumbing will be the same and use them as dependencies instead of copying them into your project.</p>
<p>If you have dependencies which enforce some base conventions, that also opens up the possibility of using code generation to speed up repetitive processes, but I'd like to see that coupled with codemods which help you upgrade later so we don't end up with the same problems boilerplates and code generators leave us with today.</p>
<p>I think Progressive Web Apps are going to become common once tooling and browser support catch up - I've been getting a closer glimpse of the bleeding edge recently because Addy Osmani has been using <a href="https://github.com/insin/react-hn">react-hn</a> for some PWA experimentation.</p>
<p>Maybe that's something which could be extracted out into a higher level tool, eh?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I'd like to read what a Ryan has to say about JavaScript tooling and webapps, be they a <a href="https://github.com/ryanflorence">Florence</a> or a <a href="https://github.com/ryan-roemer">Roemer</a>.</p>
<p>But definitely a Ryan.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jonny! nwb definitely fills a niche. It's interesting to see if/when the situation becomes stable. I would love to see a blessed solution as well as it would bring stability especially to the React ecosystem known for its churn.</p>
<p>The easiest way to get started with nwb is to <a href="https://github.com/insin/nwb">head to the project site</a> and go from there. There is also specific <a href="https://github.com/insin/nwb/tree/master/docs">documentation</a> available explaining the system in greater detail.</p>
Kotatsu - Less Boilerplate for Modern JavaScript - Interview with Guillaume Pliqueakotatsulessboilerplateformodernjavascriptinterviewwithguillaumeplique2016-05-02t00:00:00z2016-05-02T00:00:00Z<p>npm alone has more than three thousand JavaScript boilerplates. Often it's easier to maintain your own than to use one designed by someone else. Everyone has their own preferences. At best boilerplates work as inspiration for your own work. The question is, can the amount of boilerplate be reduced?</p>
<p>Guillaume Plique thinks so. You might remember him from the <a href="https://survivejs.com/blog/baobab-interview">Baobab interview</a>. If not, look that up if you want to know more about him. Let's let him tell us more about a tool known as <a href="https://github.com/Yomguithereal/kotatsu">kotatsu</a> and his ideas behind it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-kotatsu-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-kotatsu-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>kotatsu</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-kotatsu-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>kotatsu</em> is a straightforward CLI tool enabling JS developers to start working on a new project very fast and with as few boilerplate as possible. This means the tool will out of the box handle ES2015 for you, bundle, serve your code and handle <a href="https://survivejs.com/webpack/appendices/hmr/">Hot Module Replacement</a> (HMR) without forcing you to write complex configuration files or tweaking your own dev express server.</p>
<p>And all of this can be as easy as the following command:</p>
<pre><code class="lang-bash">kotatsu serve --es2015 ./js/main.js
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-kotatsu-" id="why-did-you-develop-kotatsu-"></a><span class="text">Why did you develop <em>kotatsu</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-kotatsu-">#</a></h2>
<p>Initially, I started developing <em>kotatsu</em> because I wanted to have HMR in Node.js. The thing is, after HMR started being a thing in the browser, I grew quite fond of it and, as a result, I was infuriated by the time needed to reload node.js scripts such as my express server. And even tools like <a href="https://github.com/remy/nodemon">nodemon</a> were too slow and were furthermore wiping the state of my server application.</p>
<p>So the first goal was indeed to make <a href="https://webpack.github.io/">webpack</a>'s HMR a thing also on the server side. This was already possible, but really tiresome to setup on your own. So I developed <em>kotatsu</em> to abstract the problem and be able to setup it more quickly on some other projects.</p>
<p>But after some time using the tool, I found that it could also solve some issues related to the client-side and so I extended the tool to this related universe.</p>
<p>The thing is nowadays, JS dev environment has become quite complex if you want to beneficiate from the latest advances: ES2015, ES2016, browser bundling, HMR etc. My point is not to say I regret ye old times - you won't find me saying that - but just to note that it is quite tedious a task to setup your dev environment. Because you need a lot of boilerplate, a lot of complex configuration files etc. And, what's more, in a lot of projects you always end up needing the same things.</p>
<p>So, the philosophy of <em>kotatsu</em> is the following: setup your project in a modern JS dev environment as fast as possible without boilerplate nor configuration, just the CLI tool, and only add/replace more specific parts of the stack on the fly when you start needing them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>First of all, I need to do some maintenance work on the tool to ensure it works on every platform consistently etc. and remain sure it stays up to date with JS tooling (Babel, webpack etc.). I must also ensure that one is still able to forfeit parts of the tool, or even drop the tool altogether, without any difficulties when customizing the stack very specifically to meets one's needs.</p>
<p>I also want to add some new features but I must not go too far lest it would become another complex tool on the scale of the tools I currently abstract away for the user.</p>
<p>Finally, I would love being able to write some unit tests for the tool but I find it very difficult to do so because of the amount of IO, system etc. the tool relies upon (any help on the subject would be gladly accepted :) ).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-build-tooling-and-boilerplates-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-build-tooling-and-boilerplates-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for build tooling and boilerplates in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-build-tooling-and-boilerplates-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think we are going to observe quite an interesting trend: On the one hand, specialist tools (Babel, webpack etc.) will become more refined, powerful, and customizable. But, on the other hand we will likely see a lot of more abstract and simple tools using the former ones as foundation making JavaScript development more accessible to everyone.</p>
<p>This means, we'll see more HMR goodies, more developer tools such as the one we can already see for frameworks & libraries and not only for the JS language itself etc.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I guess that, to stay on topic, you should probably interview <a href="https://github.com/insin">Jonny Buchanan</a> (@insin) about <a href="https://github.com/insin/nwb">nwb</a> which is a perfectly good example of the higher-level tools coming our way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Guillaume! I will definitely keep an eye on Kotatsu. I have some ideas of my own on how to get rid of some of that boilerplate baggage we are carrying around. Most likely our ideas will converge somehow at some point.</p>
<p>If you want to try out the tool, check out <a href="https://github.com/Yomguithereal/kotatsu">kotatsu project page on GitHub</a>. You should find enough information there to get started. And I'm sure Guilllaume will value feedback!</p>
Hashnode - Community for Software Developers - Interview with Sandeep Pandaahashnodecommunityforsoftwaredevelopersinterviewwithsandeeppanda2016-04-25t00:00:00z2016-04-25T00:00:00Z<p>One of the challenges of being a web developer is keeping up with the world. The field moves ahead constantly and it's easy to fail to see the forest from the trees. In part, SurviveJS was born to address this problem, but obviously it's only a small part of the solution.</p>
<p><a href="https://hashnode.com/">Hashnode</a> is a service that approaches the problem from a little different angle. To get a better idea, I'm interviewing <a href="https://twitter.com/Sandeepg33k">Sandeep Panda</a>, one of the developers behind the service.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>I am Sandeep, a software developer based out of Bangalore, India. I have been developing for the web for last 6 years. Apart from programming I also like writing and helping people get better at coding.</p>
<p>I have written two books, <a href="http://shop.oreilly.com/product/9780980285826.do">Jump Start HTML5 : APIs</a> and <a href="https://learnable.com/books/angularjs-novice-to-ninja">AngularJS : Novice to Ninja</a>, and have contributed many tutorials to <a href="https://www.sitepoint.com/author/spanda/">SitePoint</a>.</p>
<p>Recently I, along with <a href="https://twitter.com/@fazlerocks">Fazle</a>, started Hashnode which is a community for software developers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-hashnode-to-someone-who-has-never-heard-of-it-how-does-it-differ-from-other-solutions-" id="how-would-you-describe-hashnode-to-someone-who-has-never-heard-of-it-how-does-it-differ-from-other-solutions-"></a><span class="text">How would you describe Hashnode to someone who has never heard of it? How does it differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-hashnode-to-someone-who-has-never-heard-of-it-how-does-it-differ-from-other-solutions-">#</a></h2>
<p>Hashnode brings a social angle to how developers interact. Stack Overflow already does a great job at helping developers with specific questions and programming errors</p>
<p>At Hashnode we encourage subjective and opinion based questions and want developers to express themselves. The broader goal is to help developers get better, stay relevant and connected.</p>
<p>Apart from Q&A, we also let developers share links, write about their experiences in the form of stories. Also, we recently introduced <a href="https://hashnode.com/amas">AMAs</a> where we invite influencers and awesome tech teams to conduct live Q&A sessions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-hashnode-" id="why-did-you-develop-hashnode-"></a><span class="text">Why did you develop Hashnode?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-hashnode-">#</a></h2>
<p>While writing books and tutorials for SitePoint I realized that there should be a community that is more welcoming to beginners and helps them get started with newer technologies.</p>
<p>Communities like Stack Overflow are too focused on specific programming errors. So, we thought of building a community around developers with focus on questions that demand in-depth explanations and discussions.</p>
<p>Another reason behind developing Hashnode was to connect developers with influencers and tech teams that have built great open source projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The current priority is to grow Hashnode as a community and keep getting more and more developers to use the platform. It's still new (around 3 months old) and will probably undergo a lot of improvements in coming days.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-hashnode-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-hashnode-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for Hashnode and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-hashnode-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Talking about the future, we want to build a modern day community for developers where they can hang out with others on a global scale. Right now Hashnode is doing good progress by attracting developers in areas like JavaScript, Node.js, CSS, React, PHP, RoR and Java. But eventually our goal is to have all kinds of developers in a single platform.</p>
<p>I think isomorphic (universal) apps are going to play a key role in future. Hashnode is built with React and is isomorphic in nature. So we, as a company, are going to invest a lot in this area.</p>
<p>That's why we released an open source project called <a href="http://mern.io">mern.io</a> which helps developers get started with building isomorphic apps using React and Redux. With around 1900 stars on GitHub, it has got good traction and we are actively looking for contributors to improve it further.</p>
<p>I also think React Native is going to be used heavily in the coming days.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>TJ Holowaychuk. Don't forget to ask him about his productivity hacks.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Sandeep! We'll be hosting a <a href="https://hashnode.com/ama/with-survivejs-cinamhpeh005pn753oax6pf5b">SurviveJS AMA</a> at <a href="https://hashnode.com/">Hashnode</a> on Friday 29th (18:00 GMT+0). So if you have any SurviveJS, Webpack, or React related questions, see you there. I'll be writing answers for solid two hours and there's a little something in store for the top questions.</p>
SurviveJS - Webpack - v1.1.0asurvivejswebpackv1102016-04-24t00:00:00z2016-04-24T00:00:00Z<p>Compared to <a href="https://survivejs.com/blog/survivejs-webpack-100">the first release</a> a couple of weeks ago, this version has matured quite a bit. I've been reviewing the content with <a href="http://angular-tips.com/">my editor</a> (thanks Jesús!) and that has lead to some nice insights. Our work is still in progress and so far we've combed through only a couple of the first chapters. The work will continue in the coming weeks.</p>
<p>Overall we are going to a good direction with this book. The effort has forced me to understand webpack on a deeper level. That's a good thing. I expect <code>1.2.0</code> will improve the situation further as I can cover webpack in greater detail. The book structure seems solid and it's easy to grow content on top of it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>Perhaps the biggest technical improvement this time around is the introduction of a new configuration format. I realized using <a href="https://www.npmjs.com/package/webpack-merge">webpack-merge</a> allows us to split configuration into smaller functions.</p>
<p>This way <em>webpack.config.js</em> can remain simpler while we get configuration code that can be shared across multiple projects and even published to npm. It's also easier for me to explain what's going on this way.</p>
<p>This change was motivated by a tool known as <a href="https://www.npmjs.com/package/webpack-validator">webpack-validator</a>. It checks your webpack configuration against a schema and it is able to point out configuration issues during development. This is valuable as the errors webpack emits aren't always the easiest to understand. Using a little tool like this takes some pain out of the process.</p>
<p>There are numerous other improvements as well, but read on to learn more about those. I feel the book is evolving to a good direction although there is still a lot of work left. I'll focus on the React book next so I can finally get the promised split done.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-1-0" id="book-improvements-1-1-0"></a><span class="text">Book Improvements - <code>1.1.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-1-0">#</a></h2>
<p>In total 118 commits went to the book since the last release. You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack/compare/v1.0.0...v1.1.0">all changes</a>. Remember especially the "Files changed" tab as it gives you a good overview of what's happening with the book.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h2>
<ul>
<li>Improved flow. Now JSPM has a section of its own and overall the chapter reads a little better.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-started" id="getting-started"></a><span class="text">Getting Started</span><a class="header-anchor-select" href="https://survivejs.com/#getting-started">#</a></h3>
<ul>
<li>Improved flow here as well. The chapter should be a little easier to read now. I've done flow tweaks elsewhere too and I won't be mentioning about it separately anymore. They are small tweaks, but they count.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-the-configuration" id="splitting-the-configuration"></a><span class="text">Splitting the Configuration</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-the-configuration">#</a></h3>
<ul>
<li>Ported to the new configuration scheme.</li>
<li>Explained how to integrate <a href="https://www.npmjs.org/package/webpack-validator">webpack-validator</a>. Now it's within Webpack configuration. This might change in the future as a CLI is developed for the tool. Then we can run it in a smarter way.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#automatic-browser-refresh" id="automatic-browser-refresh"></a><span class="text">Automatic Browser Refresh</span><a class="header-anchor-select" href="https://survivejs.com/#automatic-browser-refresh">#</a></h3>
<ul>
<li>Ported to the new configuration scheme just like the remainder of the book. No special mentions after this mention.</li>
<li>Explained in greater detail what's going on.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#enabling-sourcemaps" id="enabling-sourcemaps"></a><span class="text">Enabling Sourcemaps</span><a class="header-anchor-select" href="https://survivejs.com/#enabling-sourcemaps">#</a></h3>
<ul>
<li>New chapter! I pushed the sourcemap related bits here. Now the topic is discussed in greater detail. Also <code>SourceMapDevToolPlugin</code> is covered.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-up-npm-install-webpack-plugin" id="setting-up-npm-install-webpack-plugin"></a><span class="text">Setting Up <code>npm-install-webpack-plugin</code></span><a class="header-anchor-select" href="https://survivejs.com/#setting-up-npm-install-webpack-plugin">#</a></h3>
<ul>
<li>Removed this chapter as it didn't contribute much.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#optimizing-development" id="optimizing-development"></a><span class="text">Optimizing Development</span><a class="header-anchor-select" href="https://survivejs.com/#optimizing-development">#</a></h3>
<ul>
<li>Removed this chapter and moved the ideas discussed to the React chapter.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#building-with-webpack" id="building-with-webpack"></a><span class="text">Building with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#building-with-webpack">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#minifying-the-build" id="minifying-the-build"></a><span class="text">Minifying the Build</span><a class="header-anchor-select" href="https://survivejs.com/#minifying-the-build">#</a></h3>
<ul>
<li>Pushed React <code>import</code> to this chapter. It felt like a good idea to push it later in the book. It cannot be eliminated as we need something to minify.</li>
<li>Explained how to use UglifyJS specific options through Webpack.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#setting-environment-variables" id="setting-environment-variables"></a><span class="text">Setting Environment Variables</span><a class="header-anchor-select" href="https://survivejs.com/#setting-environment-variables">#</a></h3>
<ul>
<li>Explained <code>DefinePlugin</code> in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#splitting-bundles" id="splitting-bundles"></a><span class="text">Splitting Bundles</span><a class="header-anchor-select" href="https://survivejs.com/#splitting-bundles">#</a></h3>
<ul>
<li>Explained why a manifest is extracted.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#adding-hashes-to-filenames" id="adding-hashes-to-filenames"></a><span class="text">Adding Hashes to Filenames</span><a class="header-anchor-select" href="https://survivejs.com/#adding-hashes-to-filenames">#</a></h3>
<ul>
<li>Explained the idea of the approach in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#separating-css" id="separating-css"></a><span class="text">Separating CSS</span><a class="header-anchor-select" href="https://survivejs.com/#separating-css">#</a></h3>
<ul>
<li>Explained how to process CSS through <a href="https://github.com/purifycss/purifycss">purifycss</a> to drop unused CSS. This is particularly useful with CSS frameworks.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#analyzing-build-statistics" id="analyzing-build-statistics"></a><span class="text">Analyzing Build Statistics</span><a class="header-anchor-select" href="https://survivejs.com/#analyzing-build-statistics">#</a></h3>
<ul>
<li>Explained what <code>--profile</code> and <code>--json</code> actually do. If you aren't interested in timing information, you can skip <code>--profile</code>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#advanced-techniques" id="advanced-techniques"></a><span class="text">Advanced Techniques</span><a class="header-anchor-select" href="https://survivejs.com/#advanced-techniques">#</a></h2>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-packages" id="authoring-packages"></a><span class="text">Authoring Packages</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-packages">#</a></h3>
<ul>
<li>Mentioned that relying on <code>postinstall</code> scripts can be <a href="http://blog.npmjs.org/post/141702881055/package-install-scripts-vulnerability">potentially dangerous</a>. If you want to skip them, use <code>npm install --ignore-scripts</code> or set <code>npm config set ignore-scripts true</code> to default to ignore.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#configuring-react" id="configuring-react"></a><span class="text">Configuring React</span><a class="header-anchor-select" href="https://survivejs.com/#configuring-react">#</a></h3>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/babel-preset-react-optimize">babel-preset-react-optimize</a> preset. You can experiment with it to get more optimal builds.</li>
<li>Explained how to configure <a href="https://www.npmjs.com/package/react-lite">react-lite</a> and <a href="https://www.npmjs.com/package/preact">preact</a> for production. This is useful if you are particularly conscious about bundle size.</li>
<li>Explained how to configure React <a href="https://facebook.github.io/react/docs/perf.html">performance related utilities</a> so that you can access them through the browser.</li>
<li>Moved the <code>module.noParse</code> idea to this chapter to improve the flow and to make the early part of the book a little easier.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I feel this release took the book a notch further. I still have plenty of topics to explore and expand upon. We'll also be continue reviewing the book chapter by chapter to push quality.</p>
<p>I'll do a little pass on the React book next to finish the split. If you have bought it already, you'll receive a free coupon to this one then to thank you for your support.</p>
<p>Of course if you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>. You can still gift the coupon to a friend. A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack. This is my way of supporting his work given mine builds on top of his.</p>
FRZR - a Tiny View Library - Interview with Juha Lindstedtafrzratinyviewlibraryinterviewwithjuhalindstedt2016-04-18t00:00:00z2016-04-18T00:00:00Z<p>Often when you pick up a JavaScript library it's going to be a little chunky - tens, or even hundreds of kilobytes. Though this can be entirely acceptable given the benefits, it might be a little much at times.</p>
<p>What if it was possible to begin from the other extreme and go from there? This is what Juha Lindstedt's library <a href="https://frzr.js.org">FRZR</a> is about. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/46846cd7fc5658dbae2c7a8998b394dc?s=200" alt="Juha Lindstedt" class='author' width='100' height='100' />
</span>
I've been working as a freelance senior web developer, doing projects with small businesses and advertising agencies. Lately I've focused on developing <a href="http://www.idid.fi">iDiD</a> digital signage system at <a href="http://www.talents.fi">ConnectingTalents</a>, where I currently work.
</p>
<p>I started in 1999 with Flash and also used PHP few years. In 2011 I fell in love with Node.js and haven't looked back since. I love crafting tailor-made projects and am not into bootstraps or heavy frameworks (although I've used all kinds of frameworks a lot in the past). I always start with an empty canvas (HTML/CSS/JS).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-frzr-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-frzr-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe FRZR to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-frzr-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>FRZR is a tiny view library (only 2 kB). It is so easy that I can teach you in 20 minutes how it works under the hood. It's also really really fast and versatile.</p>
<p>Last week I actually did a presentation, where I built FRZR from scratch live, and that way explained how it works. It took me 40 minutes, but this week I'm giving another presentation where I have to do it 20 minutes. That tells something about the simplicity.</p>
<p>To give you a better idea, consider the login form example below:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-var" >var</span> el <span class="token operator" >=</span> frzr<span class="token punctuation" >.</span>el<span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> mount <span class="token operator" >=</span> frzr<span class="token punctuation" >.</span>mount<span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >Login</span> <span class="token punctuation brackets-parentheses" >(</span>opts<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>el <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'form'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> <span class="token keyword keyword-class" >class</span><span class="token punctuation" >:</span> <span class="token string" >'login'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>email <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'input'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >'email'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>pass <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'input'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span> type<span class="token punctuation" >:</span> <span class="token string" >'password'</span> <span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>submit <span class="token operator" >=</span> <span class="token function" >el</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'button'</span><span class="token punctuation" >,</span> <span class="token string" >'Sign in'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-this" >this</span><span class="token punctuation" >.</span>el<span class="token punctuation" >.</span>onsubmit <span class="token operator" >=</span> opts<span class="token punctuation" >.</span>onsubmit<span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token keyword keyword-var" >var</span> login <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Login</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
onsubmit<span class="token punctuation" >:</span> <span class="token keyword keyword-function" >function</span> <span class="token punctuation brackets-parentheses" >(</span>e<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-var" >var</span> email <span class="token operator" >=</span> login<span class="token punctuation" >.</span>email<span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
<span class="token keyword keyword-var" >var</span> pass <span class="token operator" >=</span> login<span class="token punctuation" >.</span>pass<span class="token punctuation" >.</span>value<span class="token punctuation" >;</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span>email<span class="token punctuation" >,</span> pass<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token boolean" >false</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token function" >mount</span><span class="token punctuation brackets-parentheses" >(</span>document<span class="token punctuation" >.</span>body<span class="token punctuation" >,</span> login<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-frzr-" id="why-did-you-develop-frzr-"></a><span class="text">Why did you develop FRZR?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-frzr-">#</a></h2>
<p>Like I said before, I've used heavy frameworks in the past. The problem with them is that you never know what the next version update will do to your application. Having to rewrite your whole application because of a framework update is not that nice.</p>
<p>Or when you have to debug the code just to realize a framework swallows all the errors is just horrible. Having a really long stack traces is never good for performance and profiling, either.</p>
<p>FRZR on the other hand is so easy, you can understand 100 % how it works.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>All kinds of challenges. First I needed to study how DOM works. Then I needed to figure out how one would use the library. The latter turned out to be the hardest part. It's really hard to design a library so that it's usable in many different situations.</p>
<p>The more I iterated with it, the simpler it got. Now I'm pretty close to releasing version 1.0, since I don't think the basic idea will change that much anymore.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I should write better documentation, record some videos etc.. But I'm quite busy right now with client work, so it will take some time. I hope this week's presentation, which will be recorded, works as a good introduction for FRZR.</p>
<p>I'm also planning to publish all kinds of side libraries for FRZR. Everything is going to be really easily replaceable and usable with other libraries as well. Even the core of FRZR is just a few bunch of small and general functions.</p>
<p>Writing components with FRZR for example means writing just a plain and simple function which just returns <code>el</code>-property, which is the HTMLElement. And you can also mix and match HTML elements and FRZR components. Simple, really.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-frzr-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-frzr-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for FRZR and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-frzr-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I'm sure frameworks will get easier, but I also hope they'll get more general in a sense, that you could easily swap them. Right know the situation is so, that if you write an application with Angular, you can't really use that much of the code with Ember or React. So you get stuck with the one you're using, and that's bad.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>You could interview <a href="https://github.com/paldepind">Simon Friis Vindum</a>, the creator of <a href="https://github.com/paldepind/flyd">flyd</a>, <a href="https://github.com/paldepind/snabbdom">snabbdom</a> and many other great libraries. FRZR actually got started when I wrote the original DOM reordering script for <a href="http://riotjs.com">riot.js</a>, which Simon helped me to enhance. So in a sense he's the early contributor of FRZR. Say hello from me :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Juha. It's always refreshing to see different kind of approaches. Yours is one of the lightest view libraries I've seen. The syntax reminds me of <a href="https://github.com/dominictarr/hyperscript">hyperscript</a>.</p>
<p>If you are interested in FRZR, check out <a href="https://frzr.js.org">the official site of the library</a>. See also <a href="https://codepen.io/collection/XKwVMG/">the getting started demos</a>.</p>
SurviveJS - Webpack and React - v2.1.0asurvivejswebpackandreactv2102016-04-17t00:00:00z2016-04-17T00:00:00Z<p>It has been a while since <a href="https://survivejs.com/blog/survivejs200">the previous release</a> and quite a bit has happened. As you might have noticed, there's actually <a href="https://survivejs.com/blog/survivejs-webpack-100">a new book about webpack</a> out there now. The idea is that I will split this one in two.</p>
<p>This book will continue as something React focused while I'll push all the webpack bits to the other one. All current readers will receive a free coupon to the webpack book once I complete this transition. To get a preview, check out <a href="https://survivejs.com/webpack/preface">the online version</a>.</p>
<blockquote>
<p>A part of the income (around ~30%) goes to Tobias Koppers, the author of webpack, to support its development. That's the least I can do to support his efforts.</p>
</blockquote>
<p>This release, 2.1, can be considered a bug fix release. There isn't any major new content. In fact, I dropped the <a href="http://jscs.info/">JSCS</a> section as it was announced that the project has reached end of life. The core team will join <a href="http://eslint.org/">ESLint</a> efforts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>Even though getting this release out there took longer than I would have liked, I feel we are on the right track. I've managed to take care of certain necessary things, such as setting up a proper business entity (waiting for the government now). I even got a nomination for <a href="http://www.bluearrowawards.com/">an award</a>, but I have no high hopes for that of course.</p>
<p>Splitting the book will allow me to provide more focused content. I got into touch with my old editor and we'll be working especially on the webpack book to push it further. During the week I actually discovered <a href="https://github.com/survivejs-demos/webpack-demo/tree/dev">a neater way to structure webpack configuration</a>.</p>
<p>The solution relies on <a href="https://www.npmjs.com/package/webpack-merge">webpack-merge</a>, a tool I developed earlier for the purposes of this book. The approach allows you to split your configuration into easily reusable functions. The next version of the webpack book will cover it in detail.</p>
<p>I have agreed to a training day at May. This will give me a good excuse to research further. Particularly Redux will receive attention. During the past few weeks I've spent a lot of time with it so I know the pros/cons and related patterns quite well now. This will pay off in the coming weeks.</p>
<p>I hope to complete the split in the next release. That will make room for more content and make it easier to maintain it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-1-0" id="book-improvements-2-1-0"></a><span class="text">Book Improvements - <code>2.1.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-1-0">#</a></h2>
<p>In total 112 commits went to book since the last release. Given PDF generation was sketchy at best and didn't even work on certain systems, I ended up scrapping it for now. <a href="https://www.gitbook.com/">GitBook</a> doesn't support the custom syntax the book relies on so the output was not optimal.</p>
<p>It might be feasible to fix the situation in the future by rendering the site to PDF through something like <a href="https://www.npmjs.com/package/html-pdf">html-pdf</a>. This is an approach I used successfully in my React based <a href="https://github.com/bebraw/generate-invoice">invoice generator</a> and it worked beautifully there.</p>
<p>Even though I did my best to avoid mistakes with <a href="http://www.amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X">the Amazon version</a>, a few smaller issues managed to find their way into the book. Fortunately nothing major, though. I've listed these issues at <a href="https://github.com/survivejs/webpack_react/blob/dev/amazon_errata.md">the Amazon errata</a>. The errors listed there have been fixed in the paper version.</p>
<p>You can find the important changes below. See GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.0.0...v2.1.0">all changes</a>. Especially the "Files changed" tab is highly useful.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h3>
<ul>
<li>Mentioned <a href="https://github.com/bucaran/fly">Fly</a> as an alternative to Gulp. It relies on ES6 generators.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Recommended the usage of an LTS (Long-Term Support) version of Node. Please don't use Node 0.10 or 0.12 anymore. That's just asking for trouble. :)</li>
<li>Mentioned <code>--save-exact</code> and <code>-E</code> shortcut for those who want to install exact versions of their dependencies.</li>
<li>Simplified <em>app/index.js</em> further. Literally just <code>document.body.appendChild(component());</code> after the import does the trick.</li>
<li>Mentioned where to look for the generated bundle.</li>
<li>Explained that <em>npm start</em> and <em>npm test</em> are special cases. Normally you run scripts through <em>npm run</em>.</li>
<li>Mentioned that polling is needed for Vagrant and Ubuntu too.</li>
<li>Simplified polling configuration. Now it's on JavaScript side.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Linked to the correct page related to <a href="https://babeljs.io/docs/plugins/#stage-x-experimental-presets-">Babel's experimental features</a>.</li>
<li>Mentioned that it's a good idea to disable IDE feature known as <strong>safe save</strong> if you are using HMR. It can cause problems.</li>
<li>Clarified the section about React component styles.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Clarified the spread operator idea so it's clear that it should still go through the <code>setState</code> method.</li>
<li>Added examples of how to write function based components. This helps to understand the syntax and how it works better.</li>
<li>Explained refs in greater detail.</li>
<li>Added <code>e.stopPropagation();</code> to <code>deleteNote</code> in order to avoid bubbling to edit.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Clarified the <code>waitFor</code> section.</li>
<li>Expanded on the <code>onEdit</code> and <code>onValueClick</code> idea to see how they work.</li>
<li>Expanded on the idea of <em>controlled</em> and <em>uncontrolled</em> components. There's a section for this now.</li>
<li>Added a section about cleaning up notes. While writing this section I realized this bug could be turned into a feature - a recycle bin for notes.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Dropped <code>isDragging</code> check. The current version of React DnD doesn't need it anymore.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Added missing <code>inject: false</code> to <code>HtmlWebpackPlugin</code> configuration to make it work with the template.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react" id="testing-react"></a><span class="text">Testing React</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react">#</a></h3>
<ul>
<li>Explained <code>resolve.alias</code> idea in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react" id="typing-with-react"></a><span class="text">Typing with React</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react">#</a></h3>
<ul>
<li>Mentioned <a href="https://palantir.github.io/tslint/">TSLint</a>.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/babel-plugin-flow-react-proptypes">babel-plugin-flow-react-proptypes</a>.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/flow-status-webpack-plugin">flow-status-webpack-plugin</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Mentioned that <a href="http://eslint.org/blog/2016/04/welcoming-jscs-to-eslint">JSCS decided to merge its efforts with ESLint</a>. As a result I dropped the JSCS section.</li>
<li>Mentioned that it is possible to use ESLint autofixing through the Webpack plugin.</li>
<li>Showed how to enable caching for ESLint to speed it up.</li>
<li>Mentioned how to make ESLint respect <em>.gitignore</em>.</li>
<li>Showed how to use vanilla ES6 with ESLint.</li>
<li>Mentioned that ESLint supports other formats than JSON for configuration.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-packages" id="authoring-packages"></a><span class="text">Authoring Packages</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-packages">#</a></h3>
<ul>
<li>Mentioned that <code>postinstall</code> scripts can be <a href="http://blog.npmjs.org/post/141702881055/package-install-scripts-vulnerability">potentially dangerous</a>.</li>
<li>Mentioned <a href="https://docs.npmjs.com/files/package.json#bundleddependencies">bundledDependencies</a> for those that are cautious.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/npm-check">npm-check</a> for updating dependencies.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Added PostCSS image and linked to <a href="http://postcss.org/">PostCSS site</a>.</li>
<li>Cleaned up CSS Modules example.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#language-features" id="language-features"></a><span class="text">Language Features</span><a class="header-anchor-select" href="https://survivejs.com/#language-features">#</a></h3>
<ul>
<li>Mentioned it is possible to omit <code>()</code> with simple fat arrow functions. I.e., <code>const square = a => a * a;</code> is valid.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/analyze-es6-modules">analyze-es6-modules</a> given ES6 module format is statically analyzable and enables these type of tools to provide you more information about your source.</li>
<li>Mentioned spread operator gotchas (shallow by default).</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Even though I have managed to tackle some of my goals, there is still work left. The split took some time, and will take still, but I believe it was a good move. Upon completion it will make room for more development.</p>
<p>I still have improvements planned. I've listed these based on priority:</p>
<ul>
<li>Complete the book split. I'll drop the webpack bits from this book and provide you a boilerplate instead. This means the readers get faster to the React bits. This decreases the weight of the book somewhat and makes room for more goodies and growth.</li>
<li>Port book content to Redux. I have prepared both <a href="https://github.com/survivejs-demos/redux-demo">vanilla and Immutable.js versions of Kanban</a> to prepare for this.</li>
<li>Write <strong>async</strong> appendix. This would show how to deal with asynchronous concerns through Alt. It's a common problem and worth covering.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#expanding-business" id="expanding-business"></a><span class="text">Expanding Business</span><a class="header-anchor-select" href="https://survivejs.com/#expanding-business">#</a></h2>
<p>Currently I'm in authoring/consulting/training mode. Even though consulting and training take time out of authoring, they feed back in terms of experience. I'm particularly excited about the upcoming training case. It will force me to simplify and focus.</p>
<p>Possible service model is possible still. If you would be interested in becoming a supporter and gaining early access to content, and even one-on-one time with me, <a href="http://eepurl.com/bQAeuH">sign up to the supporter mailing list</a>. Signing up doesn't bind you to anything and it's more of a signal for me to do something about it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy this release. Thanks for support. That's what makes this worth doing.</p>
<p>Remember that you can find up to date code from <a href="https://github.com/survivejs/webpack_react">the book repository</a>. The stable version of the book is available at the <code>master</code> branch.</p>
<p>You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. It's good for me to know where you struggle so I can tweak the book.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a> or <a href="amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X">Amazon</a> (paper version). Every little bit counts and allows me to keep it up.</p>
Relax - New generation CMS on top of React and Node.js - Interview with Bruno Motaarelaxnewgenerationcmsontopofreactandnodejsinterviewwithbrunomota2016-04-11t00:00:00z2016-04-11T00:00:00Z<p>Even though I've spent a lot of time with web development, I never really delved into the world of Content Management Systems (CMS). I'm of course aware of WordPress, Drupal, and such. I've managed to get away with either something entirely custom or a static site generator. Even this site has been developed using <a href="https://antwarjs.github.io/">one</a>.</p>
<p>Given how much effort developing a static site generator takes, I can only imagine how hard it is to develop an entire CMS. <a href="https://twitter.com/bruno12mota">Bruno Mota</a> and friends have developed a system known as Relax on top of React and Node.js. He claims it is a new generation CMS. What does this mean? Let's find out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/18af7addb03d91d4659db11dc8c6c325?s=200" alt="Bruno Mota" class='author' width='100' height='100' />
</span>
My name is Bruno Mota and I'm one of the creators of Relax CMS. I've been working on web projects for the past few years, specially with JavaScript. I started making Flash projects with ActionScript when I was in high school which started my developer vein. Eventually switched to JavaScript and gradually to more advanced stuff.
</p>
<p>Soon enough I was selling plugins and themes online, mainly on the <a href="https://envato.com/?ref=plusquare">Envato</a> marketplace. And now, in the last months, Relax, a full CMS built using latest techs in the JavaScript world.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-relax-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-relax-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Relax to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-relax-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Relax is a CMS, in longer terms a content management system, with some additional powers. The idea behind relax is that anyone should be able to build a website without needing to make a single line of code.</p>
<p>The two most important features on Relax that differentiates it from other CMSs is the page builder and the content types builder.</p>
<p>The page builder lets you build any page with drag and drop, providing you instant feedback on how your page will look. It is component based, so you have a bunch of components from the most basic such as text and image, to more complex ones, such as music player or video. For each of these components you can alter a bunch of settings to change its looks and behavior.</p>
<p>
<iframe src="//player.vimeo.com/video/162203892?autoplay=0&loop=1&portrait=0&title=0&byline=0&badge=0" width="100%" height="300px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</p>
<p>The content types builder let's you create data models to use in your site or just to save information. A good and standard example of a content type is a blog, each blog post might have a featured image, a title, a description, etc. With Relax you can create this in a simple and graphic way on the admin area.</p>
<p><figure><img src="/09582769eaa13975b9336aff18957694.jpg" alt="Asset types" class="" width="" height="" /><figcaption>Asset types</figcaption></figure></p>
<p>But wait, isn't there already page builders and content types builders around? Yes there is, but Relax takes it up a big notch integrating the both. You can link data from your created content types in the page builder itself, and all with drag and drop! So you can create a blog posts list using the page builder only. You can also create singles for the blog posts by linking data in the page builder as well.</p>
<p>
<iframe src="//player.vimeo.com/video/162203696?autoplay=0&loop=1&portrait=0&title=0&byline=0&badge=0" width="100%" height="300px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-relax-" id="why-did-you-develop-relax-"></a><span class="text">Why did you develop Relax?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-relax-">#</a></h2>
<p>Relax was product of my user experience perfectionist frustration with other CMSs such as WordPress. Don't get me wrong, WordPress is a really solid and a great CMS that has been in the top for a long time. And I used to work with it, making plugins and themes, which is where my frustration comes from.</p>
<p>It all started on a project to make a multipurpose WordPress theme to sell on <a href="http://themeforest.net/?ref=plusquare">Themeforest</a>. A multipurpose theme is basically providing a lot of control to the theme user to customize their site with almost endless possibilities. This proved to be a hard challenge. Almost endless work on creating options and plugins such as: a page builder, a menu builder, options to control colors, sizes, fonts, etc.</p>
<p>I definitely needed help, and that's when <a href="https://github.com/magalhas">José Magalhães</a> and <a href="https://github.com/ivomiguelas">Ivo Silva</a> started to work with me on it. Short after, we came to a conclusion. Not only it was a lot of work but we were also being limited by the CMS itself. By creating plugins and options for the theme we were adding dynamism but loosing big time in user experience. It was literally hundreds of options bloated into the already bloated WordPress interface.</p>
<p>We thought it was time to change that. The technology is available, so why not do something that prevents these issues and give total control to the user? That's where Relax, the idea, started to take its form.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>Whole sort of challenges! But there are two main reasons:</p>
<ul>
<li><strong>User experience</strong> - It has been really hard to come up with solutions that don't overflow the user with options, but at the same time, provide all the options needed. We've made a huge effort in this area and one of it is currently undergoing. We're re-designing the whole admin area, and our focus has been in providing a drill down experience where the user is presented with the minimum data he needs for each action or area of action.</li>
<li><strong>Fast environment</strong> - In the last months the JavaScript world has been affected by an avalanche of new trends, libs and setups. This was great for Relax in the way that it could benefit from these new techs. But bad in the way that it slowed the project down quite a lot. Since Relax was created, we've switched from ES5 to ES6, from a REST system to GraphQL, grunt build to webpack, Backbone to Redux and React Router, and recently we've introduced Relate into the mix.</li>
</ul>
<p>We're now at a stable path with the techs we're using. User experience is something that is never finished but something that is constantly worked on. We do have almost everything designed and planned for the beta release.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Well, we should finish the dashboard design development the next 3-4 weeks. It will be a fresh face to Relax and a much better user experience overall. Then it's a matter of concluding some pendent issues towards the beta release. We've set up a macro view of what's missing at <a href="https://github.com/relax/relax/blob/master/ROADMAP.md">the roadmap</a>.</p>
<p><figure><img src="/2b536bac95e6800e9cc6cc7b462f5bbc.jpg" alt="Asset search" class="" width="" height="" /><figcaption>Asset search</figcaption></figure></p>
<p>We have bigger plans later down the road for Relax. Relax CMS will always be free as an open source project. Although, we have plans to make a marketplace where developers and designers can sell themes and more complex components for Relax. It will be a review based marketplace to assure every item will be top notch.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Front-end development changed dramatically in the last few years. I mean, not a long time back we were serving html files, introducing some JavaScript here and there. And now, the trend has shifted to full JavaScript applications. It has been really great to see and live through these changes.</p>
<p>React broke a lot of barriers as a "view layer". Composability enables us to focus on each piece of our application at a time. And this is a trend I see growing even more in the future. With recent build processes such as <a href="https://webpack.github.io/">Webpack</a>, not only components define what they show, but also how they look, the assets it uses and, in more recently movements, the data needs from the server with <a href="http://graphql.org/">GraphQL</a>.</p>
<p><a href="https://facebook.github.io/relay/">Relay</a> is an awesome solution provided by the facebook team that takes this step exactly of defining server data needs in the components. For Relax we've made <a href="http://relax.github.io/relate/">Relate</a>, a custom solution that meets its kind of demands, which we open sourced separately so other people can use it. There is still a lot of experimenting to do in this area, and I think there will be great advances in the following year.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/jdalton">John-David Dalton</a>, the creator of <a href="https://lodash.com/">lodash</a>. Would love to know if there are some plans for some lodash immutable utils.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks a lot for the interview Bruno! It is definitely an exciting time to be a web developer. Projects like Relax are a good example of that.</p>
<p>If you want to take a better look at Relax, check out the <a href="https://github.com/relax/relax">GitHub repository</a>. There is also <a href="http://slack-relax.herokuapp.com/">Slack</a> if you want to chat about the topic with the authors.</p>
SurviveJS - Webpack - v1.0.0asurvivejswebpackv1002016-04-02t00:00:00z2016-04-02T00:00:00Z<p>I'm currently in process of splitting up the big book (<a href="https://leanpub.com/survivejs_webpack_react">SurviveJS - Webpack and React</a>). The split allows me to dig deeper in both topics. This book, <a href="https://leanpub.com/survivejs-webpack">SurviveJS - Webpack</a>, focuses on webpack as you might guess.</p>
<p>Given this is the very first edition, you can expect some rough spots. Some interesting topics are missing as well, but you have to start from somewhere.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#release-notes" id="release-notes"></a><span class="text">Release Notes</span><a class="header-anchor-select" href="https://survivejs.com/#release-notes">#</a></h2>
<ul>
<li>There's an <a href="https://survivejs.com/webpack/preface">online edition</a>. It contains the same content as the commercial version. I am just experimenting with a little different model here for a change to see how it goes.</li>
<li>If you have bought "SurviveJS - Webpack and React", you will receive this book for free once I complete the split. That book will become simply "SurviveJS - React". This will give me room to develop more React specific content.</li>
<li>A part of this books profit (around ~30%) will go to Tobias Koppers, the author of webpack. This book simply wouldn't be possible without him so he more than deserves a cut.</li>
<li>Feedback is welcome. Prefer <a href="https://github.com/survivejs/webpack/issues">the GitHub issue tracker</a> for that. You can reach me other ways too. I am particularly interested in what sort of content to develop.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the book. If you have read the original one, you probably won't find a lot of new content here. I feel the content is easier to access, though, and there are some nuggets of information you just might not be aware of yet.</p>
<p>If you want to support the development of the book, <a href="https://leanpub.com/survivejs-webpack">pick up a copy at Leanpub</a>.</p>
<p>Till the next release! It's time to refresh the big one.</p>
React.rocks - React Components and Demos - Interview with Jeff Winklerareactrocksreactcomponentsanddemosinterviewwithjeffwinkler2016-03-14t00:00:00z2016-03-14T00:00:00Z<p>Given there's a lot going on in the React ecosystem, it can be difficult to keep up. Jeff Winkler maintains a service known as <a href="https://react.rocks/">React.rocks</a> to alleviate this problem. To get a better idea of what the service is about, read on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/e5055021e46feb70f5383eaf34d740e8.jpg" alt="Jeff Winkler" class="author" width="100" height="100" /><figcaption>Jeff Winkler</figcaption></figure>
I am a full stack developer and I have been writing code for over 20 years. From museum kiosks to big enterprise software. I've been using React for a couple years. I'm a tool/feedback loop junkie. I've been lucky enough to work on a couple green-field ReactJS projects.
</p>
<p>My wife and I live outside Boston and we have a five year old, it's really fun to see through the eyes of a kid.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-rocks-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-rocks-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe React.rocks to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-rocks-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>React.rocks has examples of things built with React. To be included, entries must have online demos and be open source. Visitors can go from screenshot to demo, then dive into the source code.</p>
<p>Entries are tagged to help find like examples. The entries are manually curated, at a rate of a couple a day. The site features bigger "apps" than single components.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-react-rocks-" id="why-did-you-develop-react-rocks-"></a><span class="text">Why did you develop React.rocks?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-react-rocks-">#</a></h2>
<p>While learning React, I kept adding to a text file file cool things built with it. It wasn't working, so building a site seemed like a good forcing function. A static site with no server was intriguing. Once I registered the domain, wanted to follow through with it!</p>
<p>I wanted to build a purely static site with ultra-fast performance. It's to geek out on optimizing data transfer and size. Despite being image heavy, It's 508K all-in.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>The code base has been pretty stable. Challenges are more finding content. Each morning I read #reactjs. This takes a lot of time but is a good way to spot trends.</p>
<p>Sometimes it's hard to get motivated to update the site, but finding new things built with React is invigorating.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I've been thinking performance a lot - how to benchmark the rendering of React components? How do you encode policies in <a href="http://flowtype.org/">Flow</a>/<a href="http://eslint.org/">ESLint</a> to keep an app fast as developers and component counts grow?</p>
<p>On the backend, <a href="http://elixir-lang.org/">Elixir</a> is very interesting to me. It's a language built on the <a href="http://www.erlang.org/">Erlang</a> VM that's been powering telecomm for 30 years. Ground-up Immutability and functional style, multi-core ready.</p>
<p>I need to open source the code for React.rocks, to get contributions from smarter folks.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>More fatigue! :) The JS/React communities will keep pushing the envelope and trying new things.</p>
<p>At the same time, there's an awareness that React can be too "bazaar" for newcomers. The community has a ton of brainpower and energy. I think we'll see some gentle guidance to harness that effort to improve onboarding and pave cowpaths. Ryan Florence's <a href="https://github.com/ryanflorence/react-project">React-project</a> looks promising.</p>
<p><a href="https://facebook.github.io/graphql/">GraphQL</a> will keep gathering steam. Diverse communities are excited by it. It's declarative and batches expensive operations - just like React! Within a year I expect back-end ORMS/persistence layers to support GraphQL out of the box. It just makes sense to leverage the metadata.</p>
<p><a href="https://facebook.github.io/react-native/">React Native</a> optimizes for team throughput. I'd expect more success stories.. and a tipping point in a year or so.</p>
<p>Functional programming and Immutability are clearly good things. We'll keep seeing attempts to move toward <a href="http://elm-lang.org/">Elm</a>-ish pure paradigms. ES2015 has the most momentum and user base.</p>
<p>App Shells, Service Workers, and WebGL all seem super interesting, with unexplored upsides.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Ryan Florence, about the work he's doing with react-project, a CLI for React.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Jeff! I hope <a href="https://react.rocks/">React.rocks</a> continues to grow and flourish. It's one of those community resources that it's hard to live without. Keep it up!</p>
Reindex - Instant GraphQL Backend for Your React Apps - Interview with Ville Immonenareindexinstantgraphqlbackendforyourreactappsinterviewwithvilleimmonen2016-03-07t00:00:00z2016-03-07T00:00:00Z<p>More often than not, you are going to need a back-end for your application. Particularly RESTful APIs are popular. They are not the only choice, though. GraphQL is a specification that has been designed apps in mind. Rather than separating our API end-points by resource, we get something entirely different.</p>
<p>To understand the topic a little better, I am interviewing Ville Immonen of Reindex.</p>
<blockquote class="warning"><i class="icon-attention"></i><a href="https://www.reindex.io/blog/discontinuing-backend-as-a-service/">Reindex has been discontinued as a service</a>. You can still read the post to gain insights, though.</blockquote><h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img
src="https://www.gravatar.com/avatar/e89d8e6912bf23525337395769e16505?s=200"
alt="Ville Immonen" class='author' width='100' height='100' />
</span>
My name is Ville Immonen and I'm a co-founder at <a href="https://www.reindex.io/">Reindex</a>, where I work to make it simpler for developers to build web and mobile apps by using React and GraphQL.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-reindex-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-reindex-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Reindex</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-reindex-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Reindex is a GraphQL service you can use as a backend for your apps. It's very easy to setup and handles the data storage, authentication, permissions and other server-side tasks, so you can focus on building awesome apps for your users instead of managing servers and developing and maintaining APIs.</p>
<p>You use Reindex by defining your data model – the types you have and their fields. Then you just push that definition to the service and the API and data storage for your model is created automatically. The API uses <a href="http://graphql.org/">GraphQL</a>, data query language developed for building apps at Facebook that lets you write client-side queries for data fetching.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-is-graphql-" id="what-is-graphql-"></a><span class="text">What is GraphQL?</span><a class="header-anchor-select" href="https://survivejs.com/#what-is-graphql-">#</a></h2>
<p>GraphQL is an efficient way to fetch data, because it lets you get just the data you need in a single request, instead of, for example, having to write a lot of plumbing code to patch everything together from numerous REST endpoints that return everything a client might need.</p>
<p>GraphQL fits very well with the way we as front-end developers think of and use data on the client. We have hierarchical components, or views, and GraphQL lets us get the data to populate those views in the same hierarchical fashion.</p>
<p>Another feature of GraphQL is that it allows introspection, the types available on the server can also be queried using GraphQL. This opens up possibilities for all kinds of smart tools and libraries.</p>
<p>One of the most interesting ones is <a href="https://facebook.github.io/relay/">Relay</a>, a JavaScript framework for data fetching that lets you decorate React components with GraphQL queries and it can handle fetching, caching and managing data for your app.</p>
<p>To sum up, we're very excited about the possibilities GraphQL has for efficient product development and aim to make Reindex the best way to build and host a GraphQL API for your app.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-reindex-" id="why-did-you-develop-reindex-"></a><span class="text">Why did you develop <em>Reindex</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-reindex-">#</a></h2>
<p>We're product developers ourself, with experience building apps for startups and bigger companies alike. We've used React since 2013 and it's made a huge impact in productivity. But we always thought managing data in client-side apps was an unsolved problem that introduced a lot of plumbing and complexity in the code.</p>
<p>I previously worked on a project where the data layer went through many iterations, from a REST API built in house and plumbing for it with reactive programming on the client-side, to using Flux on the client and finally dropping the custom API server in favor of a Firebase to store the data. This was a big improvement for developer productivity, but it still required a lot of complex plumbing to manage on the client.</p>
<p>The answer came a year ago, when Facebook introduced GraphQL and Relay at React.js Conf 2015. The talk by Dan and Jing was enough to convince us that this was going to be something big and it addressed the problems we previously had in product development.</p>
<p>We wanted to build a server that would be as easy to setup as Firebase, but have the capabilities of GraphQL to make it work with Relay. This is how the idea of Reindex was born and we started to develop it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>We continue to improve Reindex to make it work for various kinds of applications. It's really exciting to see what developers will build on top of it.</p>
<p>Here are some things we want to explore going forwards:</p>
<ul>
<li>Connecting to external data sources - This will allow Reindex to be used as a gateway to bring all your data sources together under one GraphQL API to build client-side apps on. We want to make Reindex the best way to build GraphQL APIs, regardless of where the data is stored.</li>
<li>Developer experience - GraphQL opens up great possibilities for advanced integration with developer tools. We'll be working in collaboration with tool developers to imagine and realize a cohesive development experience of the future for apps using GraphQL.</li>
<li>Real-time updates - There is an ongoing effort to bring subscriptions to GraphQL and Relay. We're following this progress and looking forward to making subscriptions easy to use with Reindex in apps that require them.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>React is not just a UI library anymore, it's an ecosystem, and it's becoming a cohesive platform for building apps both for the web and for proprietary mobile platforms. This platform consists of technologies like React, React Native, GraphQL, Relay, Babel and Flow, and this year we will see the ecosystem continue its huge growth, but also become more mature.</p>
<p>In 2015 we saw a number of new solutions emerge to problems with data management, including GraphQL and Relay, Redux, Om Next and Falcor. Although my bets are on GraphQL and Relay, it's not yet certain who will come out as a winner. What is certain though, is that we will continue to see a lot of new innovation and exploration in this space.</p>
<p>We will also see better tools that make developers more productive on the React platform and ease the growing pains around tooling felt by many, also known as the <a href="https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4">"JavaScript fatigue"</a>. The whole experience of building apps with these technologies will become more integrated, and easier to setup by virtue of opinionated toolchains that "just work".</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>The possibilities are endless! You should have someone talk about React Native, like Brent Vatne. And ask Nick Cammarata or Nate Wienert from Motion what the React development tools of the future will look like.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Ville! If Reindex or GraphQL sounds something that's in your alley, consider the following resources:</p>
<ul>
<li><a href="https://www.reindex.io/docs/">Reindex docs</a></li>
<li><a href="https://github.com/reindexio/reindex-examples">Reindex examples</a></li>
<li><a href="https://facebook.github.io/relay/">Relay docs</a></li>
</ul>
SurviveJS - Learn Webpack and React - Interview with Juho Vepsäläinenasurvivejslearnwebpackandreactinterviewwithjuhovepsalainen2016-02-29t00:00:00z2016-02-29T00:00:00Z<p>There is always some level of tension between getting things done and learning new technologies. A lot of the recent JavaScript fatigue stems from that. A year ago I decided to take some preemptive moves against it. The whole point of the SurviveJS effort is to smoothen the way, and quite literally, survive JavaScript and its growth.</p>
<p>The effort reached an important milestone as my first book, <em>SurviveJS - Webpack and React</em>, reached its <a href="https://survivejs.com/blog/survivejs200">2.0 version</a>. As a part of the release, <a href="http://www.amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X">a paper version</a> became available. This wouldn't have been possible without the awesome community around me of course. The support during this little journey has enabled me to continue.</p>
<p>As it's a good idea to recover a bit after a major release, I've had time to reflect and scheme. Even though I have taken it easier when it comes to writing, I found time to pay off some technical debt and update the site. Now that this has been done, it's easier to progress again.</p>
<p>In order to give you more background on the effort, this felt like a good time to interview myself. It's not perhaps the most original thing to do, but I hope you learn a thing or two about me from it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/b26ec3c2769168c2cbc64cc3df9cdd9c?s=200" alt="Juho Vepsäläinen" class='author' width='100' height='100' />
</span>
I am Juho Vepsäläinen, the person that maintains this little effort. My background is academic (<abbr title="Master of Science">MSc</abbr>), and before delving into the world of books, I spent a few years subcontracting and working with startups. The whole point of the current effort was to find a more sustainable direction.
</p>
<p>It feels like the work hasn't been in vain. It has definitely taught me a lot about technology, authoring, and business in general. That said, there's still plenty to learn.</p>
<p>All I can hope is that I can learn from my mistakes and manage to push the effort forward. Fortunately not a lot of pushing is needed as community often literally pulls the content from me. Better this way.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-survivejs-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-survivejs-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>SurviveJS</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-survivejs-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Imagine you found yourself in the middle of a jungle. What would you love to have with you? A machete obviously. It's easy to get lost with JavaScript. My goal here is to provide tools that help you to navigate this jungle. <em>SurviveJS - Webpack and React</em> was my first stab towards this overall vision.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-survivejs-" id="why-did-you-develop-survivejs-"></a><span class="text">Why did you develop <em>SurviveJS</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-survivejs-">#</a></h2>
<p>I was somewhat frustrated with my current situation. My main gripe with contracting is that it's often an hour's pay for an hour's work. I am simply not that great at it. So I thought maybe I could apply my skills at something else while helping the community.</p>
<p>The common wisdom is that you shouldn't write technical books. In retrospect, disregarding that wisdom was a good move for me. There are easier ways for a programmer to make money.</p>
<p>Writing isn't a problem, actually marketing and selling the books is. You will need to get a lot of things right to make it work. These problems are pronounced for a first time author as you might need to figure it out as you go.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>After getting the physical edition to my hands, I realized one thing. The book is actually pretty chunky! The format, letter (about ~A4), is big. It's more like a textbook. I'm not sure if that's the vibe I want from a book. Fortunately, this is something that's quite easy to fix.</p>
<p>As the book title says, the book covers both <a href="https://webpack.github.io/">Webpack</a> and <a href="https://facebook.github.io/react/">React</a>. But what if you don't want to learn the both?</p>
<p>This is the reason why I will be splitting up the book in two in the near future. Instead of <em>SurviveJS - Webpack and React</em> you will have <em>SurviveJS - Webpack</em> and <em>SurviveJS - React</em>. The great thing about this move is that it allows me to focus better on both topics while allowing to serve you better.</p>
<p>The idea is that the current book will be rebranded as <em>SurviveJS - React</em>. The current Leanpub readers will receive <em>SurviveJS - Webpack</em> for free. The total cost of both books will go up while the price of an individual book might go down a notch. So if you want to save a bit, this might be a good chance to pick the current offering.</p>
<p>There's <a href="https://survivejs.com/webpack/preface/">an early draft of the Webpack book</a> online. It is based on the Webpack cookbook I wrote with <a href="http://www.christianalfoni.com/">Christian</a> a year ago. I will still have to dig through the content and modernize it. During the process I will also port the Webpack bits from the current book there and implement a lighter setup for the React project.</p>
<p>The model will remain the same. A part of the content will remain closed to motivate people to pay for it. Obviously I cannot force anyone to buy it, but for now this seems like a good way to go.</p>
<p>Over longer term I want to provide something subscription based. This supporter scheme would give you early access to new content and private Slack. It would start at $20 per month. If this is something you would like to participate in, <a href="http://eepurl.com/bQAeuH">sign up to the supporter mailing list</a>. Signing up doesn't bind you to anything. It's more about measuring potential interest.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>We are going to see consolidation. Architectures and tooling will move towards something more standard. <a href="https://www.youtube.com/watch?v=-RJf2jYzs8A">Ben Alpert discussed the former</a> at his recent React.js conference talk. Architecture-wise the goal is to end up with something that combines the best ideas of Flux, Redux, and Relay into one.</p>
<p>Tooling-wise we'll end up with something more opinionated. Currently we have an amazing amount of boilerplates. Boilerplates help you to get started, but they don't resolve issues related to maintenance. At worst they are actually counter-productive as you need to alter them to fit your purposes. Incidentally this is the reason why we have so many boilerplates. It's hard to agree technically on everything.</p>
<p>I think we'll find ways to alleviate this problem. We will still have boilerplates, but they will have less boilerplate in them. Particularly the amount of direct dependencies will decrease. We will push a lot of complexity elsewhere and end up with more standard ways of doing things. Not every React developer should know how to set up something like hot loading for instance.</p>
<p>Perhaps a tool like <a href="https://github.com/Yomguithereal/kotatsu">kotatsu</a> or <a href="https://github.com/insin/nwb">nwb</a> will grow popular and solve the problem once and for all. I have a little idea of my own in the form of <a href="https://github.com/survivejs/webpack-presets">webpack-presets</a> (think Babel presets but for Webpack). There's definitely room for innovation in this space.</p>
<p>Thinking outside of React, perhaps we will end up with <a href="https://survivejs.com/blog/towards-common-components">better ways of sharing components</a> as I discussed earlier. It doesn't feel particularly smart to re-invent the wheel for every single ecosystem. We should be able to share more. Perhaps we will see more convergence as the web platform matures and we can integrate the most important ideas to it. The less layers we need on top of it, the better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I know who I am going to interview next. You have to wait till the next interview for that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>This was a weird interview to write. I hope it gave you some insight on what runs inside my head and how I think about technology. Web development is at the same time awesome yet frustrating. At least you will never run out of things to learn.</p>
<p>If you haven't checked out the current book, consider starting out <a href="https://survivejs.com/react/introduction/">the online edition</a>. Even if you know the technology well, there could be some nuggets of information you could put into good use at your work. I hope you find the effort useful!</p>
react-styleguidist - Style guide generator for React - Interview with Artem Sapeginareactstyleguidiststyleguidegeneratorforreactinterviewwithartemsapegin2016-02-22t00:00:00z2016-02-22T00:00:00Z<p>People have been developing style guides for their sites and applications for quite a while. They define basic building blocks and aesthetics. This is valuable as it helps you to keep your design consistent and communicate it to your developers better. Style guides can also help to bridge designers with developers.</p>
<p>Given React is component driven, the approach works beautifully here. Artem Sapegin has developed a tool known as <a href="https://github.com/sapegin/react-styleguidist">react-styleguidist</a> for this purpose. It allows you to reach towards these ideals within the context of React. To understand the tool a bit better, read on.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://s.gravatar.com/avatar/16a1493bcecf09614c413e571c371e96?s=200" alt="Artem Sapegin" class='author' width='100' height='100' />
</span>
</p>
<p>I’m a front-end developer at <a href="http://here.com/">Here</a> in Berlin where I’m trying to make work of my colleagues easier by developing internal tools using React.</p>
<p>I like to spend my spare time making photographs, traveling, reading, drinking coffee and stroking my dogs.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_react-styleguidist_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_react-styleguidist_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>react-styleguidist</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_react-styleguidist_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>It’s a style guide generator for your React components. Each component has a props table and documentation section that renders from Markdown file where every code sample transformed into a playground with rendered code and a code editor where you can change its code and see how component behave with different props.</p>
<p>You can also use react-styleguidist as a workbench to develop new components: it has a dev-server and hot-reloads any changes in components’ code and Markdown documentation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-_react-styleguidist_-" id="why-did-you-develop-_react-styleguidist_-"></a><span class="text">Why did you develop <em>react-styleguidist</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-_react-styleguidist_-">#</a></h2>
<p>Because I couldn’t find any good tool to make a style guide for my project at work.</p>
<p>Then I was trying to hack something and the idea of using Webpack loaders to load and hot-reload examples and Markdown documentation came to my mind.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The biggest challenge with developing react-styleguidist is integration with users’ projects: Webpack loaders, styles and everything else should be isolated as much as possible and react-styleguidist’s code shouldn’t clash with project’s code. At the same time, it should be easy to integrate react-styleguidist to the user’s project and the user should be able to modify style guide as they like.</p>
<p>Most of the bugs at our GitHub issues are conflicts with users projects’ configuration. So there are still a lot of work in this area and any help is very appreciated.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think the React ecosystem will stabilize a bit and opinionated libraries, that wrap many smaller libraries, will emerge to make starting new projects for the beginners a lot easier.</p>
<p>I hope developers will find and document more best practices of developing React applications. I also hope that tools will be easier to configure or at least it will be easier to find out what’s wrong with your configuration.</p>
<p>Developing with React now has many benefits and very exciting, but requires you to answer too many questions and always be a bit unsure about your work.</p>
<p>I also think that in a few years we will have a common standard for components that would work in React as well as other frameworks like Angular 7 or Ember 9. Like we had jQuery plugins before.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/sebmck">Sebastian McKenzie</a>, a Babel’s creator.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thank you for your interview Artem. I wish the best of luck to your project!</p>
<p>react-styleguidist just reached an important milestone with its <a href="https://github.com/sapegin/react-styleguidist/releases/tag/2.0.0">2.0.0 release</a>. See also <a href="https://github.com/sapegin/react-styleguidist">the GitHub repository</a> of the project.</p>
<p>To get a better idea of what kind of style guides the tool is able to produce, check out <a href="https://react-styleguidist.js.org/">the example style guide</a>.</p>
SurviveJS - Webpack and React - v2.0.0asurvivejswebpackandreactv2002016-02-15t00:00:00z2016-02-15T00:00:00Z<p>When I started this project roughly a year ago I had no idea how rewarding and demanding one it would be. Writing books is way harder than it sounds. Especially when you go through the self-publishing route, you have a lot to learn!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I believe this little journey has been worthwhile. And if it's up to me, it's a journey that will continue. Even though I am very happy to announce the final 2.0 version of the book, I see that as a milestone, not as an end. But what an important milestone it is.</p>
<p>The goal of this release was to produce something worth publishing in a paper format. The greatest advantage of a digital book is that you can push updates to it at will. This is something you lose with paperbacks. As a result greater amount of finesse is required.</p>
<p>I feel this conscious effort towards a paperback contributed to the book in a nice way. It's not the perfect book and I am absolutely certain it's not everyone's cup of coffee. All I can hope is that someone finds it valuable and worth paying for.</p>
<p>The 2.0 version of the book is now available through <a href="http://www.amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X/">Amazon</a></p>
<p>I want to thank you, my readers, for providing an ample amount of feedback. It is one of those things that keeps me going. As a result, all of us learn in the process. I hope we can continue this fruitful collaboration for a long while.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0-0" id="book-improvements-2-0-0"></a><span class="text">Book Improvements - <code>2.0.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0-0">#</a></h2>
<p>In total 45 commits went to book since the last release candidate. A lot of the changes made were cosmetic (formatting related). You can find the important changes below.</p>
<p>See GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.0.0-rc4...v2.0.0">all changes</a>. Especially the "Files changed" tab is highly useful.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>Put emphasis on the fact that there's a community in case you are struggling with something. No need to struggle alone.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Added a tip about <a href="https://github.com/dominictarr/hyperscript">HyperScript</a> and <a href="https://www.npmjs.com/package/hyperscript-helpers">hyperscript-helpers</a>.</li>
<li>Mentioned <a href="https://developit.github.io/preact/">preact</a> and <a href="https://github.com/Lucifier129/react-lite">react-lite</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Dropped duplicate tip related to <code>import</code>. This was covered in the previous chapter already.</li>
<li>Explained React <code>state</code> in far greater detail. This was treated too lightly earlier.</li>
<li>Explained how/why component hierarchy is improved.</li>
<li>Explained React <code>props</code> in greater detail.</li>
<li>Pushed input trimming logic to higher level. If you try to empty a field, it will simply cancel editing now and revert back to the original value.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Made <code>Editable</code> example diff based. It feels a bit easier to follow this way.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Linked better to the testing chapter.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Mentioned about <code>[contenthash]</code> placeholder. Unfortunately it doesn't work as well as you might expect yet. See <a href="https://github.com/webpack/webpack/issues/672">Webpack issue #672</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Mentioned how to enable sourcemaps for CSS. You need to set Webpack's <code>output.publicPath</code> for this to work.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#structuring-react-projects" id="structuring-react-projects"></a><span class="text">Structuring React Projects</span><a class="header-anchor-select" href="https://survivejs.com/#structuring-react-projects">#</a></h3>
<ul>
<li>Mentioned <a href="https://github.com/gajus/create-index">gajus/create-index</a> as it can help a lot with the suggested structures.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>You could say the past month or two have been pretty tough mentally. Dark winter and cold didn't entirely help. I've been picking up my exercise habits, though, so it's looking a little better now. That said, a break of day or two might be in order in the near future.</p>
<p>I still have improvements planned. I've listed these based on priority:</p>
<ul>
<li>Improve site outlook. Basically I'll redo the landing page of the site and do a few UX tweaks here and there. I have a nice plan, just need to focus on this for a full day to get it done.</li>
<li>Write <strong>async</strong> appendix. This would show how to deal with asynchronous concerns through Alt. It's a common problem and worth covering.</li>
<li>Develop <a href="http://redux.js.org/">Redux</a> and <a href="https://facebook.github.io/immutable-js/">Immutable.js</a> based version of the Kanban.</li>
<li>Port book content to Redux. I still have to decide whether or not to introduce Immutable.js there as well. It would be a good fit, but I haven't made up my mind yet.</li>
</ul>
<p>I know there are more topics that would be nice to cover. Based on what I've seen and heard, focusing on Redux would be a nice next step. But if you have other ideas, please let me know.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#expanding-business" id="expanding-business"></a><span class="text">Expanding Business</span><a class="header-anchor-select" href="https://survivejs.com/#expanding-business">#</a></h2>
<p>In order to keep the effort sustainable I've been forced to think about financials. Currently the primary problem is that I am relying on single sales. Even if you found my work valuable, I'm sure you wouldn't want to buy the same book many times. I wouldn't for sure.</p>
<p>As a result I've been thinking about an alternative model that would support the current setup. I would love to build an "inner circle" of supporters. You would gain access to a private Slack at least and gain early access to new content. You would literally help me guide the effort. You would get all this against a monthly fee (say $20) and you could opt-out any time you want.</p>
<p>If you want to participate in a supporter scheme like this, <a href="http://eepurl.com/bQAeuH">sign up to the supporter mailing list</a>. Signing up doesn't bind you to anything. This is more of an experiment to see if there are people interested. Provided there are enough, it will make sense to go ahead with the scheme and build a real business around this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thank you for being a part of this project. I would have given up ages ago if it wasn't for the community. I hope you enjoy this milestone release!</p>
<p>Remember that you can find up to date code from <a href="https://github.com/survivejs/webpack_react">the book repository</a>. The stable version of the book is available at the <code>master</code> branch.</p>
<p>You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. It's good for me to know where you struggle so I can tweak the book.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a> or <a href="https://www.createspace.com/6052981">CreateSpace</a> (paper version). Every little bit counts and allows me to keep it up.</p>
SurviveJS - Webpack and React - v2.0.0-rc4asurvivejswebpackandreactv200rc42016-02-07t00:00:00z2016-02-07T00:00:00Z<p><a href="https://survivejs.com/blog/survivejs200-rc3">The previous release candidate</a> prompted a nice amount of feedback. I've taken that into account in this release. I have a date for the final in sight and I won't be making any significant changes for the final release.</p>
<p>It's not going to be the perfect book in any way, but it's absolutely far better book than I could have pulled off on my own. Given this is my first effort, it has been a great learning experience. And it continues to be so.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I split my efforts during the past two weeks towards a couple of separate goals. My primary goal was to smooth out remaining bigger issues. <a href="https://gitter.im/survivejs/webpack_react">The book chat</a> helped a lot in this regard. I also enjoy discussing with my readers through mail. It's great to get multiple perspectives on the content.</p>
<p>My secondary goals included getting some coding done and preparing for a little presentation I have promised to give. I don't normally get invited to talk so I like to get the most out of these special occasions.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#work-on-react-components" id="work-on-react-components"></a><span class="text">Work on React Components</span><a class="header-anchor-select" href="https://survivejs.com/#work-on-react-components">#</a></h3>
<p>Since you need to be able to practice what you preach, I did a little API design experiment in form of <a href="https://bebraw.github.io/react-pagify/">react-pagify</a>. It is a paginator component for React. I know it sounds like a trivial one, but the goal here was to end up with something flexible while providing a minimal API surface. This was achieved partially through utilizing <a href="https://facebook.github.io/react/docs/context.html">React context</a>.</p>
<p>I've been considering using a similar design for <a href="http://reactabular.js.org/">reactabular</a>, a data table component of mine. This was a good chance to experiment with the ideas in smaller scale. I think the design will fit <em>reactabular</em> well and allow me to improve its API further without sacrificing any functionality.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#preparing-for-february-meetup" id="preparing-for-february-meetup"></a><span class="text">Preparing for February Meetup</span><a class="header-anchor-select" href="https://survivejs.com/#preparing-for-february-meetup">#</a></h3>
<p>Beyond component development I put thought towards a presentation I have to give at <a href="http://www.meetup.com/frontendfinland/events/228369937/">February Meetup of Frontend Finland</a>. Given I rather write than talk, this gave me a good excuse to write an opinion piece. I believe there's room for <a href="https://survivejs.com/blog/towards-common-components">a common component definition</a>. Something like this would allow us to make the ecosystem stronger and more vibrant.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#improving-kanban" id="improving-kanban"></a><span class="text">Improving Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#improving-kanban">#</a></h3>
<p>The Kanban implementation has improved a notch. It won't allow you to drag an input that's being edited anymore. I also found <a href="https://stackoverflow.com/questions/33108567/webpack-hash-the-same-for-css-and-js-files-both-change-when-only-one-should">a book related question</a> at Stack Overflow. The problem had to do with hashing and cache invalidation.</p>
<p>If CSS was altered in the current, it also changed the hash of JavaScript. This is definitely something you don't want to happen. It took a while to understand what's going on, but then it hit me. Given we were using <code>require</code> to bring the CSS to JavaScript, this made it end up in the same chunk. And that's the core of the issue here.</p>
<p>I realized the only good way to resolve this issue was to separate the CSS into a chunk of its own. This change has been implemented in the book now. The Kanban CSS gets loaded through an <em>entry chunk</em> of its own. The only gotcha with this approach is that it will generate a redundant JavaScript. It's annoying but something you can live with. To keep track of the problem, I <a href="https://github.com/webpack/webpack/issues/1967">opened an issue</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introducing-npm-install-webpack-plugin-" id="introducing-npm-install-webpack-plugin-"></a><span class="text">Introducing <em>npm-install-webpack-plugin</em></span><a class="header-anchor-select" href="https://survivejs.com/#introducing-npm-install-webpack-plugin-">#</a></h3>
<p>One of my personal annoyances with the book has been all those <code>npm install</code> parts. Often they just break the flow as you have to jump into terminal and do some work there. Fortunately there's a good solution for this problem now.</p>
<p><a href="https://github.com/ericclemmons/npm-install-webpack-plugin">npm-install-webpack-plugin</a> by Eric Clemmons is able to detect when you <code>require</code> something in your project and install the dependency in question. It's not completely perfect yet as it doesn't allow us to choose between <code>--save</code> and <code>--save-dev</code> easily based on context yet. I've discussed about this with Eric and it's likely a feature that will be developed in the near future. I wrote a little proof of concept and it worked somewhat nicely.</p>
<p>It's always fun to discover small gems like this plugin. You can still install all your dependencies by hand of course, but at least now there's a good option that can save some trouble.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0-0-rc4" id="book-improvements-2-0-0-rc4"></a><span class="text">Book Improvements - <code>2.0.0-rc4</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0-0-rc4">#</a></h2>
<p>In total 68 commits went to <code>2.0.0-rc4</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>See GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.0.0-rc3...v2.0.0-rc4">all changes</a>. Especially the "Files changed" tab is highly useful.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>Clarified the book repository structure and mentioned the repository defaults to <code>dev</code>. That's not likely the branch you want to see so there's an image showing how to find the one you are after.</li>
<li>Linked to <a href="https://github.com/survivejs/ama/issues">SurviveJS AmA</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Added an example of output you might get when running Webpack the first time.</li>
<li>Moved to use object format for <code>entry</code>. This leads to less hassle later on when dealing with styling and hashing so this felt like a good move.</li>
<li>Dropped redundant <code>HtmlWebpackPlugin</code> mention.</li>
<li>Explained <code>0.0.0.0</code> idea earlier on so you might actually find it in case you are using a virtual machine.</li>
<li>Explained <code>eval</code> options in greater detail. Now it's clearer that options starting with <code>eval-</code> emit sourcemaps as a part of JavaScript code. Better performance, but obviously this is a bad idea for production usage as it bloats the bundle.</li>
<li>Integrated <em>npm-install-webpack-plugin</em> so that plenty of those <code>npm install</code> bits could be dropped.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Put emphasis on the fact why <code>include</code> is used at the loader definition. I strongly recommend using it just for the sake of improved performance. This also documents how you expect Webpack to parse your project.</li>
<li>Added a tip showing how to use brace expansion with npm. Example: <code>npm i babel-preset-{es2015,react} -D</code>.</li>
<li>Added <a href="https://www.npmjs.com/package/babel-plugin-array-includes">babel-plugin-array-includes</a> to SurviveJS preset. Given <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">array.includes</a> is a part of the standard now, this felt like a good chance to begin using it over <code>indexOf</code> in certain places.</li>
<li>Mentioned alternatives to shimming <code>Object.assign</code> through Babel.</li>
<li>Explained how to develop your own Babel presets.</li>
<li>Mentioned that React developer tools won't work if you are using Webpack in the iframe mode.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/babel-plugin-react-require">babel-plugin-react-require</a> as an alternative to including <code>React</code> for function based components.</li>
<li>Improved flow around the part where HMR is set up with React. Now the content is discussed in a more approachable order.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Simplified <strong>Generating Ids</strong> section. It's the same content, but in simpler form.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/autobind-decorator">autobind-decorator</a>. That's an interesting looking alternative at least.</li>
<li>Explained the <code>ref</code> idea in greater detail.</li>
<li>Explained how <code>Note</code> state changes are communicated in greater detail.</li>
<li>Discussed the problem of <code>state</code>. This is something you need to think a lot in the context of React.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Explained <code>Object.assign</code>. Given it's not that common yet, it felt like a good idea to explain why and how it is used here.</li>
<li>Simplified code examples so that they are easier to copy from Markdown. That's how I like to read the book by the way.</li>
<li>Used <code>includes</code> over <code>indexOf</code> where it made sense.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Dropped <code>constructor</code> from <code>Lane</code>. Even though binding the lane id to methods worked this way, it's often an anti-pattern to map a prop this way. This is true particularly if the value of a prop can change. It binds through property initializers now.</li>
<li>Added <code>stopPropagation</code> to <code>deleteNote</code> to avoid issues with hovering.</li>
<li>Mentioned that <code>Editable</code> uses <strong>uncontrolled</strong> design and discussed <strong>controlled</strong> alternative.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Simplified logic by introducing <code>includes</code> to code.</li>
<li>Fixed editing behavior during dragging. This means an additional check needed to add to <code>Note</code> so that we know to enable/disable dragging based on editing state. This is a good example of the importance of state management.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Simplified <code>DefinePlugin</code> declaration to form <code>'process.env.NODE_ENV': '"production"'</code>. <code>JSON.stringify</code> felt a little too verbose and it didn't communicate the idea as well.</li>
<li>Added a checklist of <code>dependencies</code> you should see before starting to split your bundles.</li>
<li>Renamed <code>Clean</code> to <code>CleanPlugin</code> in the sake of consistency. Other plugins have <code>Plugin</code> suffix so this one should have one too.</li>
<li>Dropped the mention of <code>autoprefixer-loader</code> given it has been deprecated. Use <code>postcss-loader</code> instead.</li>
<li>Explained how to improve caching behavior by loading CSS through an entry chunk. This won't work for each and every case, but it felt like a decent solution here as it fixes hashing. That was the main goal here after all.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Moved from <em>phantomjs</em> to <em>phantomjs-prebuilt</em> as the package was renamed.</li>
<li>Mentioned <a href="https://jsverify.github.io/">JSVerify</a>, a property testing tool.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/invariant">invariant</a> package.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-decorators" id="understanding-decorators"></a><span class="text">Understanding Decorators</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-decorators">#</a></h3>
<ul>
<li>Explained how to enable decorators in Babel 6.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#troubleshooting" id="troubleshooting"></a><span class="text">Troubleshooting</span><a class="header-anchor-select" href="https://survivejs.com/#troubleshooting">#</a></h3>
<ul>
<li>Explained how to deal with <em>Warning: setState(...)</em>.</li>
<li>Explained how to deal with <em>Warning: React attempted to reuse markup</em>.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Content-wise I'm done. I am still willing to do minor tweaks based on your feedback, but major work has to wait for the next releases. I can't wait to get back to a normal release cycle.</p>
<p>I will have to proof the content. In other words, I will have to go through it very carefully a couple of times and try to catch any remaining issues. No doubt some will remain, but that's how books work. I will also have to craft a cover for the paper version and figure out what to put on the backside and spine. If nothing else, at least I'll get something to put on my bookshelf out of this!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>If you are working through the book, remember that you can find up to date code from <a href="https://github.com/survivejs/webpack_react">the book repository</a>. Remember that you can find the stable version at the <code>master</code> branch or you can look up a specific tag.</p>
<p>You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. It's good for me to know where you struggle so I can tweak the book.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
Towards a Common Component Definitionatowardsacommoncomponentdefinition2016-02-02t00:00:00z2016-02-02T00:00:00Z<p>There has been talk of JavaScript fatigue. It's true the field is progressing fast. And as you move fast, it can be tiring for sure. Fortunately, as we understand better what we are doing, we can actually standardize our ways of doing. That should take away some of the pain.</p>
<p>Eventually development made in frameworks and libraries tends to flow back to the web platform itself. I believe one of the key advances will be a movement towards common component definitions.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#solving-javascript-in-html-or-html-in-javascript-" id="solving-javascript-in-html-or-html-in-javascript-"></a><span class="text">Solving <strong>JavaScript in HTML</strong> or <strong>HTML in JavaScript</strong></span><a class="header-anchor-select" href="https://survivejs.com/#solving-javascript-in-html-or-html-in-javascript-">#</a></h2>
<p>There are two main ways to approach components in the web. You can either try to solve <strong>JavaScript in HTML</strong> or <strong>HTML in JavaScript</strong>. This doesn't mean there won't be any JavaScript. It's more about how it's being treated. In the former approach you leave structural aspects to HTML side of the fence while in the latter you push them to JavaScript.</p>
<p><em>JavaScript in HTML</em> relies on templating. There's standardization for the approach in form of <a href="http://webcomponents.org/">Web Components</a> (example: <code><x-gif src="probably_cats.gif"></x-gif></code>). Frameworks, such as <a href="https://angularjs.org/">Angular</a> or <a href="http://emberjs.com/">Ember</a>, implement a templating solution of their own. Both have made moves that will allow you to consume Web Components from both frameworks, though.</p>
<p>Libraries like <a href="https://facebook.github.io/react/">React</a>, <a href="https://github.com/anthonyshort/deku">Deku</a>, and <a href="http://cycle.js.org/">Cycle</a>, fall to the <em>HTML in JavaScript</em> category. Here we can use a format, such as <a href="https://github.com/dominictarr/hyperscript">hyperscript</a> (plain JavaScript) or <a href="https://facebook.github.io/jsx/">JSX</a> (XMLish syntax compiled to JavaScript). In this approach you will perform possible templating operations (for example if, looping) using JavaScript itself.</p>
<p>It is possible to <a href="https://facebook.github.io/react/docs/webcomponents.html">use the approaches together in React</a>. At the moment the match isn't ideal as the programming models differ and that causes friction. React documentation suggests that you wrap your Web Components within React components of their own. That is the same approach you would use with a library such as jQuery. In short, you can use Web Components with a library like React, but it might not be very fun yet.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-challenge-for-component-authors" id="the-challenge-for-component-authors"></a><span class="text">The Challenge for Component Authors</span><a class="header-anchor-select" href="https://survivejs.com/#the-challenge-for-component-authors">#</a></h2>
<p>During the past few years it has become apparent component oriented approach fits the web and web applications well. We're still paying a price from the fact that the web is a content oriented platform by design. That said, developing full blown web applications is far easier these days than it was ten years ago. There are still plenty of issues to resolve, though.</p>
<p>Even though <a href="https://www.npmjs.com/">npm</a> makes it almost ridiculously easy to share your components, we aren't quite there yet. It might be easy to consume JavaScript through it, but aspects like styling are still partially unresolved. As a result we have CSS conventions, processors, and a lot of many other solutions like <a href="https://github.com/css-modules/css-modules">CSS Modules</a>.</p>
<p>It is quite telling that <a href="https://getbootstrap.com/">Bootstrap</a>, a popular HTML, CSS, and JavaScript framework, has its own implementations for <a href="https://angular-ui.github.io/bootstrap/">Angular</a>, <a href="https://kaliber5.github.io/ember-bootstrap/">Ember</a>, and <a href="https://react-bootstrap.github.io/">React</a>. Even though I appreciate the efforts of the people behind the projects, surely we must be able to resolve these kind of things better. Perhaps that's something Web Components could provide us?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#sharing-components-at-the-html-in-javascript-domain" id="sharing-components-at-the-html-in-javascript-domain"></a><span class="text">Sharing Components at the <strong>HTML in JavaScript</strong> Domain</span><a class="header-anchor-select" href="https://survivejs.com/#sharing-components-at-the-html-in-javascript-domain">#</a></h2>
<p>Although Web Components might be the longer term solution, there could be something that could be achieved for <strong>HTML in JavaScript</strong> type libraries like React, Deku, or Cycle. After all, even a small win is a win. And anything we can do to battle unnecessary fragmentation is good in my eyes.</p>
<p>Currently any component I develop for React is useful only within React context. I find this a little problematic as I would love to share my work with a larger amount of people. I am sure this applies to other component authors too, and this would benefit the JavaScript community on the whole.</p>
<p><a href="https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html">React 0.14</a> introduced a feature known as stateless functional components. To give you an example, consider the one from their release notes (slightly modified for readability):</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// A functional component using an ES2015 (ES6) arrow function:</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Aquarium</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-const" >const</span> fish <span class="token operator" >=</span> <span class="token function" >getFish</span><span class="token punctuation brackets-parentheses" >(</span>props<span class="token punctuation" >.</span>species<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-return" >return</span> <span class="token operator" ><</span>Tank<span class="token operator" >></span><span class="token punctuation brackets-braces" >{</span>fish<span class="token punctuation brackets-braces" >}</span><span class="token operator" ><</span><span class="token operator" >/</span>Tank<span class="token operator" >></span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Or with destructuring and an implicit return, simply:</span>
<span class="token keyword keyword-const" >const</span> <span class="token function-variable function" >Aquarium</span> <span class="token operator" >=</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>species<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token operator" ><</span>Tank<span class="token operator" >></span>
<span class="token punctuation brackets-braces" >{</span><span class="token function" >getFish</span><span class="token punctuation brackets-parentheses" >(</span>species<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-braces" >}</span>
<span class="token operator" ><</span><span class="token operator" >/</span>Tank<span class="token operator" >></span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Then use: <Aquarium species="rainbowfish" /></span>
</code></pre>
<p>If the definition looks simple, that's because it is. A function based component like this cannot do much, but they are still highly useful! The best feature is that the syntax can be seen as something React agnostic! You could compile that JSX to Hyperscript and use that as an intermediate format to mediate between libraries.</p>
<p>Components like this don't require a direct dependency on React thanks to <a href="https://www.npmjs.com/package/babel-plugin-react-require">babel-plugin-react-require</a>. The plugin injects <code>import React from 'react';</code> so that the JSX transpilation process works. It would be possible to pull this off with other libraries as well.</p>
<p>There are proposals that would allow you to write <a href="https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State">stateful functions</a>. Deku implements something like <a href="https://github.com/anthonyshort/deku/blob/master/docs/advanced/context.md">React context</a> (read-only within the tree). Adopting ideas like these would give more room for potential sharing.</p>
<p>Even though you cannot do absolutely everything with function based components, they allow you to achieve quite much! I believe adopting the core ideas would allow larger scale sharing of components between libraries. Currently solutions like Deku or Cycle feel like islands of their own compared to the continent of React. Building bridges wouldn't hurt.</p>
<blockquote>
<p>There have been interesting developments in the React world itself. Libraries, such as <a href="https://github.com/Lucifier129/react-lite">react-lite</a> and <a href="https://developit.github.io/preact/">Preact</a>, provide much lighter ways to achieve the same results as using vanilla React might.</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I think we'll begin to see adoption of Web Components this year especially as frameworks like Angular and Ember allow you to consume them. The biggest benefit of following the standards is that you shield yourself from some of the churn. And of course you avoid vendor lock-in!</p>
<p>I hope we see a similar movement within the React world. That would benefit the community as a whole and give more freedom for component authors. Even though having more standard ways of defining basic components would benefit libraries other than React initially, I believe this development could flow back to the React ecosystem as well.</p>
Unexpected - The Extensible BDD Assertion Toolkit - Interview with Sune Simonsenaunexpectedtheextensiblebddassertiontoolkitinterviewwithsunesimonsen2016-01-30t00:00:00z2016-01-30T00:00:00Z<p>When it comes to testing, often you assert certain truths. At the very least you might have simple <a href="https://nodejs.org/api/assert.html">asserts</a> sprinkled in your code. Or you might push them to separate suites which you then execute using a test runner.</p>
<p><a href="http://unexpected.js.org/">Unexpected</a> by <a href="https://twitter.com/sunesimonsen">Sune Simonsen</a> takes this simple idea into a little different direction. Read on to learn more.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h3>
<p>
<span class="author">
<img src="http://we-knowhow.dk/interview/sune-simonsen.png" alt="Sune Simonsen" class="author" width="100" height="100" />
</span>
I don't consider my personal life that exciting - or at least it is pretty far from your regular JavaScript hacker trying to start the next unicorn business from a dorm room. I am a family man with two small girls and a wife. We live a pretty regular and happy life in Copenhagen.
</p>
<p>I started my career as an enterprise Java consultant, after doing that for five years I saw the industry starting to take a turn towards the front-end being the orchestrating part in most applications. So I decided to change my career and focused on the front-end - that was one of the best decisions I have ever made.</p>
<p>Soon after this change, I started working at One.com. A great thing about working there was that it had a small team consisting of very talented people in charge of building most of their web applications. It was quite a large scale, and we had a lot of technical freedom, so I learned a lot from working there.</p>
<p>Little more than a year ago I switched jobs to Zendesk where I'm currently building React applications backed by GraphQL. So far my journey with Zendesk has been incredible, it is a great company with so many fantastic people. Zendesk is moving fast, so it is also a lot of fun to be a passenger on this bullet train.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-unexpected-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-unexpected-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>Unexpected</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-unexpected-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>Unexpected</em> is an assertion library like <a href="http://chaijs.com/">Chai</a> or <a href="https://github.com/Automattic/expect.js">expect.js</a>. It can be used with any test runner that catches exceptions, but I would recommend <a href="http://mochajs.org/">Mocha</a>, <a href="https://facebook.github.io/jest/">Jest</a> or <a href="https://jasmine.github.io/">Jasmine</a> as Unexpected is integration tested with these runners on every release.</p>
<p>Below you can see an example of a test written with <em>Mocha</em> and <em>Unexpected</em> where we assert that the <code>indexOf</code> method on arrays returns <code>-1</code>, when it can't find the given element.</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> expect <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'unexpected'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >describe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'Array'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >describe</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'indexOf'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'should return -1 when the given item is not present'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >0</span><span class="token punctuation" >,</span> <span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >.</span><span class="token function" >indexOf</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >4</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span> <span class="token string" >'to equal'</span><span class="token punctuation" >,</span> <span class="token operator" >-</span><span class="token number" >1</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-unexpected-" id="why-did-you-develop-unexpected-"></a><span class="text">Why did you develop <em>Unexpected</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-unexpected-">#</a></h2>
<p>When I came to One.com, there were no tests for the front-end, so I started introducing a test setup. We were using <a href="https://github.com/Automattic/expect.js">expect.js</a> as our assertion library and were happy with it. One of my colleagues started using <em>expect.js</em> for some randomized tests, and it happened to be very slow.</p>
<p>I investigated the performance issue and found that every <code>expect</code> would create 84 <code>Assertion</code> instances. In an attempt to impress my colleague, I hacked together the first version of <em>Unexpected</em> that was just a function backed by a hash table of assertions.</p>
<p>That version was as capable as <em>expect.js</em>, but a lot faster. The idea that made this possible was to use strings as assertions, instead of the method chains that <em>expect.js</em> uses. The following code snippet contrast the syntax of <em>expect.js</em> with <em>Unexpected</em>.</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// expect.js</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >42</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span>to<span class="token punctuation" >.</span>be<span class="token punctuation" >.</span><span class="token function" >within</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >0</span><span class="token punctuation" >,</span> <span class="token number" >Infinity</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Unexpected</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token number" >42</span><span class="token punctuation" >,</span> <span class="token string" >'to be within'</span><span class="token punctuation" >,</span> <span class="token number" >0</span><span class="token punctuation" >,</span> <span class="token number" >Infinity</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>My team embraced the project and started using it for all JavaScript testing. That meant the library was improved based on real use cases as they appeared. Unexpected owes a lot to my former colleague at One.com, especially <a href="https://github.com/papandreou">Andreas Lind</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-unexpected-work-" id="how-does-unexpected-work-"></a><span class="text">How does <em>Unexpected</em> work?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-unexpected-work-">#</a></h2>
<p>After almost four years of development <em>Unexpected</em>'s implementation looks very different from the initial solution, we introduced custom assertions, a plugin API, an extremely flexible dynamic type system that allow you to namespace assertions by type, asynchronous assertions, colored output and error diffing in a way you have never seen before.</p>
<p>We still have an assertion lookup table, but as you can reuse the same assertion for several types, the lookup table maps to a list of assertions ordered by precedence. We look up the assertion string, find the first assertion that has a matching type signature and execute it. Below you can see an example of the same assertion string on two different types:</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// Expect that a string contains two sub-strings</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'Hello beautiful world!'</span><span class="token punctuation" >,</span> <span class="token string" >'to contain'</span><span class="token punctuation" >,</span> <span class="token string" >'Hello'</span><span class="token punctuation" >,</span> <span class="token string" >'world'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token comment" spellcheck="true" >// Expect that an array contains two items</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >0</span><span class="token punctuation" >,</span> <span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token string" >'to contain'</span><span class="token punctuation" >,</span> <span class="token number" >0</span><span class="token punctuation" >,</span> <span class="token number" >2</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>When you run the above code snippet, two different assertions will be called as the types differ.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#built-with-extensibility-in-mind" id="built-with-extensibility-in-mind"></a><span class="text">Built with Extensibility in Mind</span><a class="header-anchor-select" href="https://survivejs.com/#built-with-extensibility-in-mind">#</a></h3>
<p><em>Unexpected</em> is build with extensibility in mind from the ground up. All of the built-in assertions and types are installed as plugins. All assertions are defined by delegating to others except for one. I find this to be a very elegant solution.</p>
<p>As an example, the assertion <code>to be true</code> is defined the following way:</p>
<pre><code class="lang-javascript">expect<span class="token punctuation" >.</span><span class="token function" >addAssertion</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'<boolean> [not] to be true'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-parentheses" >(</span>expect<span class="token punctuation" >,</span> subject<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>subject<span class="token punctuation" >,</span> <span class="token string" >'[not] to be'</span><span class="token punctuation" >,</span> <span class="token boolean" >true</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#output-through-magicpen" id="output-through-magicpen"></a><span class="text">Output Through MagicPen</span><a class="header-anchor-select" href="https://survivejs.com/#output-through-magicpen">#</a></h3>
<p>Another implementation detail that might be interesting is that all output generated by <em>Unexpected</em> is created with a library that I wrote called <a href="https://github.com/sunesimonsen/magicpen">MagicPen</a>. The cool thing about <em>MagicPen</em> is that you append to a buffer, which has a very flexible API. It allows us to create very complex output quickly.</p>
<p>Because we append the output to a buffer in a high-level format, we can serialize the output to both plain text, ANSI colored text, and HTML.</p>
<p>Below you can see some output from an <em>Unexpected</em> error message generated by <em>MagicPen</em>:</p>
<p><figure><img src="/5415b1295875b657a22d6a1c2e78d247.png" alt="MagicPen output" class="" width="" height="" /><figcaption>MagicPen output</figcaption></figure></p>
<p>A lot of the output we generated with <em>Unexpected</em> would just be too hard without <em>MagicPen</em> in my opinion.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-does-unexpected-differ-from-other-solutions-" id="how-does-unexpected-differ-from-other-solutions-"></a><span class="text">How does <em>Unexpected</em> differ from other solutions?</span><a class="header-anchor-select" href="https://survivejs.com/#how-does-unexpected-differ-from-other-solutions-">#</a></h2>
<p><em>Unexpected</em> differ from other assertion libraries in a very obvious way by using a different syntax than all other assertion libraries I have seen. Using assertion strings was a coincidence that turned out to be fantastic.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#strings-instead-of-method-chaining" id="strings-instead-of-method-chaining"></a><span class="text">Strings Instead of Method Chaining</span><a class="header-anchor-select" href="https://survivejs.com/#strings-instead-of-method-chaining">#</a></h3>
<p>A lot of people get turned off by the different approach, but I think that it mainly comes down to familiarity. There are a lot of advantages of using strings instead of method chaining. We can display a helpful error message when you mistype something:</p>
<p><figure><img src="/d61f773548c67e4883eee30b52a6b7ef.png" alt="Unknown assertion" class="" width="" height="" /><figcaption>Unknown assertion</figcaption></figure></p>
<p>We can use assertion strings when adding new assertions:</p>
<pre><code class="lang-javascript">expect<span class="token punctuation" >.</span><span class="token function" >addAssertion</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'<array> [not] to be sorted'</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-parentheses" >(</span>expect<span class="token punctuation" >,</span> subject<span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-braces" >{</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>subject<span class="token punctuation" >,</span> <span class="token string" >'[not] to equal'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-square" >[</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >.</span><span class="token function" >concat</span><span class="token punctuation brackets-parentheses" >(</span>subject<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >sort</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>Because we know your assertion we can generate a nice default error message for an assertion like this:</p>
<pre><code class="lang-javascript"><span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token number" >2</span><span class="token punctuation" >,</span> <span class="token number" >1</span><span class="token punctuation" >,</span> <span class="token number" >3</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token string" >'to be sorted'</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>And here's the resulting message:</p>
<p><figure><img src="/61a9498e8702e2264894d097ebeb737f.png" alt="Default error message" class="" width="" height="" /><figcaption>Default error message</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#faster-assertions-and-colored-output" id="faster-assertions-and-colored-output"></a><span class="text">Faster Assertions and Colored Output</span><a class="header-anchor-select" href="https://survivejs.com/#faster-assertions-and-colored-output">#</a></h3>
<p><em>Unexpected</em> allows faster assertion lookup than a chained API due to its approach. Another thing that sets us apart from the rest of the assertions libraries is that we offer very specific colored output. Below you can see the output when comparing two buffers:</p>
<p><figure><img src="/7f67c660499c8312c5cabead3b18157f.png" alt="Buffer comparison" class="" width="" height="" /><figcaption>Buffer comparison</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#plugin-api" id="plugin-api"></a><span class="text">Plugin API</span><a class="header-anchor-select" href="https://survivejs.com/#plugin-api">#</a></h3>
<p>We offer a much more powerful plugin API than other assertion libraries, that enables plugin authors to create support for new types and tools that we never planned.</p>
<p>An example of that is the excellent <a href="http://bruderstein.github.io/unexpected-react/">unexpected-react</a> plugin from <a href="https://twitter.com/bruderstein">Dave Brotherstone</a> that enables you to test React components in a declarative way and gives you very detailed errors when things fail.</p>
<p>Below you can see an error message from <code>unexpected-react</code>:</p>
<p><figure><img src="/aa456fda8979098e37b43cda37a5247b.png" alt="Unexpected with React" class="" width="" height="" /><figcaption>Unexpected with React</figcaption></figure></p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#asynchronous-assertions" id="asynchronous-assertions"></a><span class="text">Asynchronous Assertions</span><a class="header-anchor-select" href="https://survivejs.com/#asynchronous-assertions">#</a></h3>
<p>Finally <em>Unexpected</em> has first class support for asynchronous assertions. You can even combine multiple asynchronous assertions.</p>
<p>Below is an example showing a test that combines multiple asynchronous assertions. The test asserts that a Node.js readable stream outputs an image that's at most 10% different from a reference image and have the format <code>png</code>:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-const" >const</span> fs <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'fs'</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token keyword keyword-const" >const</span> expect <span class="token operator" >=</span> <span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'unexpected'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >clone</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'unexpected-stream'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'unexpected-image'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation" >.</span><span class="token function" >use</span><span class="token punctuation brackets-parentheses" >(</span><span class="token function" >require</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'unexpected-resemble'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'should spew out the expected image'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token operator" >=></span> <span class="token punctuation brackets-parentheses" >(</span>
<span class="token function" >expect</span><span class="token punctuation brackets-parentheses" >(</span>
fs<span class="token punctuation" >.</span><span class="token function" >createReadStream</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'foo.png'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >,</span>
<span class="token string" >'to yield output satisfying'</span><span class="token punctuation" >,</span>
expect<span class="token punctuation" >.</span><span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'to resemble'</span><span class="token punctuation" >,</span> <span class="token string" >'bar.png'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
mismatchPercentage<span class="token punctuation" >:</span> expect<span class="token punctuation" >.</span><span class="token function" >it</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'to be less than'</span><span class="token punctuation" >,</span> <span class="token number" >10</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >and</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'to have metadata satisfying'</span><span class="token punctuation" >,</span> <span class="token punctuation brackets-braces" >{</span>
format<span class="token punctuation" >:</span> <span class="token string" >'PNG'</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span>
<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation brackets-parentheses" >)</span>
</code></pre>
<p>The cool thing is that you can choose how advanced you want to go, <em>Unexpected</em> won't stop you.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>That is a splendid question. I feel like we have most of the features I would like by now, in my opinion, the energy should be put into improving the plugins. A lot of the contributors are meeting in Copenhagen in February to discuss how we continue to progress the library - so it going to be interesting what comes out of that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-unexpected-and-web-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-unexpected-and-web-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for <em>Unexpected</em> and web development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-unexpected-and-web-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I don't consider <em>Unexpected</em> to be especially aimed at web development but see it more as a general purpose assertion library that can be used to test any JavaScript code base.</p>
<p>Where I see <em>Unexpected</em> shine, is that it can be adapted to any code base by creating new plugins. You see a lot of assertion libraries tailored to testing JSX components, but then you need a new library when the trend changes.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#optional-typing-is-getting-traction" id="optional-typing-is-getting-traction"></a><span class="text">Optional Typing is Getting Traction</span><a class="header-anchor-select" href="https://survivejs.com/#optional-typing-is-getting-traction">#</a></h3>
<p>I currently following the optional typing trend like <a href="https://flowtype.org/">Flow</a> and <a href="https://www.typescriptlang.org/">TypeScript</a> with a bit of skepticism - but it seems to be getting a lot of traction. I think this movement will be a stepping stone towards stricter languages like <a href="https://facebook.github.io/reason/">Reason</a>, <a href="http://elm-lang.org/">Elm</a> or even <a href="http://www.purescript.org/">PureScript</a> as people realize the trade-offs these halfway safe type systems provides.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#still-work-to-do" id="still-work-to-do"></a><span class="text">Still Work to Do</span><a class="header-anchor-select" href="https://survivejs.com/#still-work-to-do">#</a></h3>
<p>I have a strong feeling that we haven't arrived at the perfect development tool-chain yet - React and friends have solved a lot of problems that was a huge struggle in the past. But this new world where people remix their platform with crazy metaprogramming achieved trough transpiling has to stop at some point.</p>
<p>My guess is that we will see something like <a href="https://facebook.github.io/reason/">Reason</a> being able to eliminate dead code in a much better way than any dynamic language and therefore provide much better download sizes. That might be the tipping point that will make the masses switch.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-" id="what-advice-would-you-give-to-programmers-getting-into-web-development-"></a><span class="text">What advice would you give to programmers getting into web development?</span><a class="header-anchor-select" href="https://survivejs.com/#what-advice-would-you-give-to-programmers-getting-into-web-development-">#</a></h2>
<p>Use your brain to evaluate new things you bring into your stack, don't just follow the hype blindly. You don't have to switch your approach to how you handle CSS every week just because your Twitter stream indicate that is the way it should be done.</p>
<p>When you create a side-project, decide upfront if you want to learn something new or want the project to succeed - you can't have both.</p>
<p>Use a queue instead of a stack in your brain to handle incoming side-projects - that is how you get something done. This advice was stolen from <a href="https://github.com/papandreou">Andreas Lind</a>, but it is the best advice I ever received.</p>
<p>When you run into problems with a library, make it a habit of contributing. You will realize that you can get fixes approved for most projects.</p>
<p>Surround yourself with people that are better than yourself. If you think you better then your co-workers, it is time to leave.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://github.com/papandreou">Andreas Lind</a> or <a href="https://github.com/mafintosh">Mathias Buus</a> they are both wizard level Danish JavaScript hackers.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#any-last-remarks-" id="any-last-remarks-"></a><span class="text">Any last remarks?</span><a class="header-anchor-select" href="https://survivejs.com/#any-last-remarks-">#</a></h2>
<p>Stay happy; it is only bits.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Sune! I think it's particularly impressive that you ended up with a nice, fluent plugin API. I'm a great fan of plugin based systems myself and even though they require some upfront investment and design, they are often worth it if you value flexibility. Particularly the quality of output seems to set Unexpected apart.</p>
<p>To learn more, check out the <a href="http://unexpected.js.org/">site of Unexpected</a>. You can also find <a href="https://github.com/unexpectedjs/unexpected">Unexpected</a> and <a href="https://github.com/sunesimonsen/magicpen">MagicPen</a> on GitHub.</p>
SurviveJS - Webpack and React - v2.0.0-rc3asurvivejswebpackandreactv200rc32016-01-22t00:00:00z2016-01-22T00:00:00Z<p>If the previous <a href="https://survivejs.com/blog/survivejs200-rc2">release candidate</a> had few changes, this one is the opposite. I consider this good news as it's better to catch bigger issues now rather than later. Thanks for feedback!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I managed to improve <a href="https://github.com/survivejs/redux-demo">the Redux version of Kanban</a>. Most importantly I integrated <a href="https://www.npmjs.com/package/redux-devtools">redux-devtools</a> to it. The implementation could probably use a few more tweaks, but that's not the priority right now.</p>
<p>Thanks to reader feedback, the Kanban implementation has improved in various places. The UX is a little better now and the logic is clearer in certain parts. These are small touches that are worth doing. I still need to update certain screenshots at the book to match the current status, but the technical parts are there.</p>
<p><a href="https://www.npmjs.com/package/html-webpack-plugin">html-webpack-plugin</a> reached a new major version. Unfortunately this broke compatibility with <a href="https://www.npmjs.com/package/html-webpack-template">html-webpack-template</a> temporarily. There's a compatible version of the latter available as a tagged version. The problem has been resolved in the current version.</p>
<p>It's starting to look good. I will be very happy to get this puppy out of the door. Who said writing books is easy? :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0-0-rc3" id="book-improvements-2-0-0-rc3"></a><span class="text">Book Improvements - <code>2.0.0-rc3</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0-0-rc3">#</a></h2>
<p>In total 58 commits went to <code>2.0.0-rc3</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>On general level I tidied up arrow syntax. I.e. instead of <code>(name) => ...</code> you might see <code>name => ...</code>. The latter form is less noisy so that's used where it makes sense. Feel free to use either one you prefer, though.</p>
<p>See GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.0.0-rc2...v2.0.0-rc3">all changes</a>. Especially the "Files changed" tab is highly useful.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>To make it easier to use the book, I wrote a section on how to approach it. There's no one right way and it all depends on what you know already and how you prefer to learn. You could, for instance, jump straight to the React bits and read Webpack ones after that.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Suggested the usage of <a href="https://www.vagrantup.com/">Vagrant</a> in addition to the official <a href="https://nodejs.org/en/download/package-manager/">Node.js packages</a>.</li>
<li>Defined a starter <em>index.html</em> by hand. Now <em>html-webpack-plugin</em> gets discussed later in the book. It felt like introducing it so early could be distracting. It's better to start with something people are familiar with and move from there.</li>
<li>Improved flow overall. Now it should be a little easier to follow.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Dropped the mention that <em>stage 2</em> features are included in Babel. That's not true anymore given the book uses Babel 6.</li>
<li>Corrected naming. <em>Class properties</em> -> <em>property initializers</em></li>
<li>Included <a href="https://www.npmjs.com/package/babel-plugin-transform-object-assign">babel-plugin-transform-object-assign</a> to the project preset. This allows us to use the standard <code>Object.assign</code> while keeping it legacy compatible. One less direct dependency to worry about!</li>
<li>Simplified "Rendering Through <code>index.jsx</code>" greatly. This was possible thanks to the fact that <em>html-webpack-plugin</em> is discussed later.</li>
<li>Dropped the mention of <a href="https://github.com/gaearon/react-transform-catch-errors">react-transform-catch-errors</a>. No need for that anymore given there's a Babel preset now that deals with the details.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Changed editing logic to use <code>defaultValue</code> instead of <code>placeholder</code> while setting the input caret to the end. This achieved by using a <code>ref</code> with a callback. It's a small trick that's worth knowing and covering as it gives you more control just for cases like this.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Dropped <em>object-assign</em> dependency. This isn't needed anymore given we go through Babel now. We can use just <code>Object.assign</code> directly and it will work.</li>
<li>Cleaned up the implementation of <em>storage.js</em>. Now it's all ES6.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Renamed <code>NoteStore.get</code> and <code>NoteStore.getNotesByIds</code> to make it unambiguous.</li>
<li>Annotated <code>NoteStorage.getNotesByIds</code> in detail. There's quite a bit going on so this felt like a good idea.</li>
<li>Improved UX of lanes. Now there are separate controls for editing and removing lanes. You can begin to edit a lane name by clicking anywhere on the lane header. The only exception to that rule is adding a note to it. In that case we trigger <code>stopPropagation</code> to override the default bubbling behavior.</li>
<li>Converted <code>console.log</code> to use backtick syntax where it felt like a good idea. A little easier to read.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Converted <code>console.log</code> to use backtick syntax where it felt like a good idea.</li>
<li>Removed <code>removeNote</code> and wrote the logic inline into <code>attachToLane</code>. Simpler and easier to understand.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Moved <em>html-webpack-plugin</em> bits here. Now there's a single section where I discuss the approach. Far neater!</li>
<li>Made sure <em>webpack-clean-plugin</em> isn't in verbose mode. This breaks Webpack stats so it's better to do it this way for now. The problem is that the plugin <a href="https://github.com/johnagan/clean-webpack-plugin/issues/11">uses Webpack API wrong</a> and goes through <code>console</code> instead of the logging API that Webpack provides. I'll try to get the plugin fixed in the near future.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react-" id="typing-with-react-"></a><span class="text">Typing with React*</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react-">#</a></h3>
<ul>
<li>Dropped redundant <code>onDelete</code> <code>propType</code> from <code>Note</code>. This isn't needed at all as it's enough to assert it on <code>Editable</code>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Recommended the usage of <code>"extends": "eslint:recommended",</code> at <em>.eslintrc</em>. It's a good starting point.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Changed <em>package.json</em> example to use namespacing and added some newlines. Cleaner to read and use.</li>
<li>Explained various ways to bump a version in greater detail.</li>
<li>Clarified why to preprocess your distribution files instead of including them to your version control.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#language-features" id="language-features"></a><span class="text">Language Features</span><a class="header-anchor-select" href="https://survivejs.com/#language-features">#</a></h3>
<ul>
<li>Showed how to return an object easily when using the arrow notation for functions.</li>
<li>Expanded on string interpolation.</li>
<li>Added a section on object shorthands.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>As usual, I will work based on your feedback. I have a couple of discussion points in mind I want to expand upon. And I need to get those screenshots done. The nice thing is that there aren't that many content related tasks yet! So in short, it's starting to look good.</p>
<p>After I have done the tweaks I have in mind, I'll move to the next step with my publication process to get the first paper version done. Interesting times.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>If you are working through the book, remember that you can find up to date code from <a href="https://github.com/survivejs/webpack_react">the book repository</a>. I maintain the stable version at the <code>master</code> branch. For technical reasons the repository shows you the development version, though. This is just to make it easier to contribute to the book.</p>
<p>Remember that you can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. It's good for me to know where you struggle so I can tweak the book.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
SurviveJS - Webpack and React - v2.0.0-rc2asurvivejswebpackandreactv200rc22016-01-10t00:00:00z2016-01-10T00:00:00Z<p>Not a lot has happened since the previous <a href="https://survivejs.com/blog/survivejs200-rc1">release candidate</a>. The biggest change has to do with a little bug that the recent release of Babel 6.4 revealed. All property initializer based declarations were missing a semicolon as Babel treated them in a too lax way before. This has been fixed in this release candidate.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>We're on a good track as far as I can see. It's not the perfect book, but no book is. In any case, the development will continue even after the release. To prepare for the future, I made sure <a href="https://github.com/survivejs/redux-demo">the Redux version of Kanban</a> is up to date.</p>
<p>The next bigger effort is porting the chapters to it. The implementation will most likely live still as I'll want to given <a href="https://facebook.github.io/immutable-js/">Immutable.js</a> a go. I feel discussing these two topics could be valuable to a lot of readers.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#experimenting-with-webpack" id="experimenting-with-webpack"></a><span class="text">Experimenting with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#experimenting-with-webpack">#</a></h3>
<p>I experimented with a higher level format for configuring Webpack. You can see my work in the form of <a href="https://www.npmjs.com/package/webpack-presets">webpack-presets</a>. There's a little parser that converts the JSON format into the one we all are more or less familiar with.</p>
<p>I am not the only one who is looking into this problem. Jason Quense developed a prototype known as <a href="https://github.com/jquense/webpack-config-utils">webpack-config-utils</a>. The idea is to provide a DSL that hides some problems of the current format. Most importantly it's able to give us good errors.</p>
<p>A user known as @scriptjs has led an effort to push Webpack into a Babel style monorepo. There was an early specification that has since been removed. The approach is quite close to <em>.webpackrc</em> and we've been collaborating on it.</p>
<p>Tobias Koppers, the author of Webpack, has prepared a specification known as <a href="https://github.com/webpack/concord">Concord</a>. It's yet another way to solve these issues. Especially the mimetype, loader mapping is highly interesting.</p>
<p>I hope something good comes out of these experiments and we can resolve some of the pain points of the tool. Even though it's quite nice already, there is always room for improvement.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0-0-rc2" id="book-improvements-2-0-0-rc2"></a><span class="text">Book Improvements - <code>2.0.0-rc2</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0-0-rc2">#</a></h2>
<p>In total 17 commits went to <code>2.0.0-rc2</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.0.0-rc1...v2.0.0-rc2">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Showed how to polyfill <code>Promise</code> through <code>require('es6-promise').polyfill()</code>. This is good to know if you have to run on a legacy platform.</li>
<li>Added a brief description of HMR just to get the basic point through.</li>
<li>Mentioned <code>netstat -na | grep 8080</code> as that's useful for checking whether or not the port is available.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Set up a <a href="https://github.com/survivejs/babel-preset-survivejs-kanban">custom Babel preset</a> to make the project a little lighter.</li>
<li>Explained Webpack loader declarations. This is something good to be aware of so it felt like a good place to go through it.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Mentioned that <code>this.setState</code> is required for committing data to <code>state</code>.</li>
<li>Added missing semicolons to property initializers.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Added missing semicolons to property initializers.</li>
<li>Cleaned up <code>update</code> method slightly. Returning early is a good practice.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Fixed <code>Editable</code> import paths. They were missing <code>..</code>'s.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#language-features" id="language-features"></a><span class="text">Language Features</span><a class="header-anchor-select" href="https://survivejs.com/#language-features">#</a></h3>
<ul>
<li>Added missing semicolons to property initializers.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I will tweak the book based on your feedback as usual and start certain preparations. I expect the final version will be out in a week or two. After that we are back to usual cadence. I hope to maintain a monthly release cycle at least. Currently a lot of decisions are made based on the situation.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>If you are working through the book, remember that you can find up to date code from <a href="https://github.com/survivejs/webpack_react">the book repository</a>. This time there weren't a lot of changes fortunately.</p>
<p>Remember that you can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. It's good for me to know where you struggle so I can tweak the book.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
SurviveJS - Webpack and React - v2.0.0-rc1asurvivejswebpackandreactv200rc12016-01-06t00:00:00z2016-01-06T00:00:00Z<p>Since the <a href="https://survivejs.com/blog/survivejs200-beta2">beta</a> was launched, I've been working on remaining improvements. This has mostly meant tuning the existing content, although there are some new bits as well.</p>
<p>Obviously the released book won't be complete in sense that it contains everything you need to know about React and surrounded technologies. But I believe it amounts to something. Given the nature of the effort, the coverage will slowly but surely improve over time.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-compared-to-pete-hunt-s-learning-recommendation" id="book-compared-to-pete-hunt-s-learning-recommendation"></a><span class="text">Book Compared to Pete Hunt's Learning Recommendation</span><a class="header-anchor-select" href="https://survivejs.com/#book-compared-to-pete-hunt-s-learning-recommendation">#</a></h2>
<p>Compared to <a href="https://github.com/petehunt/react-howto">Pete Hunt's official learning recommendation</a> we're doing quite well. The book covers most of the issues he mentions. Mainly the book is missing information on routing, <a href="https://facebook.github.io/immutable-js/">Immutable.js</a>, <a href="https://facebook.github.io/relay/">Relay</a>, <a href="https://netflix.github.io/falcor/">Falcor</a>, and such topics. I'm not worried, though. These topics can be discussed in detail at a later time. And there's plenty of other material available already.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>I've improved the book based on your feedback. I also ate my own dogfood and went through it myself. This revealed some issues (mainly code formatting) and helped me to simplify certain portions further.</p>
<p>I also wrote a little appendix that should inspire you to think about how to structure your application. There's no one true way. Rather, as with all things React, there's a lot of flexibility available.</p>
<p>Feedback is still welcome of course. I'll spend more time with the content and start pushing certain other bits to get a nice release done.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0-0-rc1" id="book-improvements-2-0-0-rc1"></a><span class="text">Book Improvements - <code>2.0.0-rc1</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0-0-rc1">#</a></h2>
<p>In total 79 commits went to <code>2.0.0-rc1</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v2.0.0-beta2...v2.0.0-rc1">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>Explained the point of appendices.</li>
<li>Added more sectioning to make the points clearer.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h3>
<ul>
<li>Added more sectioning. Better be consistent with that.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Moved <code>require</code> statements to use <code>const</code> instead of <code>var</code>. This feels more consistent given <code>const</code>s are used anyway.</li>
<li>Added more terminal output to make expectations clearer.</li>
<li>Added a section about <em>HMR on Windows</em>. The default setup won't work on all versions of Windows so I added an alternative. It's not as efficient as it uses polling.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/dotenv">dotenv</a>. That's handy for managing environment variables through a module of its own.</li>
<li>Made sure <em>babel-loader</em> caching gets enabled through <code>babel?cacheDirectory</code>. This helps especially with rebuild performance.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Fixed Babel settings passing. Instead of <code>babel?stage=1</code> you'll want to use <code>babel?presets[]=react,presets[]=es2015</code> kind of format. It's cleaner to use <em>.babelrc</em>, though.</li>
<li>Defined a section for <em>Using Babel for Webpack Configuration</em> and expanded on the idea. If you want to use <em>webpack.config.babel.js</em>, you need to have <a href="https://www.npmjs.com/package/babel-register">babel-register</a> installed to your project.</li>
<li>Moved the setup to use <a href="https://www.npmjs.com/package/babel-preset-react-hmre">babel-preset-react-hmre</a>. This simplifies the Babel setup a lot!</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Restructured for clarity. There are less steps now and the chapter gets faster to the point.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Added missing subsections to the Flux explanation. This is consistent with the rest of the book now.</li>
<li>Explained the difference between a <em>ponyfill</em> and a <em>polyfill</em>. Former don't override native methods whereas latter do.</li>
<li>Cleaned up code examples. They should be easier to follow now.</li>
<li>Defaulted to the term <em>universal rendering</em> over <em>isomorphic</em> given it seems that's winning over. The term <em>isomorphic</em> is still mentioned, though.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Renamed <code>this.addItem</code> as more specific <code>this.addLane</code> to communicate the intent better.</li>
<li>Pushed <em>On Data Dependencies and <code>waitFor</code></em> to a more appropriate place in the chapter. Earlier it broke the flow a bit.</li>
<li>Explained the need for association (notes to lane) better.</li>
<li>Added missing <code>constructor</code> bits to the <code>Lane</code> code examples.</li>
<li>Simplified add/remove annotations of the code examples to make them easier to copy and follow.</li>
<li>Moved from <code>defaultValue</code> to <code>placeholder</code> at <code>Editable</code>. This is a cleaner approach.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Clarified the point that HTML5 Drag and Drop based backend is now separate from React DnD core.</li>
<li>Made the code examples clearer to follow.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Updated terminal output to match the current state.</li>
<li>Explained <em>Defining a <code>vendor</code> Entry Point</em> in greater detail.</li>
<li>Linked to <a href="https://www.npmjs.com/package/extract-text-webpack-plugin">ExtractTextPlugin</a>.</li>
<li>Simplified deployment configuration. It's enough to do just <code>"deploy": "gh-pages -d build"</code> given <em>gh-pages</em> provides a CLI tool these days.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Dropped <code>require('babel/register')</code> mention. This isn't needed in the current setup anymore.</li>
<li>Added missing id to <code>NoteContent</code> at <code>Note</code> test to mute a propType warning.</li>
<li>Simplified Babel setup.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/eslint-friendly-formatter">eslint-friendly-formatter</a> and ESLint <code>--format</code> parameter.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Mentioned <a href="https://www.npmjs.com/package/irish-pub">irish-pub</a>. This is a useful tool for checking what your package looks like before hitting <code>npm publish</code>.</li>
<li>Clarified <em>Dealing with Preprocessing</em> so it's easier to understand the point.</li>
<li>Modernized <code>lib/post_install.js</code> script.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#structuring-react-projects" id="structuring-react-projects"></a><span class="text">Structuring React Projects</span><a class="header-anchor-select" href="https://survivejs.com/#structuring-react-projects">#</a></h3>
<ul>
<li>New content. This appendix gives you some ideas on how to proceed with <a href="..webpack_react/structuring_react_projects">structuring React projects</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#language-features" id="language-features"></a><span class="text">Language Features</span><a class="header-anchor-select" href="https://survivejs.com/#language-features">#</a></h3>
<ul>
<li>Added an example of <em>aliasing imports</em>.</li>
<li>Added an example of <em>Classes and Modules</em>.</li>
<li>Added more examples to property initializers.</li>
<li>Explained arrow functions more accurately.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>As usual, I'll remain responsive to feedback. I'm prepared to do minor tweaks to the book. Major development will have to wait for subsequent versions.</p>
<p>I'll most likely spend time on some technical development. The site could use some tweaks and there are certain ideas I must prototype.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>If you are working through the book, remember that you can find up to date code from <a href="https://github.com/survivejs/webpack_react">the book repository</a>. I know it's a little inconvenient to catch up with changes, but what can you do. :)</p>
<p>Remember that you can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. It has been very instructive to work through various issue with my readers. This is useful for all parties involved.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
Codemod - Refactoring Code Programmatically - Interview with Ramana Venkataacodemodrefactoringcodeprogrammaticallyinterviewwithramanavenkata2016-01-01t00:00:00z2016-01-01T00:00:00Z<p>Performing big changes to a codebase is always a little daunting. Doing each change by hand is time consuming and generally leads to errors, unless you have a good test suite in place.</p>
<p><a href="https://github.com/facebook/codemod">Codemod</a> is a tool that has been designed to help in this problem. In this interview, Ramana Venkata describes the tool in detail.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/641693d5a45d1cd8b698aa96cebb3178?s=200" alt="Ramana Venkata" class='author' width='100' height='100' />
</span>
My name is Ramana Venkata. I am front-end developer from India. I have been following the React Community since a year and half or so. I wanted to contribute to this community from that but I couldn't due to my commitments at college and lack of experience I guess. But now that I have started working, I have a good amount of free time and I am trying to put good use.
</p>
<p>We have plethora of tools but very little documentation. Sometimes the documentation exists but you can hardly learn anything from it. Sometimes the examples are there but they are not explained. So currently, my main focus is on improving tooling and the documentation around it. I want to make them more accessible.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-codemod-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-codemod-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Codemod to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-codemod-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Codemod is snippet of code which transforms JS code. It is one-time transformation that you apply on your code base to change an API or to change the style of your code etc., Under the hood, it turns your js code into an Abstract Syntax Tree (AST), applies transform on the AST and then convert it back to JavaScript. This is different from Babel because the codemod changes the original file where as babel doesn't change the original file.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-use-codemod-" id="who-should-use-codemod-"></a><span class="text">Who should use Codemod?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-use-codemod-">#</a></h2>
<p>I think every library author, that wants to make a breaking changes to their API, should at least consider the possibility of writing a codemod. You can potentially run codemods in the postinstall lifecycle hook of npm to update your code for any breaking changes that library introduces. This will probably make library authors worry less about breaking changes and spend more time on implementing great stuff.</p>
<p>But it's always not possible to write a codemod for breaking changes sometimes because of the change itself. Also, you have be to very defensive in the way you write a codemod to avoid false positives. This is partly is because of the dynamic nature of JavaScript itself and people use varying styles to write their code and structure their application.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#are-there-other-similar-tools-you-should-be-aware-of-" id="are-there-other-similar-tools-you-should-be-aware-of-"></a><span class="text">Are there other similar tools you should be aware of?</span><a class="header-anchor-select" href="https://survivejs.com/#are-there-other-similar-tools-you-should-be-aware-of-">#</a></h2>
<p>As a natural next step, you can learn about <a href="https://babeljs.io/docs/plugins/">Babel plugins</a>. It is very easy to write them with the help of <a href="https://astexplorer.net/">AST Explorer</a>. I think it's possible to write a plugin that provides auto-completion engine like <a href="http://ternjs.net/">Tern</a>, but a little more advanced.</p>
<p>Imagine auto-completing a React component with all the required props and we can show type of props when you hover over it etc.,. You can use it for compile time transforms also. For example, I think the <a href="https://www.npmjs.com/package/classnames">classnames</a> package by Jed Watson (which is amazing btw) can be replaced by a simple Babel transform.</p>
<p>I don't know how much value it has or whether its good thing or bad thing. This approach feels similar to having macros where we write code using custom syntax and at compile time we just transform them to JavaScript.</p>
<p>I think there are is a lot of untapped potential there. We just need more time for the tools to mature and for that we need more contribution, adoption and feedback from the community.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-codemod-and-javascript-development-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-codemod-and-javascript-development-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for Codemod and JavaScript development in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-codemod-and-javascript-development-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>I think Codemod are just getting started (in the jscodeshift sense to make breaking changes to the API, etc.,). It is still a new tool the community even though it has been there for sometime. I have heard about it a lot of times but never really cared about it. It is <a href="https://www.youtube.com/watch?v=d0pOgY8__JM">Christoph Pojer's talk on Codemods</a> which gave me the really inspiration to try it out.</p>
<p>We have seen a lot of people complain about burnouts because fast moving landscape of JavaScript and library are making breaking changes all over the place, etc., We definitely can't stop innovating, but we should do invest time in tools that help us upgrade smoothly for this every breaking API changes situation.</p>
<p>For example, Ember provides new releases on a six week cycle. If you have a large code-base in Ember, getting rid of all the deprecation warnings can be a nightmare and doing it every six weeks is not fun at all. Codemods can ease some of that pain.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I think you should either interview Felix Kling or Christoph Pojer.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Ramana! I think Codemod is one of those tools that has great potential in taking some edge of development. I hope it becomes more popular and we see more adoption.</p>
<p>From a library consumer's point of view this can help a lot. I feel people aren't just that aware of the tool yet but perhaps that will change during this year.</p>
<p>If you are interested in the topic, I recommend checking out Ramana's <a href="https://vramana.github.io/blog/2015/12/21/codemod-tutorial/">in-depth tutorial</a>. I've listed various other resources below:</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=d0pOgY8__JM">Christoph Pojer's talk - Evolving Complex Systems Incrementally</a></li>
<li><a href="https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb">Effective JavaScript Codemods</a> - A related blog post</li>
<li><a href="https://github.com/facebook/codemod">facebook/codemod</a> - The project itself</li>
<li><a href="https://github.com/facebook/jscodeshift">facebook/jscodeshift</a> - A toolkit for running codemods over multiple JavaScript files</li>
<li><a href="https://github.com/reactjs/react-codemod">reactjs/react-codemod</a> - Codemods for updating React</li>
<li><a href="https://github.com/cpojer/js-codemod">cpoject/js-codemod</a> - Codemods for transforming old JavaScript to a newer standard</li>
</ul>
2015 Recapa2015recap2015-12-30t00:00:00z2015-12-30T00:00:00Z<p>I know the common wisdom is that you shouldn't write technical books. It's a difficult way to earn your income, especially when you live in a country with heavy taxation and price level. Strangely enough, it's working out for me at the moment. I'll go through this year and its teachings in this brief post. It was a good year and I can only hope the next one will be even better!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-i-start-the-project-" id="why-did-i-start-the-project-"></a><span class="text">Why Did I Start the Project?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-i-start-the-project-">#</a></h2>
<p>It was a huge risk to start an effort like this. SurviveJS was born out of frustration. Besides being frustrated at my personal situation, I was frustrated at the lack of cohesive Webpack and React related material. Sure, you can learn it all from blog posts, source code, and documentation. But that is painful. So it felt like there could be a chance to make a difference.</p>
<p>Initially I and <a href="http://www.christianalfoni.com/">Christian</a> prepared a table of contents (TOC) and a sample chapter for a known publisher. After all, it makes a lot of sense to have people behind you that understand how the business works. Even though we did our best and negotiated for four weeks, the publisher eventually said no.</p>
<p>As Christian got busy with work and his own projects, I decided to carry on with the effort. It felt wrong not to. Initially, the plan was to write a book about <a href="https://webpack.github.io/">Webpack</a>, but quite soon <a href="https://facebook.github.io/react/">React</a> portion began to gain more significance. The structure of the book has grown organically based on intuition and demand. Even though this is slower than writing through some predefined TOC, this has allowed me to maneuver and alter the content as I understand better what's needed.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#going-indie" id="going-indie"></a><span class="text">Going Indie</span><a class="header-anchor-select" href="https://survivejs.com/#going-indie">#</a></h2>
<p>Self-publishing a book means you will have to deal with a lot of work yourself. You will have to take care of aspects like marketing, sales, graphics, editing, and copy-editing. Of course, you can outsource these portions as you like.</p>
<p>Given I didn't want to deal with the complexity of sales (VAT MOSS and all that), I decided to publish my book through <a href="https://leanpub.com/">Leanpub</a>. As discussed in <a href="https://survivejs.com/blog/succeed-at-technical-books">an earlier post</a>, that's just an option amongst many. It has worked quite well for me, though.</p>
<p>There are still a lot of things I should do better. In short term improving my distribution is one of the key things. I can also improve the way I work. Now it's a little chaotic. More structured approach might be beneficial. I need to begin to think in terms of processes.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#success-is-rare" id="success-is-rare"></a><span class="text">Success is Rare</span><a class="header-anchor-select" href="https://survivejs.com/#success-is-rare">#</a></h3>
<p>I know it's rare that you actually succeed with an effort like this. In fact, it was <a href="https://survivejs.com/blog/balance">really hard</a> at one point. The situation didn't look particularly good around July. I realized I was being perhaps a bit too open about my efforts. Fortunately some sort of balance was reached.</p>
<p>I think offering most of the content for free was the right call to make. That way more people can get into the technology. This in turn might lead to visibility I need to make sales. Sales in turn feed the wheel and lead to more content to pull in more people.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-through-the-storm" id="getting-through-the-storm"></a><span class="text">Getting Through the Storm</span><a class="header-anchor-select" href="https://survivejs.com/#getting-through-the-storm">#</a></h3>
<p>I am glad I persisted through the hard times. Especially editing support provided by <a href="http://angular-tips.com/">Jesús</a> was extremely important. It helped me to shape the book for the better and manage the scope more effectively. I know the book isn't perfect, no book is, but it would be far worse without some gentle nudges towards the right direction.</p>
<p>Besides Jesús, I have received direct support at least from tens of people if not over a hundred. It's always heartwarming to get feedback, no matter whether it's positive or negative. Often it's the negative feedback that keeps your feet on the ground. The problem with an intense effort like this is that you tend to lose perspective. That's where the community feedback and support has helped immensely. Thank you guys!</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-indie-bundle" id="react-indie-bundle"></a><span class="text">React Indie Bundle</span><a class="header-anchor-select" href="https://survivejs.com/#react-indie-bundle">#</a></h3>
<p>One of the interesting things we did during this year was an effort known as <a href="https://survivejs.com/blog/react-indie-bundle">React Indie Bundle</a>. The main problem in going alone, and especially first time, is that your audience is extremely limited. There simply isn't a lot of marketing power. In React Indie Bundle we joined forces and did a joint effort to reach larger masses. It worked out reasonably well, and it might yield some further benefits. Thanks for inviting me to the bundle.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#blog-content" id="blog-content"></a><span class="text">Blog Content</span><a class="header-anchor-select" href="https://survivejs.com/#blog-content">#</a></h3>
<p>Perhaps one of the better moves was to begin to arrange structured, short interviews for the <a href=".">blog</a>. We have picked the brains of guys like <a href="https://survivejs.com/blog/mobx-interview">Michel Weststrate</a>, <a href="https://survivejs.com/blog/redux-interview">Dan Abramov</a>, and <a href="https://survivejs.com/blog/cycle-interview">André Staltz</a> just to mention some. Thanks for participating!</p>
<p>There will be more of these interviews in the future. I think it's a fine way to get some visibility on what people think and where they think the world is going and makes an effort like this worthwhile. We're all in the same boat after all.</p>
<p>I've done a decent amount of <a href="https://survivejs.com/blog/react-indie-bundle">my blogging efforts</a> not to mention a talk or two. I didn't visit any notable React conferences this year, but perhaps I get more lucky in 2016. We'll see.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-have-i-learned-" id="what-have-i-learned-"></a><span class="text">What Have I Learned?</span><a class="header-anchor-select" href="https://survivejs.com/#what-have-i-learned-">#</a></h2>
<p>I feel going forward with this venture was easily the best thing I have done so far. I may have gotten a little better at writing and certain business and technology related aspects. I have had to develop some technology to fit my needs. And I will continue to do so. As the technology matures, you will get to benefit from it of course.</p>
<p>One surprising thing is that <a href="https://gitter.im/survivejs/webpack_react">a small community</a> has grown around the effort. It is one of those things that keeps you going.</p>
<p>Throughout the process I have learned is that a bit of persistency, and luck, can take you quite far. From my perspective the current situation is sustainable. It allows me to push the effort further without having to worry too much. I couldn't ask for more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>You could say year 2015 was about learning to float. 2016 is about learning to swim. There are still some aspects I haven't quite nailed yet, but I'm getting there. The big thing is that I don't have to start from scratch anymore. A dent has been made.</p>
<p>At the moment my primary priority is in getting a solid 2.0 version of the book out. It's currently <a href="https://survivejs.com/blog/survivejs200-beta2">running in beta</a>. This process allows me to fix certain kinks and make sure the book works for most people. I'm aware the approach the book uses isn't ideal for everyone. But, as they say, you cannot bow one way without mooning to another. Being opinionated is good.</p>
<p>From my perspective the current book has two bigger omissions. It doesn't discuss <a href="http://redux.js.org/">Redux</a> in detail. Instead, the focus is on <a href="http://alt.js.org/">Alt</a> and the Flux pattern. The whole aspect of back-end is skipped. I believe even with these omissions the book is quite useful already. But these are something that can be developed during the next year as demand arises. I want to keep the book as a living effort.</p>
<p>It could also be worthwhile to modernize <a href="https://christianalfoni.github.io/react-webpack-cookbook/">the Webpack cookbook</a> and turn it into a sibling offering through a similar model where most of the content is open and freely available.</p>
<p>There's definitely a lot of ground to cover. But I see that more as an opportunity rather than a challenge.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I want to thank you for a great 2015. It is the community that makes an effort like this possible in the first place. I have a feeling 2016 could be even better in many ways. And I'm prepared to do my part. Happy 2016 guys!</p>
SurviveJS - Webpack and React - v2.0.0-beta2asurvivejswebpackandreactv200beta22015-12-28t00:00:00z2015-12-28T00:00:00Z<p>The long awaited 2.0 is getting very close. <a href="https://github.com/gaearon/babel-plugin-react-transform">babel-plugin-react-transform</a> reached version 2.0 last Wednesday. This was all I needed to push the book to Babel 6. I released <em>2.0.0-beta1</em> as a xmas present of some sort to my <a href="https://leanpub.com/survivejs_webpack_react">Leanpub readers</a> in early access at 25th. I think they earned it. :)</p>
<p>Today, after some initial feedback and subsequent fixes, I am prepared to publish a wider scale beta. Besides Babel 6 support, I have improved the formatting of the code examples considerably. Instead of having to guess what code goes and where, the examples now contain bolding and overlining to illustrate the changes better. In addition, there's some new content about Flow and JavaScript language features.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>The primary purpose of this beta is to encourage you to provide feedback as there's still some time before the book goes to printing presses. I know it's missing some interesting topics, but that's something that can be worked during the next iteration (2 -> 3) of the book.</p>
<p>I am prepared to spend the next week or two on improvements on both the book and the site. It might be fun to code something cool for a change. ;)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-2-0-0-beta2" id="book-improvements-2-0-0-beta2"></a><span class="text">Book Improvements - <code>2.0.0-beta2</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-2-0-0-beta2">#</a></h2>
<p>In total 129 commits went to <code>2.0.0-beta2</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.9.15...v2.0.0-beta2">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>Made the chapter paragraphs flow better.</li>
<li>Improved section structure.</li>
<li>Explained better who the book is meant for.</li>
<li>Added a bit about book versioning. Version included.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h3>
<ul>
<li>Made Webpack explanation flow better. It should be easier to understand what it does now.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Mentioned <code>npm init -y</code> shortcut. Far better than having to hit <em>return</em>.</li>
<li>Reworked chapter structure. Now it's more logical and hopefully easier to follow.</li>
<li>Expanded explanations and added warnings about gotchas.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Mentioned <a href="https://github.com/paldepind/snabbdom">paldepind/snabbdom</a> as a Virtual DOM alternative.</li>
<li>Added missing section (JSX vs. HTML)</li>
<li>Hinted about the difference of React components and elements. Components generate elements and are more complex by nature given they can contain state.</li>
<li>Updated the setup to Babel 6.</li>
<li>Explained Babel 6 plugins and presets.</li>
<li>Simplified application entry point by introducing <a href="https://www.npmjs.com/package/html-webpack-template">html-webpack-template</a>. It's a versatile template that works simple projects like this perfectly. This avoids unnecessary DOM manipulation.</li>
<li>Explained how <code>BABEL_ENV</code> works and why it needs to be set.</li>
<li>Dropped the mention of <code>bind</code> convention and replaced that with a snippet about property initializers.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Updated React components to use function based definitions where it made sense. This is a good starting point for new components.</li>
<li>Renamed <code>items</code> to more specific <code>notes</code>. This has been done also for <code>lanes</code>.</li>
<li>Hinted about the benefits of immutability when discussing <code>componentWillUpdate</code>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Generalized <code>update</code> interface. Now it doesn't care about the data you pass to it. This has been done for both stores (<code>NoteStore</code>, <code>LaneStore</code>). The implementation goes through <code>object-assign</code>.</li>
<li>Discussed possible alternative implementations briefly to give more perspective.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Generalized <code>update</code> interface here as well. One interesting refactoring would be to do a generic CRUD store and then reuse that from elsewhere.</li>
<li>Dropped <code>waitFor</code>. It just introduced unnecessary complexity given we're dealing with synchronous data. There's still an explanation around as you need to be aware of it in asynchronous cases when you are dealing with data dependencies.</li>
<li>Pushed <code>Lane</code> <code>bind</code>s from the <code>constructor</code> to <code>render()</code>. Although this isn't ideal performance-wise, this is something that is easier to handle in Flow typing.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Did just grammar fixes, better highlighting.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Dropped <em>Setting Up a Build Target</em>. This was possible given we set up one at <em>Developing with Webpack</em> already.</li>
<li>Improved flow and dropped some redundant information.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/babel-plugin-transform-inline-environment-variables">babel-plugin-transform-inline-environment-variables</a> as an alternative to <code>DefinePlugin</code>.</li>
<li>Dropped sourcemaps from production. Less complexity.</li>
<li>Mentioned about how to structure the project. I might write a little appendix about that, but we'll see.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Fixed test path for <code>include</code>s. Interestingly this worked even if it was missing a "s". That's something to investigate.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react-" id="typing-with-react-"></a><span class="text">Typing with React*</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react-">#</a></h3>
<ul>
<li>Expanded on Flow somewhat. Now you can see how you would begin to push the project towards Flow typing. Flow is still missing some functionality required by a full port, but this is far better than nothing.</li>
<li>Linked to various TypeScript loaders. I might do a TypeScript version of Kanban if there's interest.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Improved grammar, highlighting.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Mentioned <a href="https://docs.npmjs.com/files/package.json#files">files</a> <em>package.json</em> field as an alternative to <em>.npmignore</em>.</li>
<li>Explained <code>peerDependencies</code>.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/semantic-release">semantic-release</a>. It's a tool that provides better release flow.</li>
<li>Mentioned <code>>= 1.3.0 < 2.0.0</code> version range.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Improved grammar.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#language-features" id="language-features"></a><span class="text">Language Features</span><a class="header-anchor-select" href="https://survivejs.com/#language-features">#</a></h3>
<ul>
<li>New content! This is supposed to help especially those that haven't used the features before. The appendix is terse and gets to the point. I'll improve this based on your feedback.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#understanding-decorators-" id="understanding-decorators-"></a><span class="text">Understanding Decorators.</span><a class="header-anchor-select" href="https://survivejs.com/#understanding-decorators-">#</a></h3>
<ul>
<li>Improved grammar.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#troubleshooting" id="troubleshooting"></a><span class="text">Troubleshooting</span><a class="header-anchor-select" href="https://survivejs.com/#troubleshooting">#</a></h3>
<ul>
<li>Improved grammar.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>This depends on you. I have a couple smaller things on my plate, but nothing major. I want to push the final release as far as I can. But to achieve that, I'm going to need feedback so I know what to improve. There's no such thing as a perfect book, but at least I'm willing to push this as far as I possibly can.</p>
<p>I might do an intermediate <em>beta-3</em>. I want to do a final release within a week or two. After that I'll focus my efforts depending on demand.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>If you are working through the book, it might be a good idea to patch your project based on <a href="https://github.com/survivejs/webpack_react">the book repository</a> so it's up to date and continue from there. Eggs and omelette, right?</p>
<p>Leanpub readers have access to the stable release through "extras". I made a little switcheroo there. Earlier the beta version was within "extras". Speaking of which, I will need to figure out a better way to archive releases and make them available. Leanpub isn't working in my favor here unfortunately.</p>
<p>Remember that you can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work. The last thing I want is that you curse some parts of the book alone. I'm here to help after all.</p>
<p>You can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
WhitestormJS - Three.js Based Game Engine - Interview with Alexander Buzinawhitestormjsthreejsbasedgameengineinterviewwithalexanderbuzin2015-12-22t00:00:00z2015-12-22T00:00:00Z<p>I remember, when a few years ago a friend asked me what JavaScript game engine to use. As a result, I set up a little gist that in turn lead to something larger, namely <a href="https://github.com/bebraw/jswiki">jswiki</a>, and eventually <a href="http://jster.net/">jster.net</a>. The <a href="https://github.com/bebraw/jswiki/wiki/Game-Engines">game engine listing</a> and <a href="https://github.com/bebraw/jswiki/wiki/Game-engine-feature-matrix">game engine feature matrix</a> are quite useful still.</p>
<p>Today, I'm interviewing Alexander Buzin, the author of a new engine known as <a href="http://whitestormjs.xyz/">WhitestormJS</a>. I don't understand about engines that much myself so it's nice to get some perspective to the topic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/e002d265845b7625ef396bf74763e31d?s=200" alt="Alexander Buzin" class='author' width='100' height='100' />
</span>
</p>
<p>My name is Alexander Buzin. I am a front-end developer and a hockey player from Kiev. I am interested in WebGL technology and everything related to 3D rendering in Web, such as <a href="http://threejs.org/">Three.js</a>, <a href="http://seenjs.io/">seen.js</a> and 3D physics engines like <a href="http://www.cannonjs.org/">Cannon.js</a> or <a href="https://github.com/lo-th/Oimo.js/">Oimo.js</a>. I am inspired by projects created on it and my favourite one is <a href="http://www.ro.me/">ROME</a>.</p>
<p>Beyond 3D projects, I want to highlight latest cool website which impressed me: <a href="http://because-recollection.com/">because-recollection.com</a>.
Such sites make the internet a better place.</p>
<p>Before I started learning Three.js, I tried my skills in AngularJS and NodeJS. But my ideal still was jQuery, given it's so simple to use.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-whitestormjs-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-whitestormjs-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe WhitestormJS to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-whitestormjs-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>As I said, I like the idea of powerful, but simple in usage libraries like jQuery. Only a few lines of code, and you have a completely new website with smooth transitions and animations. WhitestormJS relies on the same idea. You only input parameters, which make your 3D object different from others. All other options are generated automatically by default.</p>
<p>For example, if you forgot to input a color, WhitestormJS will display random one by default. If you forgot to insert your sphere radius - it will always be "1".</p>
<p>By the way, I noticed that almost every Three.js project or demo have their own resize function, so if you have 10 such projects, you need to write this simple function 10 times. Is it necessary? With WhitestormJS - no. Just put <code>autoresize: true</code> parameter to the <code>init()</code> function.</p>
<p>You can see all this in a small example:</p>
<pre><code class="lang-javascript"><span class="token keyword keyword-var" >var</span> GAME <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >WHS<span class="token punctuation" >.</span>init</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
anaglyph<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// Anaglyph effect.</span>
helper<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// Cannon.js shape helper</span>
stats<span class="token punctuation" >:</span> <span class="token string" >"fps"</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// fps, ms, mb or false if not need.</span>
gravity<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> <span class="token comment" spellcheck="true" >// Physics (gravity).</span>
x<span class="token punctuation" >:</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
y<span class="token punctuation" >:</span> <span class="token operator" >-</span><span class="token number" >200</span><span class="token punctuation" >,</span>
z<span class="token punctuation" >:</span> <span class="token number" >0</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
GAME<span class="token punctuation" >.</span>sphere <span class="token operator" >=</span> GAME<span class="token punctuation" >.</span><span class="token function" >addObject</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >"sphere"</span><span class="token punctuation" >,</span>
<span class="token punctuation brackets-braces" >{</span>
geometryOptions<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
radius<span class="token punctuation" >:</span><span class="token number" >3</span> <span class="token comment" spellcheck="true" >// Sphere radius</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
mass<span class="token punctuation" >:</span> <span class="token number" >10</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// Mass for CANNON.JS</span>
onlyvis<span class="token punctuation" >:</span> <span class="token boolean" >false</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// If set true - no physics for this object</span>
materialOptions<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> <span class="token comment" spellcheck="true" >// ThreeJs material options</span>
color<span class="token punctuation" >:</span> <span class="token number" >0xffffff</span><span class="token punctuation" >,</span> <span class="token comment" spellcheck="true" >// White.</span>
type<span class="token punctuation" >:</span> <span class="token string" >"basic"</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation" >,</span>
pos<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span> <span class="token comment" spellcheck="true" >// position in space</span>
x<span class="token punctuation" >:</span> <span class="token number" >0</span><span class="token punctuation" >,</span>
y<span class="token punctuation" >:</span> <span class="token number" >100</span><span class="token punctuation" >,</span>
z<span class="token punctuation" >:</span> <span class="token number" >0</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>The project is available through <a href="https://github.com/WhitestormJS/whitestorm.js">GitHub</a>. This way people can create pull requests to fix problems and improve the engine. I hope users will find it interesting.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-whitestormjs-" id="why-did-you-develop-whitestormjs-"></a><span class="text">Why did you develop WhitestormJS?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-whitestormjs-">#</a></h2>
<p>My first projects were based on Three.js. I used it for a long time and I realized that for a beginner developer (like me at the time) it is too complex. You need to understand how to construct a 3D scene, animate it and make changes to objects all the time. It scared me initially, but then my desire made me understand all this.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>I had a lot of troubles while developing this engine. Three.js has a lot of subtleties that you need to know. Early on, the library was just a single .js file + index.html (which served as an example for testing). Then I organized it all with <a href="http://gulpjs.com/">Gulp</a>. I split my main file to 10+ smaller parts. Each of those now contain a specific function (for example, <code>addObject()</code>, <code>addGround()</code>, or <code>init()</code>).</p>
<p>The next big challenge for me was adding shadows to the terrain. I searched through almost the entire internet in the hope of finding an answer to the question "Why doesn't my terrain cast shadows?". I came by shaders. As a user, who has spent all his life on JavaScript, I was confused. I mean, I don't know how to debug numbers through GLSL shaders. After spending about 2 days, I still decided to try to run the shadow of trial and error and I got it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Each day we are making new changes. Big updates will come in the nearest future. Now we are focused on making improvements to working performance and stability. In this month you will see added skybox feature, improved shadows and fps count.
What will come exactly? - I know that we will add proper Audio support. It does not mean that now you can't perform audio. Of course you can implement it to your 3D object throught Three.js, but later it will be much easier.</p>
<p>P.s.: Maybe we will release an editor for people, who don't know how to code.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-game-engines-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-game-engines-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for game engines and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-game-engines-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Some weeks ago I contacted <a href="https://twitter.com/aerotwist">Paul Lewis</a> from <a href="https://aerotwist.com/">Aerotwist blog</a> and asked him a similar question. His answer was ES2015 (the latest version of JavaScript) and React.js.</p>
<p>As for me, I think it will be awesome, if we can play games with excellent graphics in browsers. Currently the problem is that we need to develop games separately for multiple platforms. The web solves that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I can mention <a href="https://twitter.com/Cabbibo">Cabbibo</a>, who is my favourite web developer specializing in 3D. I like his projects.</p>
<p>He works with Three.js and make awesome abstract sites, which are worthy of attention.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for your interview Alexander. Best of luck with your engine! If you want to study the engine, <a href="https://github.com/sasha240100/WhitestormJS">head to GitHub</a> or check out the <a href="http://whitestormjs.xyz/">project homepage</a> for documentation and demos.</p>
SurviveJS - Webpack and React v1.9.15asurvivejswebpackandreactv19152015-12-11t00:00:00z2015-12-11T00:00:00Z<p>This is perhaps the last release before the long awaited <code>2.0</code>. <a href="http://alt.js.org/">Alt</a> reached version <code>0.18</code>. As a result a certain part of the book broke. I have fixed that issue in this release. There are also plenty of other tweaks here and there, and even some new content.</p>
<p>I visited an event known as "Web on the Edge" earlier this week. Even though these kind of trips always take some time, they tend to be worthwhile. At least I got to see some readers and managed to get exposure to some new ideas. See my <a href="http://www.nixtu.info/2015/12/afterthoughts-web-on-edge.html">conference report</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>The situation with Babel 6 is starting to look a little better. Babel 6 compatible beta version of <a href="https://github.com/gaearon/babel-plugin-react-transform">babel-plugin-react-transform</a> just came out a couple of days ago. Other plugins have been moving towards Babel 6 as well. I know decorator support is still a little iffy, but I have some solutions in sight that might work.</p>
<p>I made a little breakthrough with my <a href="http://flowtype.org/">Flow</a>. It will still take some work, but I cannot see any blockers anymore. This is something I will tackle in the near future.</p>
<p>In order to make it easier to contribute fixes and tweaks to the book, I changed the <a href="https://github.com/survivejs/webpack_react">GitHub repository</a> to use the <code>dev</code> branch by default. That's where the development happens after all. This will help to avoid some confusion.</p>
<p>I want to give special thanks to the user <a href="https://github.com/snowyplover">snowyplover</a> for providing nice edits to early parts of the book. <a href="https://github.com/sokra">Tobias Koppers</a> deserves a special mention as well. Overall the feedback has been encouraging and helped me to push the book a notch further. Thanks guys!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-9-15" id="book-improvements-1-9-15"></a><span class="text">Book Improvements - <code>1.9.15</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-9-15">#</a></h2>
<p>In total 74 commits went to <code>1.9.15</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.9.10...v1.9.15">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h3>
<ul>
<li>Improved the flow of the chapter. Now it should read a little better.</li>
<li>Added emphasis between <em>task runners</em> and <em>bundlers</em>. This helps to understand how these tools can complement each other.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Documented Webpack <code>entry</code> better. It accepts a path or an object of entries.</li>
<li>Pointed <code>open</code> to the correct location.</li>
<li>Put emphasis on the fact that the dev server runs in-memory. This should decrease the amount of confusion.</li>
<li>Mentioned that <code>HOST</code> should be set to <code>0.0.0.0</code> for Cloud9 and similar environments.</li>
<li>Noted that <code>test</code> expects a RegExp.</li>
<li>Noted that <code>include</code> expects a path or an array of paths.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Removed mention of <em>stage 1</em> now that we enable specific features we use at the project one by one.</li>
<li>Added examples of the custom features used to make it easier to understand what they do.</li>
<li>Pushed the ES6 class autobinding note to the correct place.</li>
<li>Added missing `"es7.classProperties" declaration.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Removed mention of <em>react-hot-loader</em>. It has been replaced by <em>babel-plugin-react-transform</em> so no need for this anymore.</li>
<li>Added emphasis to the fact that I prefer functional style and the reasons for this.</li>
<li>Renamed <code>renderTask</code> as <code>renderNote</code> to communicate the intent better.</li>
<li>Showed how to use <code>map</code> to set context. Example: <code>map(fn, context)</code>.</li>
<li>Dropped <code>findIndex</code>. The usage has been replaced with simpler functions. This reduces the complexity of the project and makes the chapter quicker to go through.</li>
<li>Improved the flow of <em>Understanding React Components</em>. Now it explains things in the right order.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Integrated <em>alt-utils</em> so the project works with Alt 0.18.</li>
<li>Simplified store methods somewhat.</li>
<li>Put emphasis on the dangers of mutation.</li>
<li>Explained isomorphic rendering briefly given it's mentioned.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Simplified store methods.</li>
<li>Dropped <em>Implementing <code>findLane</code></em>. This isn't needed now that the implementation is simpler.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Installed <em>react-addons-update</em> from a package of its own so the project won't break with React 0.15.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Improved the flow of the chapter. Now it proceeds in a slightly smarter order.</li>
<li>Fixed hashing configuration. Bundles should get invalidated as initially intended now. This took some extra effort to pull off.</li>
<li>Linked the chapter better to <em>Authoring Libraries</em>. It's valuable to understand npm in detail as that can help with your build so that's a good chapter to read.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Expanded on <em>.gitignore</em>.</li>
<li>Added mention of <em>postinstall</em> and its usage.</li>
<li>Explained how to deal with preprocessing (i.e., <em>postinstall</em>).</li>
<li>Added a section about version ranges and how they work.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Improved the flow of the early part of the chapter.</li>
<li>Added an image showing how different processing tools can work in tandem. <a href="https://medium.com/@ddprrt/deconfusing-pre-and-post-processing-d68e3bd078a3">Stefan Baumgartner</a> describes that well so I used his idea.</li>
<li>Added a section for <a href="https://github.com/postcss/postcss">PostCSS</a>. It was mentioned already but I felt it could use a better description.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#troubleshooting" id="troubleshooting"></a><span class="text">Troubleshooting</span><a class="header-anchor-select" href="https://survivejs.com/#troubleshooting">#</a></h3>
<ul>
<li>Added a section about <code>Module parse failed</code>. That's something you can see with Webpack quite easily so it felt like something nice to cover.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The coast is clear for the Flow work. I see no blockers with that. TypeScript will take some further investigation. And there are some smaller things, like improving those code examples, which I want to get done. That should keep me busy next week.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Again, this is a small release. If you are working through the book, it might be a good idea to patch your project based on <a href="https://github.com/survivejs/webpack_react">the book repository</a> so it's up to date and continue from there. I know this isn't ideal, but you cannot make an omelette without breaking an egg. It's for the better.</p>
<p>Thanks for the feedback again. It helps. You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
React Indie Bundle - Summaryareactindiebundlesummary2015-12-07t00:00:00z2015-12-07T00:00:00Z<p>It is amazing what a great year this turned out to be. I launched this site <a href="https://survivejs.com/blog/the-story-so-far">around July</a>. Since then a lot has changed. While the situation might have looked a little desperate back then, I feel we are on a sustainable track now. And there is still a lot to come.</p>
<p>If you've been wondering about the radio silence, a lot of it has to do with the <a href="http://www.reactindiebundle.com/">React Indie Bundle</a>. We got a couple of smart heads together and decided to launch something that would work well as an entry point to React. In order to support the effort, I launched a little campaign of my own. I thought it would be fun to summarize some of my efforts, so here we go.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#presentations" id="presentations"></a><span class="text">Presentations</span><a class="header-anchor-select" href="https://survivejs.com/#presentations">#</a></h2>
<p>I don't present a lot. There simply isn't a lot of demand for presentations locally so it makes sense for me to focus my efforts on coding and writing. That said, I'll do my best if I get asked to talk about some topic.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#frontend-in-2015-clear-the-decks" id="frontend-in-2015-clear-the-decks"></a><span class="text">Frontend in 2015 - Clear the Decks</span><a class="header-anchor-select" href="https://survivejs.com/#frontend-in-2015-clear-the-decks">#</a></h2>
<p>Earlier this year I was invited to talk about the state of frontend in 2015. Even though that was a couple of months ago, a lot of the points still stand. The <a href="https://survivejs.github.io/frontend-in-2015">slides</a> work best in Chrome.</p>
<p>It's more of an overview. This was an interesting year in front-end and I can only imagine what 2016 is going to be like.</p>
<p>I know this presentation didn't contribute to the bundle directly. It just felt like something fun to mention.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-to-write-a-book-and-survivejs-it" id="how-to-write-a-book-and-survivejs-it"></a><span class="text">How to Write a Book and SurviveJS it</span><a class="header-anchor-select" href="https://survivejs.com/#how-to-write-a-book-and-survivejs-it">#</a></h3>
<p>I was invited to talk about my book a week ago. Even though <a href="https://www.youtube.com/watch?v=DrgZaiqm4YE">the recording</a> of my presentation is in Finnish, you might still enjoy <a href="https://survivejs.github.io/how-to-write-a-book-and-survivejs-it">the slides</a>.</p>
<p>It's more about the business side of things, but having that sort of understanding doesn't hurt. Especially if you want to write a book of your own.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-for-awesome-people" id="react-for-awesome-people"></a><span class="text">React for Awesome People</span><a class="header-anchor-select" href="https://survivejs.com/#react-for-awesome-people">#</a></h3>
<p>Webinars are tough. In addition to potential technical woes, it can feel strange to talk to an audience you don't see. Regardless, I gave a little introduction to React in a recent one we did to discuss React.</p>
<p>The <a href="https://survivejs.github.io/react-for-awesome-people/">slides</a> get to the point. In short, there is not that much to learn in React itself. It's more about learning how to deal with the ecosystem as a whole. I feel we're still in a discovery mode as new, better solutions to complement React come along.</p>
<p>This is in contrast to approaches enabled by popular frameworks. The framework approach itself is very powerful. Rather than having to splice things together, you just follow the conventions. The potential problems begin as you need to go beyond the initial design of the framework.</p>
<p>Keeping up with the framework's development can sometimes be a daunting proposition as you need to drag all of the project forward. A library oriented approach allows you to modernize your project one dependency at a time. This seems more sustainable to me over longer term.</p>
<p>I am sure both approaches are valid depending on the situation. And sometimes the approaches overlap. It may even make sense to construct a "framework" of your own out of libraries you like and then standardize on that. In the end it's about the constraints you want.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#guest-posts" id="guest-posts"></a><span class="text">Guest Posts</span><a class="header-anchor-select" href="https://survivejs.com/#guest-posts">#</a></h2>
<p>Given I'm a little stronger on the writing side of things, I put some conscious effort to that. Writing some guest posts felt like a good way to generate some interest towards the bundle while being useful to the community as a whole. I've listed some of my efforts below.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-bundling-for-fun-and-profit" id="webpack-bundling-for-fun-and-profit"></a><span class="text">Webpack – Bundling for Fun and Profit</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-bundling-for-fun-and-profit">#</a></h3>
<p><a href="https://www.codersclan.net/">CodersClan</a> is a little service meant for getting small coding tasks done. It fits somewhere between Fiverr and those larger freelancing sites. I decided to give them a taste of Webpack. This is what <a href="https://blog-admin.codersclan.com/webpack-bundling-for-fun-and-profit-2/">Webpack - Bundling for Fun and Profit</a> achieves.</p>
<p>If you have read my book or understand the basics of Webpack, there's nothing new here. It is an entry level post after all.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-a-cdn-reporting-application-with-webpack-and-react" id="building-a-cdn-reporting-application-with-webpack-and-react"></a><span class="text">Building a CDN Reporting Application with Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#building-a-cdn-reporting-application-with-webpack-and-react">#</a></h3>
<p>I wrote an entire tutorial for <a href="https://www.maxcdn.com/">MaxCDN</a>, a popular CDN provider. <a href="https://www.maxcdn.com/blog/cdn-reporting-application-webpack-react/">Building a CDN Reporting Application with Webpack and React</a> shows you how to build a little reporting application to understand how your CDN is performing.</p>
<p>Again, this is a 101 level post that's meant for beginners. Beyond that the API mocking idea might be worthwhile.</p>
<p>The cool thing about front-end development that you don't need an actual endpoint to work against. You can just generate the data that looks about right. When the time is right, you will plug in the real back-end. And this will just work assuming there is no impedance mismatch somewhere.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#how-to-structure-a-react-project-" id="how-to-structure-a-react-project-"></a><span class="text">How to Structure a React Project?</span><a class="header-anchor-select" href="https://survivejs.com/#how-to-structure-a-react-project-">#</a></h3>
<p><a href="https://reactjsnews.com/structuring-react-projects">How to Structure a React Project?</a> written for <a href="https://reactjsnews.com/">ReactJS News</a> gained some nice visibility through <a href="https://news.ycombinator.com/item?id=10645170">Hacker News</a>. This was surprising given I usually get ignored there. But I'm not complaining.</p>
<p>I think the post hit some nerve. Even though the Reddit commentary wasn't entirely supporting as some readers felt there wasn't enough substance, I believe the core idea of the post is valid.</p>
<p>There simply isn't one right way to structure your React project. It's a matter of judgment. Even though conventions can be cool, I think you should evolve the structure of your project as it evolves. It's about making things understandable, not about following some rules. Rules can be great, but it's better to make them yourself based on the situation.</p>
<p>Over longer term the community might begin to gravitate towards certain structures. That's fine, though, as it tells something about maturity. As we begin to understand better what we are doing, structure emerges. I believe this is one of the pain points for people coming from more structured environments.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy the material. Now that <a href="http://www.reactindiebundle.com/">the bundle</a> is nearing its end, I can get back to normal business. That said, there might be something interesting on the horizon. I'll get back to that when the time is right, though.</p>
StarHackIt - A Full Stack ES6/ES7 Starter Kit based on React and Node - Interview with Frederic Heemastarhackitafullstackes6es7starterkitbasedonreactandnodeinterviewwithfredericheem2015-11-24t00:00:00z2015-11-24T00:00:00Z<p>I discussed my <a href="https://survivejs.github.io/react-component-boilerplate/">React component boilerplate</a> earlier on. It is focused and deals only with the frontend. Often you need more than just a frontend, though. This is where Frederic Heem's <a href="https://github.com/FredericHeem/starhackit">StarHackIt</a> fits. It is a full stack boilerplate. Read on to learn more.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/2327ce3a89bc1eecbc6273990933ca14.jpg" alt="Frederic Heem" class="author" width="100" height="100" /><figcaption>Frederic Heem</figcaption></figure>
I studied industrial engineering in France but ended up being a software engineer for the last the last 15 years mostly in the UK and Italy. Right now, I am working on blockchain and distributed ledger technology in the city of London. During my spare time and when the wind blows, I am hooked on my kitesurf.
</p>
<p><figure><img src="/f6266e90693345a60b5763491b141dd6.jpg" alt="dunkerque-malo" class="" width="" height="" /><figcaption>dunkerque-malo</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-_starhackit_-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-_starhackit_-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>StarHackIt</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-_starhackit_-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>StarHackIt</em> is a full stack web application boilerplate. The aim is to provide a code base to quickly create a new web application. It is a foundation on which software developers can build on top of it.</p>
<p>This starter kit is written in JavaScript <strong>ES6</strong>/<strong>ES7</strong>, it is composed of a frontend based on React/Reflux, a Node.js backend, the data is backed by <strong>SQL</strong> thanks to the Sequelize ORM, automatic deployment is done with Ansible. The code is built with Gulp, analyzed by ESLint, tested with Mocha, covered by Istanbul.</p>
<p>One of the main benefits is that StarHackIt comes with <em>authentication</em>:</p>
<ul>
<li>Users can register and login with username and password, reset the password via email.</li>
<li>Social login with Facebook, Google, GitHub etc.</li>
</ul>
<p>A fine-grained <strong>authorization</strong> system based on groups, permissions and resources is also provided. This allows to create users belonging to groups with a different set of permissions to the API. A simple example is to grant special access to users belonging to the <em>Admin</em> group.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-starhackit-" id="why-did-you-develop-starhackit-"></a><span class="text">Why did you develop StarHackIt?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-starhackit-">#</a></h2>
<p>Most JavaScript boilerplates are not really full stack, either they focus on the frontend or they specialize on the backend.</p>
<p>The data is almost always stored on non-relational <strong>NoSQL</strong> database like MongoDB or in the cloud with Firebase. However, most applications rely on relational data so SQL databases such as PostgreSQL or MySQL are better suited. Actually, using a NoSQL database when the data are essentially relational could lead to serious issues.</p>
<p><figure><img src="/f9f43270e97c04a701da1e092b18d6f6.jpg" alt="NoSQL" class="" width="" height="" /><figcaption>NoSQL</figcaption></figure></p>
<p>The <strong>MEAN stack</strong> is quite popular, it's composed of MongoDB, Express, Angular and Node. Instead, StarHackIt is a <strong>SERNA stack</strong>: SQL, Express, React, Node, and Ansible.</p>
<p>The Ruby fans have Ruby on Rails, but the JavaScript developers don't have Node on rails (yet). This project is a little step towards the direction of a productive JavaScript web framework.</p>
<p>Image that you have to attend a hackathon to create a useful app in a weekend, is there any time to lose creating from scratch an application with some basic functionalities such as login and register?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>The JavaScript ecosystem is vibrant with a record number of packages that have overtaken any other languages, see <a href="http://www.modulecounts.com/">modulecount</a> for the facts.</p>
<p><figure><img src="/dce302f14d08517a2b429487e9cb5aa6.png" alt="Module counts" class="" width="" height="" /><figcaption>Module counts</figcaption></figure></p>
<p>The challenge is mostly about making choice between these huge numbers of packages to build upon:</p>
<ul>
<li>React/Angular/Angular2/Ember/Backbone</li>
<li>Reflux/Flux/Redux/Alt</li>
<li>Bootstrap/Material/Foundation</li>
<li>Eslint/Jscs/Jshint</li>
<li>Stylus/Saas/Less/CSS</li>
<li>Express/Koa/Hapi/Strongloop/Sails/Meteor</li>
<li>SQL/NoSql</li>
<li>Sequelize/Bookshelf</li>
<li>Webpack/Browserify/RequiresJs</li>
<li>Gulp/Grunt</li>
<li>Ansible/Chef/Puppet</li>
<li>Mocha/QUnit</li>
</ul>
<p>It is about selecting the best tools at a given time and integrating them. Over time, new libraries will emerge, other libraries will be unmaintained. Keeping the code up to date with the new version will require some kind of maintenance.</p>
<p><figure><img src="/fc5f093b9df95762434e509adeddc6a0.jpg" alt="Red pill or blue pill?" class="" width="" height="" /><figcaption>Red pill or blue pill?</figcaption></figure></p>
<p>Writing code in <em>ES6</em> and <em>ES7</em> adds another layer of complexity on the build system since files need to be transpiled to plain old JavaScript. This also makes setting up code coverage and testing trickier, however, it's definitely worth it.</p>
<p>The most amazing feature of <em>ES7</em> is <strong>async/await</strong>, forget about callbacks and Promises, async/await is an enlightenment and the way to go, it makes writing asynchronous code similar to writing synchronous code, it significantly changes the way JavaScript is written, especially on the node side.</p>
<blockquote>
<p>Twenty years ago JavaScript was a joke, now it's the future. <a href="http://jster.net/blog/monthly-jster-september-2015-part-2#.VkPBH2SKH-k">jster.net september-2015 </a></p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Next is to improve the documentation to explain the various parts of the stack, write a tutorial on how to create the famous TODO app. Then a native mobile app with react-native is definitely on the roadmap. An admin interface to manage users and other aspects of the app would be also very useful.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The future of React lies in the various Flux implementations that are evolving very quickly, React is only a part of the equation for building an application. The React community is growing at fast pace, for instance, the React Meetup in London is fully booked only after 20 minutes upon publication of the event. The frontend development and software in general have a bright and sustainable future, there is no shortage of software development jobs in sight.</p>
<p><figure><img src="/7821f82bb4f18138a170324c822e730a.png" alt="React trends" class="" width="" height="" /><figcaption>React trends</figcaption></figure></p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>What about an interview of Juho Vepsäläinen? The mind behind <a href="http://jster.net/">jster.net</a> and <a href="http://survivejs.com/">SurviveJS</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks a lot for the interview Frederic! I'll consider interviewing myself in the near future for sure as I might have a little announcement to make.</p>
<p>Best of luck to StarHackIt! Let's hope people find it and help you to push it further. Beyond the project site, consider checking <a href="https://github.com/FredericHeem/starhackit">the source code on GitHub</a>.</p>
SurviveJS - Webpack and React - v1.9.10asurvivejswebpackandreactv19102015-11-22t00:00:00z2015-11-22T00:00:00Z<p>It's time for another maintenance release with minor tweaks here and there. Probably the biggest change is the fancy new cover which I crafted based on the logo design of <a href="http://prospectone.pl/">Prospect One</a>. Cheers for that.</p>
<p>Probably the biggest news this time around is that the book is going to be a part of the <a href="http://www.reactindiebundle.com/">React Indie Bundle</a>. This will be a good chance to pick up some additional material while supporting indie authors and library/tool developers in their craft.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#overview-of-the-situation" id="overview-of-the-situation"></a><span class="text">Overview of the Situation</span><a class="header-anchor-select" href="https://survivejs.com/#overview-of-the-situation">#</a></h2>
<p>The situation with Babel 6 is still a little problematic. Besides waiting for <a href="https://github.com/gaearon/babel-plugin-react-transform">babel-plugin-react-transform</a> to catch up, there's <a href="http://phabricator.babeljs.io/T2645">the additional issue of decorator support</a>. I'll keep an eye on the progress and update the book once the time is right.</p>
<p>The biggest cosmetic change has to do with the introduction of property initializers. I simply got tired of having to use <code>bind</code> at constructor so I enabled the feature for the project. Even though experimental feature, it cleans up the examples somewhat so I believe it was worth it. The only gotcha is that hot loading doesn't support property initializers. But then, we had the same issue earlier. Now the code is just a little neater.</p>
<p>I put some serious effort to developing <a href="https://antwarjs.github.io/">Antwar</a>, my Webpack and React based site generator. Given I use it to develop this site, I felt it was a good chance to push it further. I managed to simplify it conceptually somewhat while improve performance a great deal. The work is on-going and I'm still dogfooding it. By the looks of it, the next release should be quite sweet. You can think of Antwar as "Webpack of static site generators".</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-9-10" id="book-improvements-1-9-10"></a><span class="text">Book Improvements - <code>1.9.10</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-9-10">#</a></h2>
<p>In total 34 commits went to <code>1.9.10</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.9.5...v1.9.10">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>Explained Webpack's approach in detail.</li>
<li>Explained React in detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Pushed path configuration to a single <code>PATHS</code> structure. A little neater this way.</li>
<li>Explained how to serve build results easily.</li>
<li>Made <em>webpack-dev-server</em> use <code>stats: 'errors-only',</code> option. This relatively new option gives you far less output and helps to keep your terminal clean.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Enabled <a href="https://github.com/jeffmo/es-class-static-properties-and-fields">class properties</a> so we can use <em>property initializers</em> to clean up the code.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Added warning mentioning that hot loading isn't fool proof. It's at its best if you can push your state to a state container such as <a href="http://redux.js.org/">redux</a>.</li>
<li>Changed <code>key</code> to use <code>id</code> directly. The ids are unique so why not.</li>
<li>Explained <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a> in greater detail.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Added missing filenames.</li>
<li>Simplified <a href="http://alt.js.org/docs/components/altContainer/">AltContainer</a> explanation.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Clarified <code>waitFor</code> explanation.</li>
<li>Hinted how to improve <code>Editable</code>. Now it encapsulates store itself. It would be interesting to extract the state and control it outside. This would be a good extension point for further development.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Tied drag and drop explanation to the application better.</li>
<li>Fixed filenames.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Expanded on <code>DefinePlugin</code> and how to use it. I managed to bum a couple of lines of code while at it given you can do just <code>'process.env.NODE_ENV'</code>. Small win but a win still.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Fixed <em>isparta-instrumenter-loader</em> to version 0.2.1 given that's the last version that works with Babel 5.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I will review the typing situation and go through the book myself from start to finish to see potential pain points. Perhaps I can do something to improve the code examples. There are a couple of ideas related to that. After this I have to cut <code>v2.0.0</code>. That's not an end of course but I feel it's an important milestone for this project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though small release, I want to thank you for feedback again. You helped me to fix a lot of issues I never would have caught on my own. You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
react-router5 - Routing Alternative for React - Interview with Thomas Rochareactrouter5routingalternativeforreactinterviewwiththomasroch2015-11-09t00:00:00z2015-11-09T00:00:00Z<p>When people ask about what routing solution to use with React, they often get pointed at <a href="https://github.com/reactjs/react-router">react-router</a>. It is a powerful solution and used by many so it can make sense. That doesn't mean it's the only alternative, though.</p>
<p>This time I'm interviewing <a href="https://twitter.com/tcroch">Thomas Roch</a>, the author of <a href="https://github.com/router5/react-router5">react-router5</a>. It provides React bindings for <a href="https://router5.github.io/">router5</a>, a generic routing solution he has developed. Read on to learn more about this interesting alternative.</p>
<blockquote>
<p>There are also <a href="https://github.com/router5/redux-router5">redux bindings</a> available for router5!</p>
</blockquote>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/900c67ec2d8cfd30e537cc3d49de969f.jpg" alt="Thomas Roch" class="author" width="100" height="100" /><figcaption>Thomas Roch</figcaption></figure>
I have a degree in engineering, although my education was for most parts non specialised, I ended up studying a bit more mechanical and electronics engineering. I have always been programming in my spare time and hacking stuff, and inevitably, my early professional career slowly drifted towards software engineering. I explored a few areas and languages: embedded software on micro-processors, desktop applications and web applications.
</p>
<p>I did a fair amount of full-stack web development, and a few years ago I decided to take front-end development very seriously, being amazed by what a difference Node.js and social coding had started to make. I am a French national, I am currently a software engineer at Fanduel and live in Glasgow, Scotland.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-router5-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-router5-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe <em>react-router5</em> to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-router5-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p><em>react-router5</em> (and router5) is a different way of thinking about routing in front-end applications, and a way which I think suits a lot more trees of components. Instead of focusing on what component to render for what route, or providing a handler function per route, it sees routing as going from A to B, not loading B.</p>
<p>There is clear separation of concerns: router5 will take care of checking routing can happen and provide route updates. react-router5 provides ways to update your virtual tree, but won't do it for you. So you can have control over routing. I am not the only one testing and implementing new ideas around routing though.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-react-router5-" id="why-did-you-develop-react-router5-"></a><span class="text">Why did you develop <em>react-router5</em>?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-react-router5-">#</a></h2>
<p>I started using React a little more than a year ago, while still developing heavily with Angular. Working alongside a back-end team using Scala, I had slowly been introduced to functional programming, immutability, reactive programming, etc... I played with React, used it on a playground project at home, and one of the really first thing I searched for was a router. I think it is a habit most of us have, having being used to rely on frameworks. And no surprise on the outcome, I ended up with react-router.</p>
<p>Slowly, my practice of React evolved. I started to reject state, played with Flux without being fully convinced, looked a lot at reactive programming but I didn't know what to do about routing. It felt like it was standing on my way, I wasn't building my application virtual tree, a router was doing it for me. So I started to play with routing, implementing custom solutions.</p>
<p>The first ones reflected my thoughts at the time: it was all very confusing. I slowly realized I wanted routing to be treated the same way application state changes are. Therefore, I didn't need a router for React. And not only did I need a library or framework agnostic router, I needed a router spitting out route updates as data updates, and not a router defining routes as a map of paths and route handlers.</p>
<p>I looked around and couldn't find what I was after. At the time, an article mentioning <a href="https://github.com/pillarjs/routington">pillarjs/routington</a> on DailyJS was published, I really liked the idea of a trie of routes. It mirrors your tree of components which helps building a mental model about your application and routing in general.</p>
<p>But I wanted to use named routes with parameters and it became router5 starting point: developing a library allowing to build a tree of named routes (route-node, supported by path-parser) before developing a router. It was also a conscious effort to explode routing in specialised parts, and remove the tight coupling between routes and components. I took some inspiration from various sources, including new generation frameworks like Aurelia and Angular2 for functionalities.</p>
<p>A few months back, shortly after ReactEurope 2015, I remember watching Christopher Chedeau saying about routers during his keynote: <em>"We have seen only one player emerge which is react-router... Is there any innovation going on? ... Actually, innovation already happened a few years ago and it happened in the Ember community...".</em> That fuelled my motivation and made me accelerate on router5. Once router5 was released in July, I started to focus on integration with React but lacked time and maturity. And it is only now with 1.0.0 that a solid React integration is provided with react-router5.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>The first barrier was to believe routing is complicated, there was an intimidation factor. Once I started to focus on specific areas and to split concerns, those initial concerns went away. One other challenge was to detrain from libraries and frameworks I was used to, and trying not to be too much influenced by existing routing solutions.</p>
<p>I don't think I had major technical challenges, I was for example able to re-use previous experiences around lexical analysis and tokenisers to build a library for parsing and matching paths. I otherwise needed to let my thoughts and knowledge mature over time. For react-router5, I had to gain experience on higher-order components to be able to propose them rather than mixins.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Version 1.0.0 of router5 is an important milestone because it totally removes side-effects from the router core. URL and browser history are now fully treated as side-effects, like DOM updates are side-effects of state updates and virtual tree re-renders. It also introduces plugins and improves on the use of middleware functions. The next step would be to start to see stuff emerge from the community.</p>
<p>The second important aspect is data loading. I don't currently have examples demonstrating how it can be achieved. Partially because there are so many ways data loading can be handled depending on how you handle state, and partially because I am careful not to introduce tight coupling where I wouldn't want to see some. But I will explore GraphQL and Falcor and see if there is a need to introduce integration helpers.</p>
<p>I would also like to improve the overall quality of the documentation I provide in order to attract more people.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The biggest trend right now is functional programming. At the component level, it means context-free and state-free components with higher-order components linking them to state and context. The second trend is reactive programming, outside components.</p>
<p>I mentioned above having routes in a tree to help with building mental pictures, having an application state as a tree is also very beneficial in that sense, and I believe in global application states. I am currently using redux on a greenfield project and released <a href="https://github.com/router5/redux-router5">redux-router5</a>.</p>
<p>I also like Baobab a lot and follow what Christian Alfoni is doing with Cerebral, and what Andre Staltz is doing with CycleJs.</p>
<p>For React, the future will be towards stateless, context-less, this-less functional components. It only started with 0.14.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I like what Anthony Short is doing with <a href="https://github.com/dekujs/deku">Deku</a>. I also like the work of Simon Friis Vindum (<a href="https://github.com/paldepind">paldepind</a> on Github).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks a lot for the interview Thomas! I hope people will find your routing solution. To make it easier to dig in, I've compiled a set of resources below:</p>
<ul>
<li><a href="https://router5.github.io/">The official site of router5</a></li>
<li><a href="https://github.com/router5/router5/tree/master/packages/react-router5">router5/react-router5</a> - React bindings</li>
<li><a href="https://router5.github.io/docs/with-react.html#/inbox">Online demo for React</a> - <a href="https://github.com/router5/examples/tree/master/apps/react">Demo source</a></li>
<li><a href="https://github.com/router5/router5/tree/master/packages/redux-router5">router5/redux-router5</a> - Redux bindings</li>
<li><a href="https://router5.github.io/docs/with-react-redux.html#/inbox">Online demo for React and Redux</a> - <a href="https://github.com/router5/examples/tree/master/apps/react-redux">Demo source</a></li>
</ul>
SurviveJS - Webpack and React - v1.9.5asurvivejswebpackandreactv1952015-11-03t00:00:00z2015-11-03T00:00:00Z<p>You could say a lot has happened since <a href="https://survivejs.com/blog/survivejs-19">the previous release</a>. <a href="https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html">React 0.14</a> came out mere hours after it. React DnD gained 0.14 compatibility in its 2.0 release. Node.js reached <a href="https://nodejs.org/en/blog/release/v5.0.0/">5.0.0</a> (v4 is LTS, supported for four years). And a couple of days ago <a href="https://babeljs.io/blog/2015/10/29/6.0.0">Babel 6.0.0</a> was released. In addition <a href="https://github.com/webpack/webpack/pull/861">Webpack 2</a> is in sight.</p>
<p>The purpose of this release is to take some of these changes into account. Most importantly it introduces initial support for React 0.14. Babel hasn't been updated to the newest version yet given some tooling the book relies upon needs to catch up. The book doesn't take advantage of the function based component syntax because of the same reason. As the tooling matures, I'll perform the changes needed.</p>
<p>Due to a twist of fate I had a chance to represent <a href="http://www.jsdelivr.com/">jsDelivr</a>, a free super-fast CDN, at <a href="http://conferences.oreilly.com/oscon/open-source-eu-2015">OSCON EU</a>. It was a great trip and gave some new perspective on what I'm doing at the moment. Besides <a href="http://www.nixtu.info/2015/10/thoughts-on-oscon-2015-amsterdam.html">visiting OSCON</a>, I did a quick visit at <a href="http://www.nixtu.info/2015/10/thoughts-on-blender-conference-2015.html">the Blender conference</a>. It's fun to break the monotony every once in a while.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-9-5" id="book-improvements-1-9-5"></a><span class="text">Book Improvements - <code>1.9.5</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-9-5">#</a></h2>
<p>In total 79 commits went to <code>1.9.5</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.9.0...v1.9.5">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Improved the flow of the chapter and made it more accessible hopefully.</li>
<li>Added <code>host</code> and <code>port</code> configuration. Now you can set those through the env if you want.</li>
<li>Mentioned <em>webpack-dev-server</em> alternatives.</li>
<li>Made the code examples more complete so it's harder to miss vital parts.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Fixed <em>babel-loader</em> to version 5. If version 6 is installed, the current setup will fail as major changes are needed.</li>
<li>Expanded code examples so it's harder to miss vital parts.</li>
<li>Changed the configuration to enable specific features instead of <em>stage 1</em>. This will change further with Babel 6. I believe it's preferable to enable specific features rather than stages as that documents the project better.</li>
<li>Streamlined Babel discussion and removed duplication.</li>
<li>Added React 0.14 specific bits (<em>react-dom</em> most importantly).</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Mentioned React import shortcut. Personally I favor explicit imports as then it's easier to grep around. It's good to be aware of alternatives, though.</li>
<li>Linked to <code>debugger;</code> statement documentation and cleared it up. It matters where you place it.</li>
<li>Explained <code>super</code> behavior in greater detail.</li>
<li>Fixed <code>concat</code> shortcut related typo. It's better to use <code>[...this.state.notes, {id: uuid.v4(), task: 'New task'}]</code> there.</li>
<li>Simplified <em>context</em> discussion now that there is <a href="https://facebook.github.io/react/docs/context.html">official documentation</a> for it.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Explained <code>bind</code> and its behavior in greater detail.</li>
<li>Pushed decorator parts to an appendix of its own. Now the chapter is more digestible and you can check out decorators later if you want.</li>
<li>Changed Alt to use <code>alt-container</code> package. This makes it React 0.14 compatible.</li>
<li>Simplified dispatching discussion to make PDF layout work better.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Discussed alternative ways to deal with data modeling at introduction.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Added <code>react-dnd-html5-backend</code> to the project. Now React DnD backends are available through separate packages.</li>
<li>Explained what the decorator does given this is the first place where we hit them now.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Added a little section about deploying to GitHub Pages. This is one of those small things that makes life simpler.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Upgraded to 0.14. Now React DnD uses a separate package for testing.</li>
<li>Renamed <code>react-testutil-query</code> as <code>teaspoon</code>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react-" id="typing-with-react-"></a><span class="text">Typing with React*</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react-">#</a></h3>
<ul>
<li>Upgraded to 0.14.</li>
<li>Fixed <code>Lane</code> propType definition.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Rewrote portions to improve flow.</li>
<li>Dropped <em>bower.json</em> mention.</li>
<li>Updated <em>package.json</em> example to match <a href="https://survivejs.github.io/react-component-boilerplate/">the boilerplate</a>.</li>
<li>Added a section about publishing packages. Now the workflow should be clearer.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Rewrote portions to improve flow.</li>
<li>Replaced <a href="https://github.com/hackhat/smart-css">smart-css</a> with <a href="https://github.com/jsstyles/jss">JSS</a> as JSS is more current and represents an interesting alternative.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Content-wise there isn't much to do. I want to get the typing chapter to a good shape. Fortunately <a href="http://flowtype.org/">Flow</a> has been developing nicely. The same goes for <a href="http://www.typescriptlang.org/">TypeScript</a>.</p>
<p><a href="https://github.com/yahoo/react-dnd-touch-backend">react-dnd-touch-backend</a> related work is progressing. There are still some initial problems to resolve, though, so I'm not sure if this will make the cut.</p>
<p>Depending on how 0.14 related tooling develops, I may do an intermediate release before <code>v2.0.0</code>. In any case, there's light at the end of the tunnel.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>The most amazing part of this project has been the amount of feedback I've received. I've tried to put it to good use. You can <a href="mailto:info@survivejs.com">contact me directly</a> or through the GitHub <a href="https://github.com/survivejs/webpack_react/issues">issue tracker</a>. Also <a href="https://gitter.im/survivejs/webpack_react">Gitter</a> will work.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
Baobab - Data Trees with Cursors - Interview with Guillaume Pliqueabaobabdatatreeswithcursorsinterviewwithguillaumeplique2015-11-02t00:00:00z2015-11-02T00:00:00Z<p>I remember running into <a href="https://github.com/Yomguithereal/baobab">Baobab</a> through <a href="http://www.christianalfoni.com/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application">Christian Alfoni's post about it</a>. In short, it's a library that provides you optionally immutable data trees with cursors. Admittedly that's quite a mouthful.</p>
<p>In order to understand the topic a little better, it's probably best to let the author, Guillaume Plique, to explain his ideas behind the library.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<figure><img src="/bf9a4ab548cfa85acdeb57dffa196a72.jpg" alt="Guillaume Plique" class="author" width="100" height="100" /><figcaption>Guillaume Plique</figcaption></figure>
My name is Guillaume Plique and I am a full stack developer currently working in Paris for Sciences Po's <a href="https://github.com/medialab">médialab</a> which is a laboratory aiming at gathering people from social sciences, design and IT in order to develop innovative research projects.
</p>
<p>I mostly deal with web mining, graph processing and, of course, UI development. More concretely, my job consists in helping researchers achieve their goals by designing and developing the correct tools for them.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-baobab-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-baobab-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Baobab to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-baobab-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>I guess you could picture Baobab as a mere JavaScript object. As such, you can set its keys, and of course, nest items as you wish. If you do so, you will find yourself with what is commonly known in computer science as a tree (hence the Baobab).</p>
<p>Now this is where the library kicks in: imagine that you can select any particular branch of the tree, because at this precise moment it might be the only part of the tree you are interested in, and subscribe to its updates.</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// Let's create a very simple tree:</span>
<span class="token keyword keyword-var" >var</span> tree <span class="token operator" >=</span> <span class="token keyword keyword-new" >new</span> <span class="token class-name" >Baobab</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-braces" >{</span>
user<span class="token punctuation" >:</span> <span class="token punctuation brackets-braces" >{</span>
name<span class="token punctuation" >:</span> <span class="token string" >'John'</span><span class="token punctuation" >,</span>
surname<span class="token punctuation" >:</span> <span class="token string" >'Doe'</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Selecting a part of the tree by creating a "cursor"</span>
<span class="token keyword keyword-var" >var</span> nameCursor <span class="token operator" >=</span> tree<span class="token punctuation" >.</span><span class="token function" >select</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token string" >'name'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Getting the user's name:</span>
tree<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token string" >'name'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// or</span>
nameCursor<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Listening to the name's updates</span>
nameCursor<span class="token punctuation" >.</span><span class="token function" >on</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'update'</span><span class="token punctuation" >,</span> <span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
console<span class="token punctuation" >.</span><span class="token function" >log</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'The name has changed!'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>Now, let's imagine this tree is meant to hold your whole app's state (think <em>model</em> in a typical MVC architecture) and you have, with cursors, a very straightforward way to plug UI components to it. Just make your component declare the part of the tree they are interested in and they will be re-rendered <strong>only</strong> if required because said part of the tree was updated.</p>
<pre><code class="lang-javascript"><span class="token comment" spellcheck="true" >// A simplistic component displaying the user's surname:</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >component</span><span class="token punctuation brackets-parentheses" >(</span>surname<span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token keyword keyword-return" >return</span> <span class="token string" >'<span>'</span> <span class="token operator" >+</span> surname <span class="token operator" >+</span> <span class="token string" >'</span>'</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token comment" spellcheck="true" >// Rendering logic</span>
<span class="token keyword keyword-var" >var</span> mountNode <span class="token operator" >=</span> document<span class="token punctuation" >.</span><span class="token function" >getElementById</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'surname'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token keyword keyword-function" >function</span> <span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// Getting the surname from our tree</span>
<span class="token keyword keyword-var" >var</span> surname <span class="token operator" >=</span> tree<span class="token punctuation" >.</span><span class="token keyword keyword-get" >get</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token string" >'surname'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Rendering our component</span>
mountNode<span class="token punctuation" >.</span>innerHTML <span class="token operator" >=</span> <span class="token function" >component</span><span class="token punctuation brackets-parentheses" >(</span>surname<span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// Subscribing to the surname's updates</span>
tree<span class="token punctuation" >.</span><span class="token function" >select</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token string" >'surname'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >.</span><span class="token function" >on</span><span class="token punctuation brackets-parentheses" >(</span><span class="token string" >'update'</span><span class="token punctuation" >,</span> <span class="token keyword keyword-function" >function</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span> <span class="token punctuation brackets-braces" >{</span>
<span class="token comment" spellcheck="true" >// The surname has been updated, let's re-render!</span>
<span class="token function" >render</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token punctuation brackets-braces" >}</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// This will trigger a render:</span>
tree<span class="token punctuation" >.</span><span class="token keyword keyword-set" >set</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token string" >'surname'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token string" >'Williams'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
<span class="token comment" spellcheck="true" >// This will not:</span>
tree<span class="token punctuation" >.</span><span class="token keyword keyword-set" >set</span><span class="token punctuation brackets-parentheses" >(</span><span class="token punctuation brackets-square" >[</span><span class="token string" >'user'</span><span class="token punctuation" >,</span> <span class="token string" >'name'</span><span class="token punctuation brackets-square" >]</span><span class="token punctuation" >,</span> <span class="token string" >'Jack'</span><span class="token punctuation brackets-parentheses" >)</span><span class="token punctuation" >;</span>
</code></pre>
<p>As a bonus, the tree's data is persistent and immutable (at least by default, but feel free to tweak this if needed through options). This means that you can easily store its history to go back and forth in time, plus you can perform efficient referential comparisons (<code>O(1)</code>, no diffing involved) between several states of the tree in time. Comparison of states is as simple as:</p>
<pre><code class="lang-javascript">previousData <span class="token operator" >!==</span> nextData
</code></pre>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-baobab-" id="why-did-you-develop-baobab-"></a><span class="text">Why did you develop Baobab?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-baobab-">#</a></h2>
<p>Well, I really enjoy developing in <a href="http://clojure.org/">Clojure</a> from time to time and I grew accustomed to <a href="https://en.wikipedia.org/wiki/Zipper_%28data_structure%29">zippers</a> (a typical data structure you generally encounter in functional programming languages) and I am very fond of cursors such as the ones you can find in the <a href="https://github.com/omcljs/om/wiki/Cursors">Om</a> library (a popular ClojureScript interface to <a href="https://facebook.github.io/react/">React</a>).</p>
<p>So, basically, the idea was to port/re-use those concepts (functional programming is a place full of wonderful concepts) in raw JavaScript. But none of the existing solutions were fitting my needs.</p>
<p>At first, I tried to create cursors for the <a href="https://facebook.github.io/immutable-js/">immutable-js</a> library but finally abandoned because of the mere size of the files that clients would need to load and the quirks of having to use a dedicated API for both get/set operations on the data compared to what you would do with raw JavaScript objects.</p>
<p>Then I stumbled upon React's <a href="https://facebook.github.io/react/docs/update.html">immutability helpers</a> and thought this was mainly what I wanted but needed to go further (the first versions of Baobab's updates specifications were by the way very similar to the MongoDB-like objects used by the aforementioned helpers).</p>
<p>Hence I started developing the first version of Baobab along with its React integration so I could build my UIs the way I wanted. The objectives of the library were therefore the following:</p>
<ol>
<li>The Baobab tree should be able to hold the centralized state of an app and this state could be as complex as any JavaScript object would (simple key/value store without nesting capabilities would not be enough, for instance).</li>
<li>The Boabab tree should support cursors and should dispatch update events correctly so that the rendering of components bound to specific parts of the tree may be optimal.</li>
<li>The data you read from the tree should be raw JavaScript and not some abstraction over it.</li>
<li>The tree's data should be persistent and immutable (I must thank <a href="https://github.com/christianalfoni">Christian Alfoni</a> here for our numerous discussions on the subject when developing the first versions of the library).</li>
</ol>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-" id="what-kind-of-challenges-have-you-experienced-while-developing-it-"></a><span class="text">What kind of challenges have you experienced while developing it?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-it-">#</a></h2>
<p>The main challenges concerned memory structures and optimization. Baobab really sits halfway between raw JavaScript objects and immutable data structures. Remaining as efficient as possible in this case is not the easiest thing. For instance, to ensure persistence and referential comparisons between several states of your tree, I have to shallow clone some parts of it, not the whole tree, of course, but only the updated branch in the tree.</p>
<p>The outcome is that you do have a data structure which is really faster than <a href="https://facebook.github.io/immutable-js/">immutable-js</a> if your objective is to read and handle raw JavaScript objects but which comes with a performance cost on writes. But this cost remain extremely negligible when handling the kind of data we usually use as our app's state. But, obviously, I wouldn't vouch for Baobab, for instance, if you need to store immutable lists containing billions of items and that need to be updated very frequently (i.e. every ~n ms).</p>
<p>To be true, I am still pondering some internal optimizations of the library and the main challenge here is to be able to optimize the general cases and the cases for which the library was created while not falling into the trap of over optimizing edge cases that wouldn't happen normally.</p>
<p>Another challenge was to produce an API as streamlined as possible. What I noticed before starting to develop Baobab was that most of the zippers/cursors libraries existing in JavaScript often have a very complex and verbose API which is, in the end, very difficult to manipulate.</p>
<p>My aim, with Baobab, was therefore to offer the simplest and most polymorphic API so that one could use it easily and without having to be an expert on lambda calculus. I hope I have reached this goal with the current API.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>For now, I need to polish some things, optimize the internals of the library, fix bugs and add some more features to the library. After that, I will start trimming useless parts of the library that no one is using and maybe relocate some of its parts to external libraries (the history helpers might become an external library, for instance).</p>
<p>What I want to avoid is to bloat the library with unnecessary features that would make it evolve into a complex and shapeless blob.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Those are great times for JavaScript as most functional principles finally start to reach web development. To me, UI componentization is key here (mainly symbolized by React and web components nowadays but not only) and will slowly make everyone realize that UIs should be, as far as possible, considered as pure functions. The centralized state of your app is therefore no less than the arguments you pass to such a function.</p>
<p>Building UIs thusly comes with a lot of collateral advantages: UI snapshots, app state storage, time travel, easy hot-reloading etc. and it would be a loss not to embrace them. What's more, functional principles, notably immutability, really make reasoning about complexity easier and make us better developers at the end.</p>
<p>To me, the future also means new tools that should make working on front-end apps more comfortable/enjoyable and hot-loading is just the beginning. The <a href="https://github.com/bhauman/devcards">devcards</a> concept by <a href="https://github.com/bhauman">Bruce Hauman</a> (again, coming from ClojureScript's community) is the very symbol of what we can expect to work with in a near future.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I cannot give you a specific name but I think you should definitely interview someone from the ClojureScript community. We still have a lot to learn from this community which is actively bringing functional concepts to life in modern web development.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Guillaume! In case you want to get started with Baobab, consider the following resources:</p>
<ul>
<li><a href="https://github.com/Yomguithereal/baobab">Baobab project site</a></li>
<li><a href="https://github.com/Yomguithereal/baobab-react">baobab-react</a> - baobab-react implements popular React patterns to make it easier to integrate with Baobab.</li>
</ul>
<p>Note that <a href="https://cerebraljs.com/">Cerebral</a> has Baobab bindings. We <a href="https://survivejs.com/blog/cerebral-interview">discussed the topic earlier</a> with Christian.</p>
React Component Boilerplate v1.0areactcomponentboilerplatev102015-10-22t00:00:00z2015-10-22T00:00:00Z<p>If you <a href="https://github.com/search?utf8=%E2%9C%93&q=react+boilerplate">try searching GitHub for React boilerplates</a>, you'll find over thousand results. Nothing is harder than to agree on a standard boilerplate. As a result we have many to choose from.</p>
<p>Given I like to author React components, such as <a href="http://reactabular.js.org/">Reactabular</a>, I've developed a little boilerplate myself. <a href="https://survivejs.github.io/react-component-boilerplate/">survivejs/react-component-boilerplate</a> incorporates a large amount of good practices. I'll go through some of them next. I cover many of them <a href="..webpack_react/authoring_libraries/">at the book</a> but it doesn't hurt to dig deeper.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#testing" id="testing"></a><span class="text">Testing</span><a class="header-anchor-select" href="https://survivejs.com/#testing">#</a></h2>
<p>I implemented my testing approach based on Cesar Andreu's <a href="https://github.com/cesarandreu/web-app">web-app</a>. It is based on <a href="https://karma-runner.github.io">Karma</a> (test runner), <a href="https://mochajs.org/">Mocha</a> (test framework), <a href="http://chaijs.com/">Chai</a> (assertions), and <a href="http://phantomjs.org/">PhantomJS</a> (headless browser). Code coverage reports are generated through <a href="https://gotwarlost.github.io/istanbul/">istanbul</a> and <a href="https://github.com/douglasduteil/isparta">isparta</a> (Babel compatibility for istanbul). Besides casual <em>npm test</em>, there's also a TDD mode (<em>npm run tdd</em>) so you can run tests automatically while you develop.</p>
<p>Not surprisingly this is where most of the complexity of my boilerplate lies. There's not much I can do about it, though. There are times when I wish npm allowed more granularity. If I could push test dependencies to something like <code>testDependencies</code> or define hierarchies below <code>devDependencies</code>, that would help me to communicate the intent better.</p>
<p>My earlier setup relied on Facebook's <a href="https://facebook.github.io/jest/">Jest</a>. Even though it's easier to hook it up, I find the current approach more developer friendly. I never could get into grips with Jest's auto-mocking behavior and performance was an issue even with small libraries. It is possible the situation will change but for now I'm sticking with Mocha myself. Keep an eye on Jest, though.</p>
<p>Linting is handled through <a href="http://eslint.org/">ESLint</a>. It's an amazing tool and will contribute towards the quality and consistency of your code. Read <a href="..webpack_react/linting_in_webpack/">my chapter about linting</a> to get into it. There's <em>npm run lint</em> and Webpack triggers it as a pre-loader. This way I get linting warnings and errors during develop. In addition I have my editor set up to show them interactively.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#handling-versions" id="handling-versions"></a><span class="text">Handling Versions</span><a class="header-anchor-select" href="https://survivejs.com/#handling-versions">#</a></h2>
<p>An important part of developing libraries is actually publishing them. I've tried to keep this simple. I can get a release out simply by hitting:</p>
<pre><code class="lang-bash">$ <span class="token function" >npm</span> version 0.2.1
$ <span class="token function" >npm</span> publish
$ <span class="token function" >git</span> push
$ <span class="token function" >git</span> push --tags
</code></pre>
<p>I know this could be hidden easily behind a single command but it's not too bad as I might not want to push immediately always. A tool known as <a href="https://www.npmjs.com/package/semantic-release">semantic-release</a> could simplify the workflow further but I haven't adopted it yet. </p>
<p>To make sure I get the right build artifacts out there in the current approach, I've set up a couple of npm hooks like this:</p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
...
<span class="token property" >"scripts"</span><span class="token operator" >:</span> <span class="token punctuation brackets-braces" >{</span>
...
<span class="token property" >"preversion"</span><span class="token operator" >:</span> <span class="token string" >"npm run test && npm run lint && npm run dist && npm run dist-min && git commit --allow-empty -am \"Update dist\""</span><span class="token punctuation" >,</span>
<span class="token property" >"prepublish"</span><span class="token operator" >:</span> <span class="token string" >"npm run dist-modules"</span><span class="token punctuation" >,</span>
<span class="token property" >"postpublish"</span><span class="token operator" >:</span> <span class="token string" >"npm run gh-pages && npm run deploy-gh-pages"</span><span class="token punctuation" >,</span>
<span class="token property" >"postinstall"</span><span class="token operator" >:</span> <span class="token string" >"node lib/post_install.js"</span>
<span class="token punctuation brackets-braces" >}</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p><em>preversion</em> hook makes sure all tests pass, lint included, generates distribution builds, and includes those into a commit. I prefer to maintain the builds this way as it's convenient and I don't feel they bloat the repository too much. So far the approach has worked well.</p>
<p><em>prepublish</em> hook makes sure the npm version of the package gets generated. In short, it just triggers <a href="https://babeljs.io/">Babel</a> over the source and converts possible special features and JSX I'm using into a form that's easy to consume from the Node.js world.</p>
<p><em>postpublish</em> generates the package site and pushes it to the <em>gh-pages</em> branch. The setup is isomorphic and it will convert the project <em>README.md</em> into a HTML structure. This was implemented to make sure the package page works even without JavaScript. There's also a minor SEO benefit. And you get to say that your boilerplate is isomorphic so there's that.</p>
<p><em>postinstall</em> portion is there to make sure that it is possible to consume the package through a GitHub reference (i.e., <code>bebraw/reactabular#hashgoeshere</code>). If I detect that there isn't expected directory, it will trigger <em>npm run dist-modules</em> just like the <em>prepublish</em> process does. The only problem is that the current solution supports only Node.js 0.12+. It would be possible to rewrite that if it becomes an issue.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#pre-push-hook" id="pre-push-hook"></a><span class="text">Pre-push Hook</span><a class="header-anchor-select" href="https://survivejs.com/#pre-push-hook">#</a></h2>
<p>Even though I have <a href="https://travis-ci.org/">Travis CI</a> set up and make it run my tests after each push, I've gone a step further. I like to catch problems before a push. That's why I've set up a pre-push hook through a package known as <a href="https://www.npmjs.com/package/git-prepush-hook">git-prepush-hook</a>. It writes the Git configuration to your repository when you install it. You can control its behavior through <em>package.json</em> by a declaration like this:</p>
<pre><code class="lang-json"><span class="token punctuation brackets-braces" >{</span>
...
<span class="token property" >"pre-push"</span><span class="token operator" >:</span> <span class="token punctuation brackets-square" >[</span>
<span class="token string" >"test"</span><span class="token punctuation" >,</span>
<span class="token string" >"lint"</span>
<span class="token punctuation brackets-square" >]</span>
<span class="token punctuation brackets-braces" >}</span>
</code></pre>
<p>You tell it what npm scripts to execute and it does that before a push. The biggest advantage of doing this is that it allows you to fix potential issues before they end up in public consumption. You can do the fix and then make it look as if you didn't make one through an interactive rebase (<code>git rebase -i</code>). It's one of those Git features that can help to keep your version history sane.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#other-features" id="other-features"></a><span class="text">Other Features</span><a class="header-anchor-select" href="https://survivejs.com/#other-features">#</a></h2>
<p>There's of course <a href="https://github.com/gaearon/babel-plugin-react-transform">React Transform</a> based hot loading. The Webpack configuration is a little elaborate but I've done my best to keep it readable. You can find some usual React related optimizations there (mainly env). The isomorphic portion takes some code as well.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I've been thinking of pushing some of the common parts to a library of its own to ease the maintenance effort. This is the way <a href="https://www.npmjs.com/package/hjs-webpack">hjs-webpack</a> does it. The problem is that a boilerplate is a snapshot always. A library based approach would help in this regard. Most importantly, it would help to cut down the amount of dependencies.</p>
<p>I believe it could be valuable to adopt a tool such as <a href="https://commitizen.github.io/cz-cli/">commitizen</a>. That would make it easier to write meaningful Git commit messages. Even better, the tool can generate change logs for releases.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you'll find my little boilerplate useful. There might be some ideas there you could adopt for your own. Boilerplates are a little problematic maintenance-wise, but as mentioned, it might be possible to alleviate that by pushing the problem elsewhere.</p>
<p>Of course the situation is far worse if you don't have a boilerplate to begin with. Even a small project tends to require quite a few dependencies before you can become productive with it.</p>
React-Bootstrap - Bootstrap Rebuilt for React - Interview with Matt Smithareactbootstrapbootstraprebuiltforreactinterviewwithmattsmith2015-10-13t00:00:00z2015-10-13T00:00:00Z<p><a href="http://getbootstrap.com/">Bootstrap</a> is easily one of the most popular CSS frameworks out there. Beyond grids and basic layout utilities, it provides a nice set of widgets to use. Even though you can use the CSS with React, this may become cumbersome quite soon. You will likely end up wrapping portions of Bootstrap within components of your own.</p>
<p><a href="https://react-bootstrap.github.io/">React-Bootstrap</a> is a project that solves this problem for you. To understand the project better, I'm interviewing Matt Smith, one of the authors.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author" style="float: right">
<img src="https://www.gravatar.com/avatar/2edcba3f73592de39dc2e83826e22fe2?s=200" alt="Matt Smith" class='author' width='100' height='100' />
</span>
I have been writing software since I was in High School back in the 90s. I wasn't able to land my first real job though until the mid 2000s as a QA Engineer. Automating the UI of desktop applications I didn't write was not what I'd call fun, though the learning experience was immeasurable.
</p>
<p>Shortly after that I was serving in the United States Marine Corps Reserve which required a break from coding to serve a 1 year tour of duty in Al Ramadi, Iraq. Soon after my return I was able to find a new job where I built a number of internal web applications for my employer.</p>
<p>It was there that I first tested out the waters of OSS Development. I mainly stayed in the realm of the C# or .Net community until about two years ago when I started branching out. Writing well crafted quality software is my passion.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-react-bootstrap-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-react-bootstrap-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe React-Bootstrap to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-react-bootstrap-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>React-Bootstrap is a collection of React Components that are primarily designed to work with
Bootstrap CSS classes. Bootstrap does provide some JavaScript but it's tightly coupled to jQuery which does not play well with React idioms. We aim to provide parity with Bootstrap CSS in functionality and styling, though we differ in the JavaScript API.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-react-bootstrap-" id="why-did-you-develop-react-bootstrap-"></a><span class="text">Why did you develop React-Bootstrap?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-react-bootstrap-">#</a></h2>
<p>I didn't that credit goes to <a href="https://github.com/stevoland">Stephen J. Collings (stevoland)</a> and <a href="https://github.com/pieterv">Pieter Vanderwerff (pieterv)</a>. Though when I came into the picture active development on React-Bootstrap wasn't really going anywhere. From what I could tell it had been abandoned, though the number of issues and pull requests kept growing.</p>
<p>The design team at our dev shop has been using a slightly modified version of Bootstrap for years, and when we started moving to React we found React-Bootstrap. We were using Angular and didn't use a core UI library leaving us to implement a lot of the Bootstrap JavaScript ourselves in an Angular world. We didn't want to make that mistake again so we grabbed a hold of React-Bootstrap pretty quick.</p>
<p>At the same time that we started this transition to React, we were also going after Section 508 and WCAG 2.0 AA Compliance. We were continually finding that the React-Bootstrap components are not compliant so we wanted to contribute back.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-react-bootstrap-" id="what-kind-of-challenges-have-you-experienced-while-developing-react-bootstrap-"></a><span class="text">What kind of challenges have you experienced while developing React-Bootstrap?</span><a class="header-anchor-select" href="https://survivejs.com/#what-kind-of-challenges-have-you-experienced-while-developing-react-bootstrap-">#</a></h2>
<p>As I mentioned earlier, the React-Bootstrap project felt like a dead project around February/March of 2015. The release up on npm at that time didn't even work nor had it for a few months. I had submitted a PR or two prior to that time so I reached out to Stephen and Pieter to ask if there was anything I could do to help. They were kind enough to include me in the organization and granted me push access to npm.</p>
<p>The npm release was broken because there was a tedious manual process in place to build the JSX code and manually push that to the Bower repo and Docs repo. Most of my background is in DevOps build engineering so this was something that I knew I could fix. I moved the project from the old JSX Transformer tools and Browserify to Babel and Webpack. This made the Bower release and Docs site easier to build and develop against. Then I automated the push to those separate repos on GitHub. Common tools for this with Grunt and Gulp just weren't fast enough for me, so I rolled our own tailored experience.</p>
<p>During this time I was also working to triage issues and review/accept pull requests from the community. On most issues I was quick to say that I'd accept a pull request, which many people did do. This presented the next biggest problem, which was around the Firehose of issues and pull requests that just kept coming in.</p>
<p>It was at this time that me employer sent me to the <a href="http://dotnetfringe.org/">.Net Fringe</a>
conference. At my dev shop we have been active contributors to OSS in the .Net ecosystem for years, and this was a conference devoted to that community. While at that conference a large number of the sessions were mainly focused on breaking down the barriers that folks encounter when contributing to OSS projects. The basic undertone I walked away from that was that we as an open source community need to reach out to those that are testing out the OSS waters and welcome, no pull, them in with a warm embrace.</p>
<p>I was already feeling overwhelmed with the number of issues and pull requests that were coming in on React-Bootstrap and my colleagues in the office didn't have the bandwidth to really help. Some of them have tried, but viewed it as a second class citizen to our development efforts. I can't entirely blame them for this since most of our code was still in Angular. So there was a huge cost benefit deficit competing for attention with the newer features we were getting asked to produce by the business.</p>
<p>It was at this time that I reached out to the more frequent pull request authors that showed attention to testing and documentation with an invite to join the organization. I worked on improving the Contributing Guide and Maintaining Guide to stand as a governance for this growing team. In a sense I didn't want to see the project cease progression again because of my own inabilities to keep up. I also knew that I would be moving off our front-end sites in the coming months to head up a DevOps team.</p>
<p>Many folks did accept the invite to join the organization and we haven't really heard much from them since. Though there were others that did accept the invite and are now thriving contributors. In fact I'd say that <a href="https://github.com/taion">Jimmy Jia (taion)</a> and <a href="https://github.com/jquense">Jason Quense (jquense)</a> now stand as the current technical leads with <a href="https://github.com/AlexKVal">Alexander Shemetovsky (AlexKVal)</a> as the bulldog that just keeps fixing everything he can as fast as he can.</p>
<p>I can say that my goal to build a community that worked together to continue building the project was a success that continues to refine the project.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>React-Bootstrap still has some work to achieve Section 508 and WCAG 2.0 AA compliance, at which point we'll declare a 1.0 release. We'll need to keep up with React and Bootstrap to keep the project up to date with the latest features of both projects.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>The future of React is undeniably bright. I have full confidence in the core community involved in defining the best practices for building these front-end frameworks and tools.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Jimmy and Jason would have more current insight to the affairs of React-Bootstrap.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks a lot for the interview Matt! I hope React-Bootstrap will have a bright future and more people will find the project. There's a <a href="https://react-bootstrap.github.io/getting-started/introduction">getting started guide</a> for those interested. Also check out <a href="https://react-bootstrap.github.io/components/alerts/">the component listing</a> to get a better idea of the capabilities of the library.</p>
SurviveJS - Webpack and React - v1.9.0asurvivejswebpackandreactv1902015-10-07t00:00:00z2015-10-07T00:00:00Z<p>Compared to <a href="https://survivejs.com/blog/survivejs-18">1.8.0</a>, <code>1.9.0</code> can be seen as a more conservative release. There are plenty of smaller fixes and even some new content too. I decided to fix the chapter structure to the current. I rather provide less but better content. This also helps to keep the cost of a paper version down.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#towards-2-0-0" id="towards-2-0-0"></a><span class="text">Towards <code>2.0.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#towards-2-0-0">#</a></h2>
<p>Besides integrating changes (thanks Steve!) and ideas, I gave <code>2.0.0</code> some proper thought. With <code>2.0.0</code> I will finally try to get the book to Amazon while getting it printed through them. This means I'll need to get a proper ISBN for the book. Only smaller tweaks, such as grammar fixes, are allowed after this. That's a little problematic.</p>
<p>The way I see it, the smartest move would be to treat <code>2.0.0</code> as an Amazon snapshot while developing the book further at Leanpub (<code>2.1.0</code> and so on). Once <code>3.0.0</code> is reached, Amazon would get a new snapshot. I don't expect <code>3.0.0</code> to happen anytime soon, though, as that wouldn't be fair to the Amazon customers that bought <code>2.0.0</code>. Perhaps a yearly cycle would work. That would mean a minor release per month.</p>
<p>In order to keep it fair to potential Amazon clients, I'm willing to provide the Leanpub version for them using a heavily discounted upgrade cost. I'm a still fuzzy on the exact details but there has to be a neat transition path in place.</p>
<p>Getting the book printed is a huge step for me personally. It's great unknown but you don't get ahead unless you put in the effort. At the very least I will get something for my bookshelf if nothing else. The printing costs seem adequate given the current scope of the book. The print version will likely have to be black and white to keep the cost bearable but apart from that we should be good.</p>
<p>Ideally the book will continue to provide some level of income as that enables me to keep developing the content and technology around it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-1-9-0" id="book-improvements-1-9-0"></a><span class="text">Book Improvements - <code>1.9.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-1-9-0">#</a></h2>
<p>In total 134 commits went to <code>1.9.0</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.8.0...v1.9.0">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#general-fixes" id="general-fixes"></a><span class="text">General Fixes</span><a class="header-anchor-select" href="https://survivejs.com/#general-fixes">#</a></h3>
<ul>
<li>Grammar was improved overall. Big thanks again Steve!</li>
<li>Move from <code><ul className='names'></code> format to <code><ul className="names"></code>. This is the format that official React documentation uses so it's better to use the same here as well.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>Linked to alternative implementations of Kanban. See <a href="https://github.com/survivejs-demos/mobx-demo">MobX</a>, <a href="https://github.com/survivejs-demos/redux-demo">Redux</a>, and <a href="https://github.com/survivejs-demos/cerebral-demo">Cerebral/Baobab</a> demos.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h3>
<ul>
<li>Explained in more detail what Webpack actually does.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Noted that <em>css-loader</em> requires some tweaking when using Node 0.10. See <a href="https://github.com/webpack/css-loader/issues/144">the issue</a> for details.</li>
<li>Dropped <em>node-libs-browser</em> from project dependencies. Webpack depends on it directly now.</li>
<li>Explained why <em>html-webpack-plugin</em> is used.</li>
<li>Pushed configuration paths to higher level. This way it's easier to tweak them to fit your personal projects.</li>
<li>Mentioned <a href="https://www.npmjs.com/package/open-browser-webpack-plugin">open-browser-webpack-plugin</a>. There are small plugins like this that save time once you have set them up.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Dropped <em>babel-core</em> as <em>babel-loader</em> depends on that directly.</li>
<li>Replaced deprecated <em>react-hot-loader</em> with a <a href="https://github.com/gaearon/babel-plugin-react-transform">babel-plugin-react-transform</a> based solution. Even though it takes more configuration, it's more powerful. I recommend moving your projects to it if you are using <em>react-hot-loader</em>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Mentioned <code>debugger;</code> statement. I realized this is a feature not many people are aware of. It's good to have it mentioned as a tip.</li>
<li>Mentioned that spread operator can be used to replace <code>concat</code>. I.e., instead of <code>this.state.notes.concat({id: uuid.v4(), task: 'New task'})</code> you could do <code>[...this.state.notes, [{id: uuid.v4(), task: 'New task'}]]</code>. You see this particularly in Redux examples so it's good to know.</li>
<li>Explained why we have to retain the state at <code>App</code> level. We'll push that to a nicer place in the following chapter of course.</li>
<li>Link to <a href="https://github.com/casesandberg/react-context/">feature detection</a> example as that showcases well when to use a context.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Expanded on Flux explanation. Now we start from a unidirectional flow and show how that becomes a cycle in the architecture.</li>
<li>Noted that <code>{notes}</code> is analogous to <code>{notes: notes}</code> and linked to <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">property shorthand</a> documentation. We are using this shorthand a lot so it's worth discussing it.</li>
<li>Explained by I don't use <code>splice</code> although it would work here.</li>
<li>Dropped matryoshka image. That was a poor analogy. Better to save the space for something else.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Passed Lane data through <code>lane</code> prop instead of object spreading. It is easier to understand what's going on in this solution.</li>
<li>Explained why Object rest spread syntax is used when it's used.</li>
<li>Explained why <code>waitFor</code> is used in a clearer manner.</li>
<li>Fixed the ordering between <code>LaneActions.detachFromLane</code> and <code>NoteActions.delete</code>. It is a very good idea to detach a note from a lane before actually removing it from the system. Else you might end up trying to render notes that don't exist.</li>
<li>Noted that it would be a very good idea to get rid of notes associated to a lane when a lane is removed.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Showed how to indicate where to move a note while you are moving. This improves user experience somewhat.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Simplified JSX related Webpack configuration. This was possible because <em>react-hot-loader</em> was dropped.</li>
<li>Moved cache invalidation hashes back to filenames. I'm going to take <a href="http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/">Steve Souders</a>' word on it.</li>
<li>Dropped the section about isomorphic rendering. That felt like a kludge and you would never do it like this in a real world configuration. As a result I removed it from the book. It is a far better idea for me to discuss the topic in a blog post of its own later on.</li>
<li>Explained how to analyze your Webpack build statistics using <a href="http://webpack.github.io/analyse/">the online tool</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react-" id="testing-react-"></a><span class="text">Testing React*</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react-">#</a></h3>
<ul>
<li>Rewrote the introduction and added testing pyramid to get better into the topic.</li>
<li>Updated configuration to work with the adjusted setup (no <em>react-hot-loader</em>).</li>
<li>Linked to more associated tooling.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react-" id="typing-with-react-"></a><span class="text">Typing with React*</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react-">#</a></h3>
<ul>
<li>Fixed <code>Lane</code> related <code>propTypes</code>. There were a couple of glitches to fix.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Explained why <code>preLoaders</code> is used for linting. These get executed first. If a linter fails, you'll want to know about it before doing anything else.</li>
<li>Explained how to enable specific ES6 features with ESLint. Of course as we go through <em>babel-eslint</em>, we can skip that but it's good to know.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Explained how <code>style-loader</code> and <code>css-loader</code> work in tandem.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I originally intended to have this release to include React 0.14 related fixes. Rather than to keep you waiting, I decided to push those to <code>2.0.0</code>. An intermediate <code>1.9.5</code> might be possible but we'll see.</p>
<p>The book content is fixed and I'll perform tweaks only to the current content. I'm most interested in expanding the sections about Flow and TypeScript. Even though Flow has been developing fast, there are still some issues I have to wrestle with.</p>
<p>I also have to look into integrating <a href="https://github.com/yahoo/react-dnd-touch-backend">react-dnd-touch-backend</a>. I've done some preliminary work on that and hope to get included it in <code>2.0.0</code>.</p>
<p>I have a variety of blog content coming up. It's the perfect place for me to play with ideas in a more freeform manner. As I stated earlier, getting that Amazon release done is the biggest hurdle for me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy this release. As usual <a href="https://github.com/survivejs/webpack_react/issues">feedback</a> and pull requests are welcome.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
Cerebral - Expressing Application Flow with Signals - Interview with Christian Alfoniacerebralexpressingapplicationflowwithsignalsinterviewwithchristianalfoni2015-10-05t00:00:00z2015-10-05T00:00:00Z<p>I ran into <a href="http://www.christianalfoni.com/">Christian Alfoni</a> through his original blog early this year (2015). He had written a nice post about Webpack. That led me to provide a several suggestions and I realized we might want to combine some of our knowledge in the form of a <a href="https://christianalfoni.github.io/react-webpack-cookbook/">React/Webpack cookbook</a>. Eventually the development led to this book so I suppose you can blame Christian for that.</p>
<p>While I've been plugging away with the book, Christian has been busy developing cool technology. This includes <a href="https://github.com/christianalfoni/EmptyBox">EmptyBox</a>, a static site generator, <a href="https://github.com/christianalfoni/formsy-react">formsy-react</a>, a form input builder and validator for React, and of course <a href="https://cerebraljs.com/">Cerebral</a>, the primary topic of our interview. You could say it puts some brains to React and Angular development. We'll also discuss <a href="https://github.com/christianalfoni/addressbar">addressbar</a>, a routing solution with a twist.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-did-you-discover-webpack-and-react-can-you-provide-a-bit-of-background-" id="how-did-you-discover-webpack-and-react-can-you-provide-a-bit-of-background-"></a><span class="text">How did you discover Webpack and React? Can you provide a bit of background?</span><a class="header-anchor-select" href="https://survivejs.com/#how-did-you-discover-webpack-and-react-can-you-provide-a-bit-of-background-">#</a></h2>
<p>
<figure><img src="/a3ec41be3805962e3c90ccdbbb8e32fb.jpg" alt="Christian Alfoni" class="author" width="100" height="100" /><figcaption>Christian Alfoni</figcaption></figure>
I had saved up some money and chose to quit my job the summer of last year (2014). I wanted to spend 6 months on my own researching web technologies and play around with projects. I feel kinda lucky that way, as obsessed I am with JavaScript and building things I now got the chance to level up. At my previous employer I left a Backbone app with a Grunt workflow. Before that it was all vanilla JavaScript… crazy, but learned a lot!
</p>
<p>So I suppose my timing was good. I started my expedition by diving into Angular, but now both React and Flux started to get some solid ground. Not being too opinionated by Angular I instantly saw the benefits of the “one way flow” of Flux. Now I had a strong concept of storing any kind of state, it being from the server or produced on the client. This was a huge issue at my previous employer, sharing client side state between views and keeping it in sync.</p>
<p>At the same time, I was exploring Gulp and saw this video where Pete Hunt introduced Webpack. As I had time on my hands, I decided to make an overview of different build tools and write an article on it. It got some attention and the feedback gave me the confidence to share more knowledge. Other developers were actually interested in what I had to say. It was a big eye opener!</p>
<p>When comparing the build tools I realized that Webpack was awesome, but had one big issue. It was hard to understand and configure. With my new earned confidence in sharing knowledge I wrote a new article. This one got even more attention, also by you Juho. It is amazing to see all the work you have done after that little comment. You have done fantastic work!</p>
<p>Anyways, around this time I got a job offer and since I soon needed income I grabbed the opportunity. My employer wanted to build a React framework for their huge application portfolio. I suggested we use Webpack to handle all the packaging, use ES6 etc. It has been a great success and that led to the last article on <a href="http://www.christianalfoni.com/articles/2015_04_19_The-ultimate-webpack-setup">The ultimate Webpack setup</a>.</p>
<p>I often get questions about combining Webpack with other build tools like Grunt or Gulp. I have never been in a situation where that is necessary. Webpack is just a brilliant piece of engineering and it makes my day so much easier. Other projects like <a href="http://jspm.io/">JSPM</a> are interesting though. We are moving towards HTTP2 and bundling files does not fit in with that technology. It will be interesting to see how this pans out! <a href="https://mattwilcox.net/web-development/http2-for-front-end-web-developers">More info</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-cerebral-how-would-you-describe-it-to-someone-who-has-never-heard-of-it-what-next-" id="why-did-you-develop-cerebral-how-would-you-describe-it-to-someone-who-has-never-heard-of-it-what-next-"></a><span class="text">Why did you develop Cerebral? How would you describe it to someone who has never heard of it? What next?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-cerebral-how-would-you-describe-it-to-someone-who-has-never-heard-of-it-what-next-">#</a></h2>
<p>Even though Flux made a lot of sense to me as a concept, the implementation details did not. In my opinion it is a bit verbose and many stores gave me the same problems that Flux fixed in my view layer. Like circular dependencies and just understanding the flow of state changes.</p>
<p>Then I found <a href="https://github.com/Yomguithereal/baobab">Baobab</a>, a single state tree. It fixed all the issues I had with the initial Flux implementation and kept the concept of “one way flow”. All my state was now in one place. No dispatcher and no splitting state into different “containers”. I wrote <a href="http://www.christianalfoni.com/articles/2015_02_06_Plant-a-Baobab-tree-in-your-flux-application">an article on this too</a>.</p>
<p>Now I was actually pretty happy about developing applications. With React I got a great concept for composing my view layer. With Baobab I got a great concept for storing all my state in a single entity. But there was still a problem… the stuff that happens "in between". The layer that actually produces the state.</p>
<p>As this was bugging me I got some “a-ha” moments. One "a-ha" was a video on “turning the database inside out” and talking to a backend colleague about it. I also got an "a-ha" watching a clip on <a href="http://elm-lang.org/">Elm</a> with its time travel debugging. Most importantly though, I got my head around why immutability is so great. One day everything kinda merged into one big “A-HA” moment.</p>
<p>No matter what you call your architecture it has three main layers. A layer to produce UI and get user input, a layer to handle this input and produce state and a layer to store the state. I wanted to make these three layers as clear and simple as possible. So I thought a lot about what this state changing layer looks like today. How do we actually express handling these inputs from the view layer and update our state?</p>
<p>What I realized is that we often do this with a single function. We get some user input and call a function that does one or more state updates. This is fine if you just want to increase/decrease a counter. It is not so nice if you want to handle more than one HTTP response and do other conditionals.</p>
<p>It is difficult to understand the flow of an application reading implementation details. So I wanted to express the state changes of my app without having to dive into implementation details. I also wanted to be able to analyze this flow to create developer tools. Reading your <a href="https://survivejs.com/blog/redux-interview">interview with Dan Abramov</a> I can totally relate to how Redux got started. With Cerebral it is the signals the makes this possible.</p>
<p>Signals is a way to express state changes in your application using pure functions. These pure functions, called actions, are composed into a signal. This makes a signal declarative. It is almost like reading a sentence and it can be complex without being hard to read and reason about. But it is also functional as these actions are just functions. So for example factories is an important part of expressing your state flow.</p>
<p>As signals are arrays of actions you can also use the new spread operator. This allows you to compose action chains together with ease. So a signal never calls or depends on other signals, you just reuse actions. “Composition over inheritance”.</p>
<p>So Cerebral is this layer between your state storing and UI. It handles the complex part of your application, state changing flow. It is a single powerful entity representing the layer between state and ui, as displayed here:</p>
<p><figure><img src="/d2543ad75e5e1f64596bee7ffcbdc4ad.png" alt="Cerebral is between the state and the UI" class="center-image" width="425" height="510" /><figcaption>Cerebral is between the state and the UI</figcaption></figure></p>
<p>Running the debugger next to the UI gives you insight into all these three layers. The UI, the state changing flow and the current state of the application. It is pretty cool!
About the future of Cerebral. I have been working on a project for a year now.</p>
<p>When the Cerebral idea came up, I got a breakthrough. I decided to apply for some funding and what do you know, I got it! From October 1st I will spend most of my time on this project and Cerebral. For Cerebral this means cleaning up any bugs/API and make it production ready.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-describe-what-addressbar-https-github-com-christianalfoni-addressbar-is-about-given-there-are-so-many-routers-already-why-to-develop-yet-another-one-" id="can-you-describe-what-addressbar-https-github-com-christianalfoni-addressbar-is-about-given-there-are-so-many-routers-already-why-to-develop-yet-another-one-"></a><span class="text">Can you describe what <a href="https://github.com/christianalfoni/addressbar">addressbar</a> is about? Given there are so many routers already, why to develop yet another one?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-describe-what-addressbar-https-github-com-christianalfoni-addressbar-is-about-given-there-are-so-many-routers-already-why-to-develop-yet-another-one-">#</a></h2>
<p>So routers have two main concepts. Listen to url changes and act upon url changes. Different routers has their own implementation of how they listen to url changes. They also have different and opinionated ways of acting upon those changes. Some routers just triggers a function related to a url change, like <a href="https://visionmedia.github.io/page.js/">Page JS</a>. Most of them goes way beyond this though. Often routers dive into the view layer of your application and decides what views to display.</p>
<p>As applications are complex you often want to load some data before doing the actual change in the view. Your router now fetches data for you to achieve this. But this data is something you want to store so now your router also needs a relationship with your state store. Some of them also do transitions in the UI. In my opinion this increases complexity as you already have concepts for this. View updates, ajax requests, transitions etc. are things you already do in the general state changing flow of your app.</p>
<p>Inspired by React I got this idea about the addressbar not being this magical URL thing. Just a plain input you could listen to and change the value of. If that was the case I think a lot of developers would have a much lower threshold to experiment with urls. Create their own custom routing logic. Something that makes sense for the specific application.</p>
<p>As a result I built a project called <a href="https://github.com/christianalfoni/addressbar">addressbar</a>. It just exposes the addressbar as an input you can listen to. You can also prevent default behaviour on it and change the value of it. Now you can focus on the important part, creating the routing logic.</p>
<p>So one way of doing routing is to map the url to a url definition which in turn triggers a function. With help from a couple of guys on the Cerebral gitter channel we created the project <a href="https://github.com/christianalfoni/url-mapper">url-mapper</a>. Combine “addressbar” with “url-mapper” and you have yourself a typical router. Much like the Page JS approach. But I think there are many other approaches to handling URL changes.</p>
<p>An example of this is the Cerebral Router. It uses both “addressbar” and “url-mapper” to bind URLs to signals. This means that you can trigger signals in your app and the bound url will update in the addressbar. If you trigger the url from a hyperlink or in the addressbar that will result in the same behaviour. So it works both ways.</p>
<p>You do not have to do a typical route change to update the url, it is just a side-effect of running a signal. This gives you great freedom in developing your application. You just think about these signals that defines the state changing flow of your app. You can actually bring in URLs into your app later if you wanted to. This might not make complete sense just reading about it, but I have a <a href="https://www.youtube.com/watch?v=PZjXPziD9Cw">video</a>.</p>
<p>So to summarize. I think it would benefit us to think about routing differently. When I read discussions on routing they often tend to be “How can we make the router change the views in the app?”. I might be a bit controversial, but I think that is the wrong approach.</p>
<p>Let's say you have an “isLoading” state. You use that state in your views to toggle a “loading-indication”. Why can not the url “/messages” set a state called “currentPage=’messages’”? You would then use the exact same approach to render the correct page. It is just less complex in my opinion because now a url change is a state change like any other. No special logic and you can go about it however you want.</p>
<p>I am going a bit off trail here! What I want to emphasize here is that addressbar lowers the threshold for developers. The threshold to explore urls in new ways. Creating new experiences and evolve urls to mean something more. Not just “what view to display”, but for example “what signal to trigger” like the Cerebral-Router.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#at-the-moment-a-lot-of-architecture-related-innovation-seems-to-happen-what-do-you-think-of-alternative-approaches-such-as-mobx-https-mobxjs-github-io-mobx-or-redux-http-redux-js-org-" id="at-the-moment-a-lot-of-architecture-related-innovation-seems-to-happen-what-do-you-think-of-alternative-approaches-such-as-mobx-https-mobxjs-github-io-mobx-or-redux-http-redux-js-org-"></a><span class="text">At the moment a lot of architecture related innovation seems to happen. What do you think of alternative approaches such as <a href="https://mobxjs.github.io/mobx/">MobX</a> or <a href="http://redux.js.org/">Redux</a>?</span><a class="header-anchor-select" href="https://survivejs.com/#at-the-moment-a-lot-of-architecture-related-innovation-seems-to-happen-what-do-you-think-of-alternative-approaches-such-as-mobx-https-mobxjs-github-io-mobx-or-redux-http-redux-js-org-">#</a></h2>
<p>So I think a lot of innovation lately has been improving stores in Flux. It can be a bit difficult to reason about them. Projects like MobX and Redux do exactly this. They make it easier to reason about how to store state. It is amazing to see how much attention Redux has gotten. The community is enthusiastic and contributes a lot with their own ideas. Kudos to Dan for inspiring so many developers and handling it so well!</p>
<p>Personally I have not dived into MobX and Redux. For me it was Baobab that made the difference, which had an earlier release. It is a single immutable state tree storing all the state of your application.</p>
<p>So both Redux and MobX make Flux simpler. That said, I think there are still challenges to tackle. I am going to compare these two projects to Cerebral, but only to highlight what Cerebral does. I am not saying that any of them are bad.</p>
<p>Both the solutions mentioned here hides state from the other state entities. It being reducers or stores. Take note that Redux does indeed produce a single state tree by combining its reducers. But inside a reducer, you do not have access to the whole tree as far as I know.</p>
<p>So many entities to store state is in my experience a challenge. Large applications often need to know about state in other stores/reducers when producing new state. This is often related to relational data, like looking up state by id. I do not think an approach where you isolate different parts of your state is the way to go.</p>
<p>You risk creating relationships which can be hard to reason about and even create. If you just have one entity, there is no relationship, which makes it easier to reason about and scale your app. This is what I like about <a href="https://github.com/Yomguithereal/baobab">Baobab</a>. It is impossible to go wrong in how you structure your state.</p>
<p>But Baobab does not have any concepts for producing state. In Redux you produce state in the reducer itself or in combination with an async action creator. MobX does this inside the stores. What these two have in common, like many others, is that producing a state change is expressed with a single function. You have to read the implementation details of this function to understand it. This is easy when you want to add a todo or change a counter, but our applications are more complex than that.</p>
<p>I think the concept of expressing a “state changing flow” is where we have to go next. Cerebral is a contribution to this. Libraries like <a href="http://cycle.js.org/">Cycle.js</a> uses FRP concepts to express this flow. I thought about this for Cerebral, but to me it is hard to reason about complex flows using FRP.</p>
<p>RxJS has so many methods and most examples converts input to a single state change. App flows are a lot more complex than that. HTTP responses, conditionals, multiple state changes, relational data, optimistic updates etc. I just really really want it declared as one flow.</p>
<p>But FRP in JavaScript is still in its early adoption and I am not trying to state FRP as a bad thing at all. I just think its current form is too difficult to use for the common JavaScript developer. André Staltz is doing fantastic work with Cycle.js. Making FRP more developer friendly for application development. Evan Czaplicki, creator of Elm, is also doing a tremendous effort. I think both Dan and André will agree that Evan has been a great inspiration for our contributions.</p>
<p>I just want to say that I think it is great that everybody is so open to sharing what they build. Also sharing theories on how we can make development more fun than painful. What works and makes sense to people is what inspires the next step of this evolution.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-">#</a></h2>
<p>What developers miss out on with React is that it is not related to templating at all. React is not a templating engine, it is a rendering engine. It has a lot more in common with game rendering engines than Handlebars etc. This makes React able to render to different targets in lightning speed. In the browser that would be the DOM, but it can render to whatever. So getting projects like React Native is great!</p>
<p>What I also think trips developers up is that components in React are not views. They are closer to defining a single HTML tag than defining a complete view in your application. This unlike templates. I can see how scary a component would be if you copied an Angular template into it… the thing is, you would never do that.</p>
<p>Also JSX is controversial and is partly guilty in tripping developers up on what React is. I have been using it from the start and love it. I understand why developers used to working with HTML templates does not embrace it though. Often overlooking what React is all about. It is just sad and I think this will continue to be an unfair challenge for Reacts adoption.</p>
<p>It is also a matter of Web Components. React JS, as I understand it, does not support Web Components. Now, I do not think Web Components will be app specific building blocks at all. I think they will be <code><GoogleMap/></code>, <code><GoogleDocs/></code>, <code><Youtube/></code> types of tags. Web Components will just become new superpowered HTML tags that we can use globally in our apps, like the existing tags.</p>
<p>So why do I say that? The problem with Web Components, as far as I know, is that they are loaded globally. You do not have a good way to wrap these components into modules. But maybe I am just not getting it! Anyways, React will have a missing feature if it is unable to render these new HTML tags. I think we will import a lot of them in the future.</p>
<p>So to summarize I think React is here to stay for a long time. It will be exciting to see how Ember and Angular catches up with their new rendering solutions too. As I understand they will also support native development and web components.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>It would be interesting to talk to someone invested in FRP. Who uses it for something more than counters and lists. Since you already interviewed André, it would be great to get Evan in here too. And if you do, tell him thanks for all his great work :-)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Christian! I hope the best of luck with your projects. It is always inspiring to see alternative solutions like these to pop up.</p>
<p>If you became interested in Cerebral, consider checking out <a href="https://gitter.im/christianalfoni/cerebral">gitter</a> or <a href="https://github.com/survivejs/cerebral-demo">Cerebral port of Kanban</a>. You can also try running <a href="https://chrome.google.com/webstore/detail/cerebral-debugger/ddefoknoniaeoikpgneklcbjlipfedbb">Cerebral Chrome debugger plugin</a> against <a href="http://www.christianalfoni.com/todomvc/">TodoMVC demo</a>.</p>
ShaderFrog - Building a WebGL Shader Editor and Composer - Interview with Andrew Rayashaderfrogbuildingawebglshadereditorandcomposerinterviewwithandrewray2015-09-28t00:00:00z2015-09-28T00:00:00Z<p>It's always impressive when people take an idea and turn it into a concrete service. <a href="http://andrewray.me/">Andrew Ray</a> did this with his <a href="http://shaderfrog.com/">ShaderFrog</a>. It's a portal where you can design 3D shaders using WebGL. Most interestingly, it has been developed using React.</p>
<p>As building tools such as this isn't easy, I'm primarily curious to know why Ray picked React and what sort of challenges he faced during the development of his service.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-did-you-discover-webpack-and-react-can-you-provide-a-bit-of-background-" id="how-did-you-discover-webpack-and-react-can-you-provide-a-bit-of-background-"></a><span class="text">How did you discover Webpack and React? Can you provide a bit of background?</span><a class="header-anchor-select" href="https://survivejs.com/#how-did-you-discover-webpack-and-react-can-you-provide-a-bit-of-background-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/b3a21f6147bcc6bd9d997d5cc5b5f87c?size=200" alt="Andrew Ray" class='author' width='100' height='100' />
</span>
The front-end ecosystem is constantly morphing, so we have to stay on top of front-end news. That's how I heard about React, most likely from Hacker News. The path to Webpack was natural from there. Many example projects use Webpack and there's a lot of Webpack and React development overlap in the community.
</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-shaderfrog-how-would-you-describe-it-to-someone-who-has-never-heard-of-it-what-next-" id="why-did-you-develop-shaderfrog-how-would-you-describe-it-to-someone-who-has-never-heard-of-it-what-next-"></a><span class="text">Why did you develop ShaderFrog? How would you describe it to someone who has never heard of it? What next?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-shaderfrog-how-would-you-describe-it-to-someone-who-has-never-heard-of-it-what-next-">#</a></h2>
<p>I built ShaderFrog to solve a problem that no one was aware existed. I was making a WebGL 3d browser game, where your character is a bubble in an underwater environment. To make a <a href="http://shaderfrog.com/app/view/147">bubble look convincing visually</a> you have to have a few effects, such as reflection and refraction. The program that draws these effects is called a "shader."</p>
<p>It tells the computer how to "shade" a 3d object. I also had a <a href="http://shaderfrog.com/app/view/30">fireball powerup</a>, and I wanted to show the player getting the powerup by combining the fire effect (a shader) and the bubble effect (another shader).</p>
<p>That meant I had to take these two programs and combine them together by hand, and essentially add their output color together. It was quite tedious, and I thought I could build a tool to automate the process. That's how ShaderFrog was born.</p>
<p>ShaderFrog is a tool to design effects called shaders for 3d games and applications in a visual environment without writing code. There are still plenty of features to add, and it's still finding its place in the world. Right now I'm continuing to build out more features and doing some marketing.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-choose-to-use-react-for-the-project-which-alternatives-did-you-consider-" id="why-did-you-choose-to-use-react-for-the-project-which-alternatives-did-you-consider-"></a><span class="text">Why did you choose to use React for the project? Which alternatives did you consider?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-choose-to-use-react-for-the-project-which-alternatives-did-you-consider-">#</a></h2>
<p>As a front-end developer for most of my career, React feels like the first framework that got it "right." I had previously tried Angular and Backbone, and toyed with Ember, but none of them felt like they actually helped me solve complex UI problems.</p>
<p>One of React's biggest benefits is it stays as close to normal Javascript paradigms as possible. You don't have to understand <code>$scope</code> or learn a huge API like Backbone. It's just functions and Javascript classes. Even JSX is just HTML and Javascript.</p>
<p>Learning Flux was a steep hill for me, but in the end you're basically writing event listeners and plain Javascript objects. Server side rendering was very important to me too. I honestly feel like without React, I could not have built ShaderFrog.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-sort-of-challenges-did-you-encounter-during-development-what-would-you-do-differently-" id="what-sort-of-challenges-did-you-encounter-during-development-what-would-you-do-differently-"></a><span class="text">What sort of challenges did you encounter during development? What would you do differently?</span><a class="header-anchor-select" href="https://survivejs.com/#what-sort-of-challenges-did-you-encounter-during-development-what-would-you-do-differently-">#</a></h2>
<p>React is a newcomer to the field and we're still figuring out how to do things correctly. CSS is the easiest target. React is teaching me that CSS is a fundamentally flawed concept and that our newest iteration of inline styles, or <a href="https://github.com/css-modules/css-modules">CSS Modules</a>, is a welcomed future. There is plenty of legacy CSS in ShaderFrog that I am embarrassed by, but at least I can see the light at the end of the tunnel.</p>
<p>I faced some challenges specific to making a 3d editor. I need to maintaining 60 frames per second constantly. For example, let's say I have three lights moving around my scene. Every time their position changes, I have to fire an action through Flux, which triggers many component updates.</p>
<p>If you do this three times per <code>requestAnimationFrame</code>, you get two unnecessary virtual DOM comparison checks. The solution to this problem was to "batch" the Flux calls until the last one, so my stores only emit once per loop, removing unnecessary work.</p>
<p>When I first started work on ShaderFrog, I didn't fully understand Flux, so I built a few things using event listeners binding to specific data properties. This code is still in my application, and it's often a source of bugs, and more difficult to reason about than the Flux code. If I could change things I would have stuck more closely to the Flux pattern, because every time I diverge, it causes me problems and increased cognitive load.</p>
<p>Server side rendering was also a big challenge. React has an unspoken idea that you get server side rendering for free, but this is very far from the truth. For static pages, yes, it's easy to render some components to an HTML string. For dynamic pages that require data pre-fetching that must be done differently on the client and the server, there are countless edge cases. I hope that in the future, Relay solves many of these problems.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-">#</a></h2>
<p>React has paved a bright future of front-end development, but React probably isn't the end of the road. A better virtual DOM library may come out. We've already seen the evolution of the Flux pattern with Redux, and the evolution of CSS with inline and CSS modules. I would definitely say we're moving towards more computer science principles boosting the productivity of the front-end.</p>
<p>We're moving towards more componentization, less coupling, and more portability. React has shown many front-end developers the true power of an entirely self contained component. I think these principles will continue to drive the productivity and enjoyment of front-end development forward.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>I have no idea! :)</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Andrew! I wish you great success with <a href="http://shaderfrog.com/">ShaderFrog</a>.</p>
<p>I remember writing little shaders of my own in the past. If you've ever wondered what to use math for, well, here's a good application. You can actually put operations, such as <code>mod</code>, into use here! It's amazing how little operations can make nice patterns.</p>
<p>To get started, <a href="http://shaderfrog.com/app">pick up a shader</a> you like and start modifying. If you want to dig into theory, you can't go wrong with NeHe's material. They've written <a href="http://nehe.gamedev.net/article/glsl_an_introduction/25007/">an introduction to GLSL</a>.</p>
<p>Feel free to share your shaders at the comments.</p>
Cycle.js - Reactive Framework for HCI - Interview with André Staltzacyclejsreactiveframeworkforhciinterviewwithandrestaltz2015-09-21t00:00:00z2015-09-21T00:00:00Z<p>If there's one thing that has been bubbling below for a couple of years now, it must be reactive programming. There have been solutions, such as <a href="https://github.com/Reactive-Extensions/RxJS">RxJS</a> or <a href="https://github.com/baconjs/bacon.js">bacon.js</a>, but they haven't quite made it to the mainstream yet. I feel the time for that might be close, though.</p>
<p><a href="http://cycle.js.org/">Cycle.js</a> builds on top of RxJS and characterizes itself as a fully reactive JavaScript framework for Human-Computer Interaction. The question of course is what that means. André Staltz, the author of Cycle.js, is the best person to tell us.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-" id="can-you-tell-a-bit-about-yourself-"></a><span class="text">Can you tell a bit about yourself?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-a-bit-about-yourself-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/d992db0c8f42fcee52f96dc320f8aa04?s=200" alt="André Staltz" class='author' width='100' height='100' />
</span>
I am a UI developer at Futurice in Finland, with extensive knowledge in reactive programming. In my daily work I build web apps and Android applications, and on my free time I build open source libraries such as Cycle.js and contribute to ReactiveX.
</p>
<p>A lot of people have read the <a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">Introduction to Reactive Programming you've been missing</a> that I wrote in the summer of 2014, or have seen <a href="http://RxMarbles.com">RxMarbles</a>. That is how most people know me.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-cycle-js-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-cycle-js-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Cycle.js to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-cycle-js-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. These event streams might sound magical, but they are pretty simple. They are similar to arrays in reality, except they evolve over time instead of being static.</p>
<p>A simple Cycle.js app might take an array-like sequence of clicks and output an array-like sequence of DOM elements. So essentially coding is just describing how to dynamically transform a stream of user events into a stream of interface elements.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-cycle-js-" id="why-did-you-develop-cycle-js-"></a><span class="text">Why did you develop Cycle.js?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-cycle-js-">#</a></h2>
<p>I started developing Cycle.js after I took React for a spin and was disappointed with its API. I initially got really excited about the Virtual DOM concept in React, but could not understand why the API is built on OOP classes, state mutation, and imperative event handlers. There is a mismatch between React’s foundational ideas (reactive rendering and UI as pure function of state) and its implementation means (OOP, classes, imperative programming).</p>
<p>Cycle.js is a React alternative where implementation matches foundational ideas by applying functional and reactive programming to the extreme. The result is a tiny API surface where everything is either a function or an RxJS Observable.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I have been slowly learning more about hard core functional programming, in other words Haskell. I have also been experimenting with Elm, a more approachable Haskell alternative for the Web.</p>
<p>I have many plans on what to develop next. My time will probably be mainly focused on improving Cycle.js: making it simpler to use, building integrations with React Native, integrating the upcoming rewritten RxJS by Netflix, etc. But I hope to join efforts with the pure functional programming community, be it <a href="https://www.haskell.org/">Haskell</a>, <a href="http://elm-lang.org/">Elm</a>, or <a href="http://www.purescript.org/">PureScript</a>.</p>
<p>Cycle.js has a lot of functional techniques but JavaScript is not a language that supports functional programming well enough. I miss the types, the immutability, and the clean syntax.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React and front-end in general? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-and-front-end-in-general-can-you-see-any-particular-trends-">#</a></h2>
<p>Functional programming is definitely a trend in the front-end community. React is also at the center of this trend. I recall Sebastian Markbåge mentioned multiple times in his interview at React Europe that React is all about functional programming and how to introduce it in a clever way to people unfamiliar with this paradigm.</p>
<p>It seems there are still a lot of unsolved problems regarding APIs. In modern JavaScript, we use functional and reactive techniques, often mixed with some imperative programming. One on hand, imperative programming is familiar and simple for many of us, but functional and reactive have amazing benefits often hidden behind obscure terminology. Yet these two sides are often incompatible in the same application.</p>
<p>The community will need to actively experiment with alternatives, and we need to start considering transpiled functional languages (PureScript, Elm) more and more if our techniques are mainly functional anyway. I am not convinced we have stable best practices and good guiding principles in how to architect applications. Cycle.js is just one attempt at finding that guiding principle.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Evan Czaplicki. I was skeptic about Elm before meeting him, but after meeting him in person, I strongly believe his work with Elm is doing a great service to the whole community in bringing functional programming to a level most of us can digest. Evan has vision, is enthusiastic, reads Computer Science papers, and has a ton of great and wild ideas.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks a lot for the interview André! Perhaps a programming model as demonstrated by Cycle.js is the future. It always takes time for the community to warm up to the ideas. Interestingly there's a proof of concept that implements <a href="https://github.com/jas-chen/thisless-react">thisless React</a>, inspired by Cycle.js of course!</p>
<p>If this interview made you interested in Cycle.js, consider the following resources:</p>
<ul>
<li><a href="http://cycle.js.org/getting-started.html">Getting started guide</a>. I set up a small <a href="https://github.com/survivejs/cycle-starter">boilerplate</a> to help you get up to speed faster.</li>
<li><a href="https://github.com/cyclejs/cycle-time-travel">Time traveling with Cycle.js</a></li>
<li><a href="https://gist.github.com/eschwartz/c8a98275e014b43ea6f0d3b8876d67ac">A Dead-Simple Todo List with Cycle.js</a> by Edan Schwartz</li>
<li><a href="https://gitter.im/cyclejs/cycle-core">Online support through Gitter</a></li>
<li><a href="https://github.com/vic/awesome-cyclejs">Awesome Cycle.js</a> contains a lot more.</li>
</ul>
Redux - Reinventing Flux - Interview with Dan Abramovareduxreinventingfluxinterviewwithdanabramov2015-09-14t00:00:00z2015-09-14T00:00:00Z<p>I remember seeing these strange <code>webpack.config.js</code> files in JavaScript projects for a long time. I didn’t give <a href="https://webpack.github.io/">Webpack</a> a good look until the promise of hot loading with React drew me in. <a href="https://twitter.com/dan_abramov">Dan Abramov</a>’s <a href="https://github.com/gaearon/react-hot-loader">React Hot Loader</a> was life changing for me.</p>
<p>Besides React Hot Loader, Dan is behind well-known projects such as <a href="https://gaearon.github.io/react-dnd/">React DnD</a> and <a href="http://redux.js.org/">Redux</a>. Redux in particular has begun to make waves across the community even though it’s a young project. Compared to earlier <a href="https://facebook.github.io/flux/docs/overview.html">Flux</a> inspired implementations it is particularly small (~2k) yet powerful.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-did-you-discover-react-can-you-provide-a-bit-of-background-" id="how-did-you-discover-react-can-you-provide-a-bit-of-background-"></a><span class="text">How did you discover React? Can you provide a bit of background?</span><a class="header-anchor-select" href="https://survivejs.com/#how-did-you-discover-react-can-you-provide-a-bit-of-background-">#</a></h2>
<p>
<figure><img src="/5154916f130998044607903ae0d64f0d.jpg" alt="Dan Abramov" class="author" width="100" height="100" /><figcaption>Dan Abramov</figcaption></figure>
I think it’s a typical story. In 2014, when I was working at <a href="http://stampsy.com">Stampsy</a>, we needed to pivot from an iPad app to a webapp in a matter of a few months. We only knew Backbone so we went with it, but as the app grew more dynamic and complicated, we knew we couldn’t use it for much longer.
</p>
<p>However, we also decidedly did not adopt any opinionated data binding library because we wanted to maintain a simple mental model of what’s happening in the app. At some point in time, there was a widget with a dozen of different states that occurred several times on the page, and we knew we <em>had</em> to throw some data binding library into the mix.</p>
<p>A coworker of mine suggested React a few month before, but I shrugged at JSX and didn’t investigate. So he suggested it again, and I decided to go for it. The same evening, I got this widget working exactly as I wanted, and I was hooked. Over the course of the next nine months, we gradually rewrote the Backbone app into a React app. Then React Router came along, and we migrated fully. All the while adding new features.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#as-i-ran-to-you-through-react-hot-loader-what-motivated-you-to-develop-the-project-in-the-first-place-" id="as-i-ran-to-you-through-react-hot-loader-what-motivated-you-to-develop-the-project-in-the-first-place-"></a><span class="text">As I ran to you through React Hot Loader what motivated you to develop the project in the first place?</span><a class="header-anchor-select" href="https://survivejs.com/#as-i-ran-to-you-through-react-hot-loader-what-motivated-you-to-develop-the-project-in-the-first-place-">#</a></h2>
<p>There were a couple of factors.</p>
<p>Firstly, it was watching our designer <a href="https://twitter.com/kkga_">Gadzhi</a> struggle with tweaking components inside modal windows. (By the way, Gadzhi created <a href="https://github.com/kkga/spacegray">Spacegray</a>, which is still more popular than any of my projects!)</p>
<p>Every time he’d change some tiny piece of UI, he’d have to refresh, open that modal, find that widget, discover that something is wrong, and change it again, over and over. It was even more painful with widgets like autocomplete, or dynamic widgets that change their state too quickly.</p>
<p>Secondly, I read a book on Erlang when I was a teenager, and it said something that changed my life forever:</p>
<p><figure><img src="/49237d4d6e78c110844fba22f53d01c0.jpg" alt="Pure functions can be replaced while the application is running" class="center-image" width="400" height="400" /><figcaption>Pure functions can be replaced while the application is running</figcaption></figure></p>
<p>Thirdly, I was in awe of Bret Victor’s videos.</p>
<p>At some point I was reading Webpack docs and it described something mysterious called <a href="https://survivejs.com/webpack/appendices/hmr/">hot module replacement</a>. I <a href="http://stackoverflow.com/q/24581873">asked about it</a>, and <a href="http://stackoverflow.com/a/24587740">Tobias answered</a>. I realized I could mix HMR with React, and this was the birth of React Hot Loader.</p>
<p>I don’t think React Hot Loader is important as a piece of tech—it’s really not—but I definitely see people’s expectations of web tooling capabilities raise, and I’m happy if my work helped this. <a href="https://github.com/elm-lang/elm-reactor">Elm</a> and <a href="https://github.com/bhauman/lein-figwheel">ClojureScript</a> community are doing exciting work in this field, and I’m happy that JavaScript community is now paying more attention to the functional programming and developer experience it enables.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#how-would-you-describe-redux-to-someone-who-has-never-heard-of-it-" id="how-would-you-describe-redux-to-someone-who-has-never-heard-of-it-"></a><span class="text">How would you describe Redux to someone who has never heard of it?</span><a class="header-anchor-select" href="https://survivejs.com/#how-would-you-describe-redux-to-someone-who-has-never-heard-of-it-">#</a></h2>
<p>First of all, it’s tiny (about 2k). If you remove sanity checks that prevent common beginner mistakes, it’s 1K. I’m not saying this to brag, and I’m not obsessed with microlibraries. However, this should give you an idea about the scope of the project.</p>
<p>Although it is often used instead of Backbone, Flummox, or some other Flux-inspired library, the size of the API surface is comparable to the original <a href="https://github.com/facebook/flux">Flux</a> package.</p>
<p>Why would you use it? Redux embraces immutability and <a href="https://youtu.be/1uRC3hmKQnM?t=15m26s">ties your hands to free your mind.</a> If you developed a complex JavaScript application, you might have fallen into one of two traps:</p>
<ul>
<li>using mutable models in asynchronous code which is later impossible to trace, understand, modify, or refactor;</li>
<li>using a framework that promised to solve this problem, and then spending hours debugging the guts of this framework and working around its limitations.</li>
</ul>
<p>Redux is my attempt to answer the following question: what is the least opinionated API surface useful for predictably managing state of complex apps with a <a href="https://github.com/gaearon/redux-devtools">great developer experience</a>? What hooks do we need to expose to create <a href="https://github.com/xgrommx/awesome-redux">an ecosystem</a> around a 2K library?</p>
<p>There is nothing new in Redux: David Nolen has been talking about benefits of a single immutable state tree <a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs">for two years now</a>, and Evan Czaplicki has made an enormous effort to describe the <a href="https://github.com/evancz/elm-architecture-tutorial">Elm architecture</a> from which Redux borrows its ideas.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-did-you-develop-redux-" id="why-did-you-develop-redux-"></a><span class="text">Why did you develop Redux?</span><a class="header-anchor-select" href="https://survivejs.com/#why-did-you-develop-redux-">#</a></h2>
<p>I didn’t mean to create a Flux framework. When React Europe was first announced, I proposed a talk on “hot reloading and time travel” but to be honest I had no idea how to implement time travel. I thought about it for a while, and I knew there was prior art in <a href="http://elm-lang.org">Elm</a>, so I read <a href="https://github.com/evancz/elm-architecture-tutorial">Elm Architecture</a>, but forgot about it soon. I attempted to create a “Flux Hot Loader” but it was full of horrible hacks to work around all the side effects inside Flux Stores: registering a handler, managing subscriptions.</p>
<p>I wanted the logic of the Stores to be hot reloadable so I tried to move subscriptions and registering outside the Stores. I also realized I needed to guarantee the data to be immutable. I remembered how Pete Hunt and others described Flux Stores as <code>state, action => state</code>, and how Jing Chen suggested me to replay actions for hot reloading. So all of this was in my head, but I was still prototyping when I released Redux 0.1.0.</p>
<p>I had these “stateless Stores” (now we call them reducers) that take <code>state</code> and <code>action</code> and return the next <code>state</code>. This let me implement hot reloading for their logic. However, there was still a big missing piece: I had this “dispatcher” thing from Flux that would call those “stateless Stores”.</p>
<p>Then Andrew Clark <a href="https://gist.github.com/acdlite/9f1b5883d132ad242323">suggested</a> we just combine reducer functions into a single reducer function. This would kill the need for dispatcher. Just like UI component tree has one component at the root, different reducer functions can be called from a single root reducer function. Later I realized that this is exactly <a href="https://github.com/evancz/elm-architecture-tutorial">Elm architecture</a>, and I just didn’t understand it at first.</p>
<p>This is how Redux came to be. I was trying to write some code for a fancy React Europe demo, but it turned out that people really liked the architecture, so I marketed it as a library, although there is really very little code there.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I am happy to have moved Redux to <a href="http://github.com/reactjs">reactjs</a> where we share ownership of quality React-related code. I’ve been doing things on my own for quite a while, and lately it’s been more stressful because of the attention my work is receiving, so I intend to <a href="http://250bpm.com/blog:50">step back</a> from the active maintenance of Redux once I’m happy with it. (And I almost am.)</p>
<p>Andrew Clark is collaborating with <a href="https://reactjs-training.com/">Ryan and Michael</a> on the <a href="https://github.com/acdlite/redux-react-router">React Router integration</a>—people have been asking for it for a long time, so I’m full of joy this is finally happening.</p>
<p>I have released <a href="https://github.com/gaearon/react-transform-boilerplate">a few new tools</a> that are going to obsolete React Hot Loader. I will write a post describing them in greater detail soon. I am also going to work on screencasts about Redux, as I promised in <a href="https://www.patreon.com/reactdx">my Patreon campaign</a>.</p>
<p>And then—who knows?—I might even take a day job!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#at-the-moment-a-lot-of-architecture-related-innovation-seems-to-happen-what-do-you-think-of-alternative-approaches-such-as-mobx-https-mobxjs-github-io-mobx-or-cerebral-https-cerebraljs-com-" id="at-the-moment-a-lot-of-architecture-related-innovation-seems-to-happen-what-do-you-think-of-alternative-approaches-such-as-mobx-https-mobxjs-github-io-mobx-or-cerebral-https-cerebraljs-com-"></a><span class="text">At the moment a lot of architecture related innovation seems to happen. What do you think of alternative approaches such as <a href="https://mobxjs.github.io/mobx/">MobX</a> or <a href="https://cerebraljs.com/">Cerebral</a>?</span><a class="header-anchor-select" href="https://survivejs.com/#at-the-moment-a-lot-of-architecture-related-innovation-seems-to-happen-what-do-you-think-of-alternative-approaches-such-as-mobx-https-mobxjs-github-io-mobx-or-cerebral-https-cerebraljs-com-">#</a></h2>
<p>I am not the right person to ask, as I have not used them. I’m definitely in awe of the work Christian has been putting into Cerebral and the <a href="http://www.youtube.com/watch?v=xCIv4-Q2dtA">developer experience behind it</a>. Its concept of signals and expressing async flow declaratively is <a href="https://github.com/reactjs/redux/issues/343">also very interesting</a>.</p>
<p>My hope with Redux is that it’s extensible enough that great ideas and patterns find its way into it as userland extensions like <a href="https://redux.js.org/introduction/ecosystem#middleware">Redux middleware</a>. My other hope is that migrating <em>from</em> Redux to something better won’t be difficult because of its tiny API surface.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-">#</a></h2>
<p>Look no further than <a href="https://www.youtube.com/watch?v=Zemce4Y1Y-A">Sebastian’s talk</a>. We’re going to see more <a href="https://medium.com/@mjackson/universal-javascript-4761051b7ae9">universality</a>. We’re going to see both cross-platform, as well as platform-specific components for DOM, server, native, <a href="https://github.com/gaearon/react-blessed-hot-motion">console</a>, WebGL, you name it.</p>
<p>With the advent of <a href="http://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html">pure functions as components</a>, we’re also entering the era of a new kind of universality: components that work across libraries. If you don’t use imperative APIs, what’s the different between a React component function, Deku component function and a Cycle component function? Only the rendering backend and element factories. If you use JSX, you can literally replace the view framework, and pure function components will “just work” with the new engine.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p><a href="https://twitter.com/andrestaltz">André Staltz</a>, creator of <a href="http://cycle.js.org/">Cycle</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Dan! It has been certainly amazing to see how much React has evolved within a year. And of course we can thank you for some of the innovation - hot loading and Redux in particular.</p>
<p>It was straight-forward to port the <a href="https://github.com/survivejs/redux-demo">Kanban example of the book to Redux</a>. There's a lot of familiar code. It has been just structured a little differently. It is easy to understand what's going on.</p>
<p>If Redux piqued your interest, check out <a href="http://redux.js.org/">the official documentation</a> to get started. Even though the library is tiny, it comes with high quality documentation. See the following resources for more:</p>
<ul>
<li><a href="http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html">Full-Stack Redux Tutorial</a></li>
<li><a href="https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4">Tutorial: Handcrafting an Isomorphic Redux Application (With Love)</a></li>
<li><a href="https://github.com/happypoulp/redux-tutorial">happypoulp/redux-tutorial</a></li>
</ul>
SurviveJS - Webpack and React - v1.8.0asurvivejswebpackandreactv1802015-09-13t00:00:00z2015-09-13T00:00:00Z<p>We have once more new chapters in the book. I'm going to try a new model with these. For now the full versions of the testing and typing chapters will be available through <a href="https://leanpub.com/survivejs_webpack_react">Leanpub</a> only. The community version will contain TLDR;s for these so you still get the core points. Of course the project source is public for examination.</p>
<p>By doing this I want to give my supporters a small edge. As a result they'll get the access to the new material first. If it looks like this works, I don't mind developing more content and opening old as new chapters get developed. Consider it as a poor man's Kickstarter. We can even agree on goals if that works better.</p>
<p>Pricing-wise I've bumped the minimum price of the book to $20 as I believe that reflects its current value. I may do another bump later on as I understand how the situation develops.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-v1-8-0" id="book-improvements-v1-8-0"></a><span class="text">Book Improvements - <code>v1.8.0</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-v1-8-0">#</a></h2>
<p>In total 137 commits went to <code>v1.8.0</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.7.5...v1.8.0">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#general-fixes" id="general-fixes"></a><span class="text">General Fixes</span><a class="header-anchor-select" href="https://survivejs.com/#general-fixes">#</a></h3>
<ul>
<li>Grammar was improved overall. Big thanks Steve!</li>
<li><em>app/main.js[x]</em> was renamed as <em>app/index.js[x]</em>. This simplifies Webpack entry configuration as you can point directly to <code>app</code>. This resolves to the index file within the directory and saves some hassle.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-and-react" id="webpack-and-react"></a><span class="text">Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-and-react">#</a></h3>
<ul>
<li>Mentioned <a href="https://code.visualstudio.com/">Visual Studio Code</a>. This free editor has grown fast. It gained JSX support in <code>v0.8.0</code>.</li>
<li>Fixed basic JSX example. A React component should return a single node.</li>
<li>Linked to a <a href="https://medium.com/@housecor/react-s-jsx-the-other-side-of-the-coin-2ace7ab62b98">blog post about JSX shock</a>. It goes more detail about the experience.</li>
<li>Updated Webpack example to use <code>eval-source-map</code> instead of <code>eval</code>. This is consistent with the earlier chapter. In our case we can avoid <code>eval</code>. Even though it's faster we can afford to go for quality.</li>
<li>Explained <code>resolve.extensions</code> in detail. Simply put this Webpack property allows us to control the way it matches against files (is it ok to skip extension or not).</li>
<li>Moved Babel to use <code>.babelrc</code>. This will become even more important in the future as <a href="https://github.com/gaearon/babel-plugin-react-transform">react-transform</a> Babel plugin will replace the current hot loader.</li>
<li>Documented how to control <code>.babelrc</code> based on env easily. This is important when you want to perform branching based on your build target.</li>
<li>Mentioned about <a href="https://github.com/facebook/react-devtools">React Developer Tools</a>. They give you a better idea of what's going on at your code. Available for both Chrome and Firefox.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Noted that hot loading won't pick up changes made to a <code>constructor</code>. It simply replaces method contents so these get missed. It would be nice to find a good alternative to those <code>bind</code> statements that is performant and works with hot loading.</li>
<li>Explained what <code>super()</code> actually does. Simply put it invokes the same method of the parent class.</li>
<li>Mentioned that using a <em>context</em> might be a viable option for dealing with <code>onEdit</code>. It is currently and undocumented feature. Dmitry Kudryavtsev goes into a good detail at his article <a href="https://medium.com/@skwee357/the-land-of-undocumented-react-js-the-context-99b3f931ff73">The land of undocumented react.js: The Context</a>. React 0.14 will introduce a stable context API and it's worth discussing then.</li>
<li>Caught possible <code>alt.bootstrap</code> related exception. It can fail if it receives data it cannot interpret. Better to deal with that than to blow up.</li>
<li>Linked to Sebastian Markbåge's expanded explanation of <a href="https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81">JSX spread attributes</a>.</li>
<li>Made <code>get(ids)</code> more tolerant against missing data. Now it doesn't return possible empty (<code>undefined</code> or such) results. Of course getting that sort of data at <code>localStorage</code> isn't a good idea in the first place but sometimes it's a good idea to be a little defensive.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Pushed <code>ItemTypes</code> below <em>app/constants/itemTypes.js</em>. Given they are constants that feels like the right place for those. I noticed this while implementing the <a href="https://github.com/survivejs/redux-demo">Redux version of the Kanban</a>.</li>
<li>Expanded explanations. I tend to go somewhat terse on my first pass of content. Now I've expanded on possibly clear parts so it's easier to see what's going on and why.</li>
<li>Passed <code>id</code> instead of <code>data</code> to <code>Note</code>. This change simplified <code>move</code> logic somewhat and it goes according to <a href="https://en.wikipedia.org/wiki/Law_of_Demeter">the law of Demeter</a>.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Dropped redundant references to <code>TARGET</code>. Now we can avoid setting <code>TARGET</code> at <em>package.json</em> as we deduce the target based on npm lifecycle information.</li>
<li>Noted that peeking at the warnings Uglify.js, the minifier, provides can be beneficial.</li>
<li>Expanded on splitting <code>app</code> and <code>vendor</code> bundles. Now it's easier to see what's going on and, most importantly, why.</li>
<li>Noted <code>ExtractTextPlugin</code> related gotchas. It won't work through <code>loader</code> form. Instead you have to use <code>loaders: [ExtractTextPlugin.extract('style', 'css!autoprefixer')]</code> or such. If you need to use multiple loaders with it, note the syntax! You should use the <code>!</code> form in the second parameter to add more if needed.</li>
<li>Noted that <a href="https://github.com/webpack/webpack/issues/1315">chunkhash seems to be broken</a> at the moment. For now I would suggest generating hashes of your own but I understand it's a heavy solution. Hopefully this one gets fixed soon.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#testing-react" id="testing-react"></a><span class="text">Testing React</span><a class="header-anchor-select" href="https://survivejs.com/#testing-react">#</a></h3>
<p>This is a new chapter! The chapter can likely use some work still. I'll probably cover techniques such as mocking in the future but the basic setup inspired by Cesar Andreu's <a href="https://github.com/cesarandreu/web-app">web-app</a> is there. We also get some tests done so that's good.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#typing-with-react" id="typing-with-react"></a><span class="text">Typing with React</span><a class="header-anchor-select" href="https://survivejs.com/#typing-with-react">#</a></h3>
<p>This is another new chapter. In the chapter I show how to annotate our project using <a href="https://facebook.github.io/react/docs/reusable-components.html">propTypes</a>. This is one of those steps you should take to solidify your project.</p>
<p>There is a basic introduction to <a href="http://flowtype.org/">Flow</a>. Unfortunately the current version is missing some functionality our project would need. I have to get back to this later as the tool develops further.</p>
<p><a href="http://www.typescriptlang.org/">TypeScript</a> will receive JSX support in 1.6. That's another tool I want to cover once it gets out.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#linting-in-webpack" id="linting-in-webpack"></a><span class="text">Linting in Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#linting-in-webpack">#</a></h3>
<ul>
<li>Rewrote introduction to be easier to approach.</li>
<li>Mentioned about <a href="https://eslint.org/blog/2015/09/eslint-v1.4.0-released">ESLint autofixing</a>. This is a feature that allows you to fix certain linting errors automatically. As it's new, not a lot of rules are supported yet.</li>
<li>Explained ESLint env configuration detail. That's important to know especially when you are dealing with multiple environments and testing tools.</li>
<li>Added <a href="http://editorconfig.org/">EditorConfig</a>. This tool allows you to maintain project-wide coding style. There's a good level of editor/IDE support. It's a valuable tool in a team environment.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Expanded on <code>npm adduser</code> and mentioned <code>npm login</code> alias to clear up confusion.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Mentioned <a href="https://learnboost.github.io/stylus/">Stylus</a>.</li>
<li>Added "resources" sidebar to the site. I'll be setting similar ones for other chapters. I'll likely push this to a separate repository so it's easier to contribute.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>Given there's a <a href="https://facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html">release candidate of React 0.14</a> out there, it likely doesn't take that long for a final version to appear. This will lead to some important changes in the book. Most importantly it will allow me to default to function syntax for components. In addition I can dig into features such as context.</p>
<p>Once I'm convinced that <a href="https://github.com/gaearon/babel-plugin-react-transform">babel-plugin-react-transform</a> is stable enough and that it works well with the project, I'll change my recommendation to it. It's already worth a look.</p>
<p>I'll also develop the content based on your feedback. The site may receive some small updates. I would love to do something about the highlighting of the code examples and improve the way the are laid out (show added/removed lines better).</p>
<p>I'll write at least one more chapter for my Leanpub readers. The way the situation develops determines the rest.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy this release. As usual <a href="https://github.com/survivejs/webpack_react/issues">feedback</a> and pull requests are welcome.</p>
<p>I'm still a little conflicted about Amazon and dead tree versions. One option is that I'll do a snapshot (<code>v2.0.0</code>) that will be published. Leanpub version would then continue from there. Amazon buyers would obviously receive a heavy discount on Leanpub. It's more about reaching more people with the work than anything else.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
Front-end Singularity and How to Deal with Itafrontendsingularityandhowtodealwithit2015-09-06t00:00:00z2015-09-06T00:00:00Z<p>Technological progress is both exhilarating and terrifying thing. And by the looks of it, it just keeps on progressing faster and faster. This has lead to an idea of technological singularity. As singularity is reached, technology develops so fast humans can't keep up with the progress anymore. It feels like something similar is happening with front-end development right now.</p>
<p>This is a topic I've had to ponder about for a presentation known as <a href="https://survivejs.github.io/frontend-in-2015/">Frontend in 2015 - Clear the Decks</a>. I believe the term "clear the decks" gets to the gist of it. Embrace change.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-big-bang-of-frameworks" id="the-big-bang-of-frameworks"></a><span class="text">The Big Bang of Frameworks</span><a class="header-anchor-select" href="https://survivejs.com/#the-big-bang-of-frameworks">#</a></h2>
<p>As <a href="https://twitter.com/geraldyeo/status/640036032138846208">Gerald Yeo put it</a>, we're experiencing an explosion of frameworks - a big bang. We've gone from literally nothing to an amazing amount of alternatives. Add libraries, such as React, to that and you end up with a massive ecosystem.</p>
<p><a href="https://www.npmjs.com/">npm</a> alone has over 180k packages to give you a sense of scale. By this rate it will reach million packages by 2020 as it keeps growing faster and faster. Of course the growth comes with problems of its own. How do you find the good packages and know which ones are maintained well?</p>
<p>From the perspective of a developer this means it's impossible to keep up with the development. Even as a book author I have trouble keeping up. I can only imagine how difficult it is for normal developers that have their hands full keeping the boat from sinking.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-hype-cycle" id="the-hype-cycle"></a><span class="text">The Hype Cycle</span><a class="header-anchor-select" href="https://survivejs.com/#the-hype-cycle">#</a></h2>
<p>This all ties to the concept of <a href="https://en.wikipedia.org/wiki/Hype_cycle">the hype cycle</a>. In the context of JavaScript that's something we're experiencing constantly. Each framework and new technique goes through the cycle. After initial excitement you will face the reality. Eventually the situation will stabilize and, of course, something new will come along. To quote Teletubbies, "Again-Again"!</p>
<p>As new solutions become available, they can learn from the earlier efforts. For instance, you can see the influence of React in Angular 2.0 and other up and coming frameworks. Eventually the most powerful ideas make it to the standards (i.e. Web Components). In turn this allows libraries and frameworks to collaborate.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#working-across-boundaries" id="working-across-boundaries"></a><span class="text">Working Across Boundaries</span><a class="header-anchor-select" href="https://survivejs.com/#working-across-boundaries">#</a></h2>
<p>No matter what solution you are using, there's always room for collaboration. Even though we might choose our "side" and prefer some specific stack, the world is never black and white. I believe this is the reason why shared, lower level constructs, such as ones enabled by Web Components, are so important.</p>
<p>Ideally Web Components will make it possible to work across boundaries. Instead of having separate bindings of <a href="http://getbootstrap.com/">Bootstrap</a> per framework, it would be more beneficial to have canonical bindings which to consume. Hopefully the world moves into that direction.</p>
<p>Interestingly Angular 2.0 can consume Web Components already and I can only hope others will follow the suit. Anything we can do to enable collaboration across boundaries is worth it. npm has shown that already but we can go further than that.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#preparing-for-the-future" id="preparing-for-the-future"></a><span class="text">Preparing for the Future</span><a class="header-anchor-select" href="https://survivejs.com/#preparing-for-the-future">#</a></h2>
<blockquote>
<p>The future is already here — it's just not very evenly distributed. - William Gibson</p>
</blockquote>
<p>There's no telling what the world will look like in a year. It's easier to look back and see how antiquated things were. Progress happens so gradually it can be difficult to realize it. Some bleeding edge developers are already experiencing the future while mainstream is behind in many ways. Of course sticking to the bleeding edge implies a certain amount of pain.</p>
<p>It is hard to prepare for the future as so many things are possible. When it comes to software architecture it may be a good idea to design for change. As new winds blow, you may want to rethink your approach. As a result the architecture has to live. Web development is organic by definition. It is grown, not built.</p>
<p>As I put it in my presentation slides subtitle, prepare to clear the decks. It's hard to avoid that in web development. If you are prepared for change, you can deal with it better.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#the-need-for-new" id="the-need-for-new"></a><span class="text">The Need for New</span><a class="header-anchor-select" href="https://survivejs.com/#the-need-for-new">#</a></h2>
<p>In some ways front-end development is very frustrating. It is particularly difficult for perfectionists. As you get bombarded by new, shiny things, it can be easy to feel inadequate.</p>
<p>Looking through job requirements doesn't do any favors either. There are simply so many matters to master. And as they say, jack of all trades is a master of none. At the same time you should master something to stand out at least a little bit.</p>
<p>This is one of the reasons why I wrote my book. I wanted to go through a slice of interesting technologies. Besides being useful for me personally, I believe the material saves some effort on your part. It is important to be aware of some of the available technologies if nothing else.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>An important part of front-end development is knowing what you don't know. You don't have to be an absolute master at everything. There simply isn't enough time for that. Instead, build around your strengths and stay curious.</p>
<p>Big thanks to <a href="http://lemire.me/blog/archives/2015/09/04/revisiting-vernor-vinges-predictions-for-2025/">Daniel Lemire</a> for inspiration. I also appreciate the feedback from <a href="https://twitter.com/mbrochh">Martin Brochhaus</a> and <a href="https://twitter.com/geraldyeo">Gerald Yeo</a> that pushed me to write this post.</p>
How to Succeed at Technical Books?ahowtosucceedattechnicalbooks2015-09-04t00:00:00z2015-09-04T00:00:00Z<p>I've <a href="http://www.nixtu.info/2015/07/on-economics-of-ebook-publishing.html">written about book publishing earlier</a> at my personal blog. It is an interesting yet difficult business. I sort of stumbled into the world by chance. In this post I want to share some of my learnings.</p>
<p>Long story short I wrote a little <a href="https://christianalfoni.github.io/react-webpack-cookbook/">Webpack cookbook</a> with <a href="http://www.christianalfoni.com/">Christian Alfoni</a>. That led to an idea of a bigger book. Initially we pitched that to a real publisher. After long negotiations we got a no. That didn't stop me. You can see the result here.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#growing-pains" id="growing-pains"></a><span class="text">Growing Pains</span><a class="header-anchor-select" href="https://survivejs.com/#growing-pains">#</a></h2>
<p>Even though the book hasn't been a great financial success, it has proven its benefits. There are multiple reasons for this. For instance having all your content open might not be the best idea for a beginner author unless you have some way to upsell. This is something I'm going to experiment with to see if having at least some of the content closed makes a difference.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#tackling-big-problems-by-yourself" id="tackling-big-problems-by-yourself"></a><span class="text">Tackling Big Problems by Yourself</span><a class="header-anchor-select" href="https://survivejs.com/#tackling-big-problems-by-yourself">#</a></h3>
<p>I am aware a lot of beginner authors do a lot worse than me. The problem is that when you are starting out alone, you have to tackle big problems by yourself. Simply put even if you could write but fail at other important tasks, such as marketing and sales, it won't work. If you wrote an excellent book and people failed to find it, it would still be a failure, at least financially.</p>
<p>Note that you can, and probably should, outsource some of the book related tasks. You can find people to proofread your material for relatively cheap. Even if the reader knows nothing about the topic, you will likely get a bunch of grammar fixes to make. Same goes for crafting landing pages, marketing material and graphics. A professional can simply do better work, faster.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#extra-challenge-for-non-natives" id="extra-challenge-for-non-natives"></a><span class="text">Extra Challenge for Non-natives</span><a class="header-anchor-select" href="https://survivejs.com/#extra-challenge-for-non-natives">#</a></h3>
<p>As a non-native author you'll encounter an extra challenge in the form of grammar. As a Finn I tend to be quite blind at articles. I miss some at times. My writing style has likely been inspired by my culture as well. That's something that's hard to tone down. On the other hand that can be treated as a strength. Sometimes it's good to be a little different and stand out.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#royalties" id="royalties"></a><span class="text">Royalties</span><a class="header-anchor-select" href="https://survivejs.com/#royalties">#</a></h2>
<p>As a first time author going through an established publisher could be a good option. They'll deal with some of the hard parts. You will pay for this quite literally, though. And there are no guarantees for success. At least this will make you familiar with the process. When you decide to self-publish, you already know some of the ropes. As a result you aren't starting from the scratch anymore.</p>
<p>The economics of self-publishing can be more rewarding. There are more aspects to worry about but the economics make up for that. Roughly put you might need to sell six times the books through a real publisher than otherwise. This means you can reach decent income even with modest sales.</p>
<p>To give you a better idea, consider the figures below:</p>
<ul>
<li>Traditional publisher - 15-50% royalty, closer to 15% normally and can be less even</li>
<li><a href="https://leanpub.com/">Leanpub</a> - $0.50 + 10%</li>
<li><a href="https://gumroad.com/">Gumroad</a> - $0.25 + 5%</li>
<li><a href="http://getdpd.com/">DPD</a> - $10 per month</li>
</ul>
<p>Shortly, the more responsibility you take, the more you get paid for it. But this assumes you can deal with all the parts involved. Having a great royalty rate doesn't help if the book doesn't sell.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#leanpub-vs-alternatives" id="leanpub-vs-alternatives"></a><span class="text">Leanpub vs. Alternatives</span><a class="header-anchor-select" href="https://survivejs.com/#leanpub-vs-alternatives">#</a></h3>
<p>Especially with something like DPD you would be raking most of the profit to yourself. But as stated earlier, the cost is usually elsewhere. The benefit of Leanpub is that they offer a decent landing page for your book and support Markdown based authoring.</p>
<p>One potential problem is that you don't get direct access to your clients. This makes it more difficult to grow your personal mailing list than it would have to be. There are likely good reasons for this, though.</p>
<p>It is hard to underestimate the importance of a good mailing list. It is an amazing way to reach your audience. There are an entire set of techniques related to growing them. I am not an expert when it comes to mailing lists but I can see the value. Beyond marketing they actually allow you to help your audience directly, get feedback and so on.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#control-over-output" id="control-over-output"></a><span class="text">Control over Output</span><a class="header-anchor-select" href="https://survivejs.com/#control-over-output">#</a></h3>
<p>You can get output similar to Leanpub through something like <a href="https://www.gitbook.com/">Gitbook</a>. If you have the skills for that, you can customize the result as you want. You can sell the result through Gumroad, DPD, and such. You will get more control over the sales process and can set up the sales funnel just the way you want it. I believe growing your mailing list becomes easier this way.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#benefits-of-a-proxy" id="benefits-of-a-proxy"></a><span class="text">Benefits of a Proxy</span><a class="header-anchor-select" href="https://survivejs.com/#benefits-of-a-proxy">#</a></h3>
<p>I feel selling is one of the smallest problems, especially if you go through a proxy. If you deal with it yourself, you will have to deal with things like EU VAT. That will get very complex and time consuming fast. It is likely a better idea to leave these kind of details to companies that have them sorted out.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#going-dead-tree-and-beyond" id="going-dead-tree-and-beyond"></a><span class="text">Going Dead Tree and Beyond</span><a class="header-anchor-select" href="https://survivejs.com/#going-dead-tree-and-beyond">#</a></h3>
<p>Note that services like <a href="https://www.lulu.com/">Lulu</a> allow you to get actual dead tree books done. The obvious disadvantage of this is that it becomes difficult to push updates. Lulu also gives access to major digital bookshops, such as Amazon, B&N, and iBooks. This means you'll need to have your book content fixed apart from grammatical fixes, though, as these platforms expect your book has an ISBN.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#potential-benefits" id="potential-benefits"></a><span class="text">Potential Benefits</span><a class="header-anchor-select" href="https://survivejs.com/#potential-benefits">#</a></h2>
<p>Financial success is only one potential benefit of writing a book. It will actually force you to become better at writing. Even though I'm far from top notch writers, I feel like my writing has improved. At least I'm faster at it, and it takes less effort. In addition I have gained contacts I wouldn't have otherwise. And, most importantly, writing a book has opened an entire new world to me in the form of opportunities.</p>
<p>Even in the worst case I have established a source of some level of income. The book seems to sell consistently and I have some tricks in my sleeve to improve on that. Better yet, I have made a dent to the market. It will be far easier to develop another book should I want to.</p>
<p>Having a book in your CV doesn't hurt either. The next time I do a round of interviews, I have an ace at sleeve. A book adds to your credibility and might be the factor that will help you to get the job. At the very least you will have a stronger bargaining position when negotiating over the financial bits.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-would-i-do-differently-" id="what-would-i-do-differently-"></a><span class="text">What Would I Do Differently?</span><a class="header-anchor-select" href="https://survivejs.com/#what-would-i-do-differently-">#</a></h2>
<p>Just like with software projects the easiest thing to mess up is scoping. It's difficult to estimate how long getting things done actually takes. This is exacerbated by the fact that as a first time author you don't have a frame of reference. Based on this experience I would say it's better to aim for a short guide, say 30-50 pages, rather than shoot for the moon from the first go.</p>
<p>It is easier to expand than to cut down. Go for a short, quality book rather than something long and shoddy. Your readers will thank you.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#experiment-at-moderation" id="experiment-at-moderation"></a><span class="text">Experiment at Moderation</span><a class="header-anchor-select" href="https://survivejs.com/#experiment-at-moderation">#</a></h3>
<p>One interesting aspect of self-publishing is that it allows a wide range of experimentation. I probably went too far with that at some points. Instead it might be a good idea to try to fix your table of contents as soon as possible. This is just to avoid the amount of rework needed. Sometimes there's no way to avoid that but as they say "fail to plan, plan to fail".</p>
<p>Ideally you wouldn't have to iterate a lot on the content. I know this sounds like waterfall. It's easier from a reader's perspective, though. If nothing is ever done, how do you know when to read? At some point a book has to become ready. Editions are ideal for bigger changes. That's the way the ISBN system has been designed.</p>
<p>You could say there's an interesting conflict between the need to move fast and the need for a stable result. Platforms, such as Leanpub or Gumroad, allow this sort of experimentation. As your book grows, it doesn't hurt to become more conservative in your approach. For instance I've made conscious effort to move towards a more stable release cycle.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#shifting-topics" id="shifting-topics"></a><span class="text">Shifting Topics</span><a class="header-anchor-select" href="https://survivejs.com/#shifting-topics">#</a></h3>
<p>One of the big challenges of being a technical author is that the scene changes all the time. If I started to write my book right now, I would perhaps choose some technologies covered a little differently. Especially in front-end development even a month is a long time. That puts extra pressure on both authors and readers.</p>
<p>It can be hard to accept that your book is obsolete in some ways as soon as you publish it. That's something for technical authors to endure.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#subscription-based-books-" id="subscription-based-books-"></a><span class="text">Subscription Based Books?</span><a class="header-anchor-select" href="https://survivejs.com/#subscription-based-books-">#</a></h3>
<p><a href="https://commonsware.com/Android/">The Busy Coder's Guide to Android Development</a> is an interesting alternative to the common approach. The author is selling his book as a subscription service. It's a massive book, over 3,300 pages. Subscription would give you access to the newest content.</p>
<p>From business point of view recurring income is one of the greatest things you can achieve. The problem with traditional sales is that it's one-off. If you want more income from the same client, you would have to sell another offering or try to upsell your current offering in some way. You could for instance try to produce a video course or sell personal consulting to complement your base offering.</p>
<p>A subscription based approach is more involved. It implies the need for continuous work. I believe that can work when scaled to a sufficient volume. As always, the problem for first time authors is in reaching that critical mass required to make it work.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#open-vs-closed" id="open-vs-closed"></a><span class="text">Open vs. Closed</span><a class="header-anchor-select" href="https://survivejs.com/#open-vs-closed">#</a></h3>
<p>I went for an open approach in my first effort. The greatest advantage of this has been an immense amount of visibility. Of course translating that to sales is another story. If I started now, I would likely start with a mixed approach. Have something valuable behind a paywall to encourage sales. Perhaps a part of the content could be exclusive to the paid version only. Some keep all of the content closed.</p>
<p>There's likely no one right answer to this question. As the content has been available in an open format, that has enabled external contributions I would have missed otherwise. Given I'm a solo author, that has been a massive help. Now everyone gets a better book. This is something I am very happy about.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though publishing a technical book is surprisingly simple, actually succeeding at it is another story. There are a lot of things that could go wrong. Don't get discouraged, though. I believe that persistency, and the willingness to learn and adapt, will yield results at some point. Very few succeed with their first book anyway. So be prepared for another.</p>
SurviveJS - Webpack and React - v1.7.5asurvivejswebpackandreactv1752015-08-30t00:00:00z2015-08-30T00:00:00Z<p>Onwards we go. <code>v1.7.5</code> can be characterized as a refinement release. I went through "React and Flux" and "From Notes to Kanban" with my editor (thanks Jesús!). As a result we should have something that's a notch better together. I took some decompression time during this iteration and negotiated a lot towards a better future I hope.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-v1-7-5" id="book-improvements-v1-7-5"></a><span class="text">Book Improvements - <code>v1.7.5</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-v1-7-5">#</a></h2>
<p>In total 116 commits went to <code>v1.7.5</code>. To make it easier to follow what happened and where, I've split up the changes below.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.7.0...v1.7.5">all changes</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#general-fixes" id="general-fixes"></a><span class="text">General Fixes</span><a class="header-anchor-select" href="https://survivejs.com/#general-fixes">#</a></h3>
<ul>
<li>I learned something curious about <em>a</em> and <em>an</em> (no, we don't have these things in Finnish). It is important to remember to take in count what the words <strong>sound</strong> like.</li>
<li>Use nicer formatting for <code>npm i</code> bits. Now <code>--</code> shouldn't get mangled.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction" id="introduction"></a><span class="text">Introduction</span><a class="header-anchor-select" href="https://survivejs.com/#introduction">#</a></h3>
<ul>
<li>The introduction of the book has been expanded somewhat. There's only one chance to make a first impression so might as well try to do a good one.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#webpack-compared" id="webpack-compared"></a><span class="text">Webpack Compared</span><a class="header-anchor-select" href="https://survivejs.com/#webpack-compared">#</a></h3>
<ul>
<li>Added an expanded explanation for <code>make</code>.</li>
<li>Added <a href="http://jspm.io/">JSPM</a>. You should watch <a href="https://www.youtube.com/watch?t=33&v=iukBMY4apvI">Glen Maddern's</a> awesome demo about it. It wouldn't surprise me a lot if JSPM had a bright future.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-with-webpack" id="developing-with-webpack"></a><span class="text">Developing with Webpack</span><a class="header-anchor-select" href="https://survivejs.com/#developing-with-webpack">#</a></h3>
<ul>
<li>Highlighted the importance of a proper <code>.gitignore</code>. I've seen some people to neglect this so I felt it's good to cover. It's just one of those things that saves your nerves. :)</li>
<li>Dropped <code>colors: true</code> setting from <code>devServer</code> configuration. Reading from source I learned that <code>webpack-dev-server</code> actually detects for terminal colors automatically. As a result this bit of configuration can be dropped.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-a-basic-note-application" id="implementing-a-basic-note-application"></a><span class="text">Implementing a Basic Note Application</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-a-basic-note-application">#</a></h3>
<ul>
<li>Pushed <code>notes</code> definition outside of the <code>App</code> component. This cleans up the implementation a little.</li>
<li>Added screenshots to show what you should see after each visual step.</li>
<li>Expanded the explanation of <code>super()</code>. Remember that it refers to the method of the parent class.</li>
<li>Improved the visual outlook of the add button.</li>
<li>Made sure note tasks get assigned <code>display: inline-block;</code> to force a minimum height to them even if there's no content at all. This way they can be edited even then.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-and-flux" id="react-and-flux"></a><span class="text">React and Flux</span><a class="header-anchor-select" href="https://survivejs.com/#react-and-flux">#</a></h3>
<ul>
<li>Clarified <em>Gluing It All Together</em> section a lot.</li>
<li>Pushed <em>Dispatching in Alt</em> to the end. I've settled for a convention where the main content should be about getting ahead with the application whereas these sort of good to know things have been pushed to the end.</li>
<li>Dropped redundant <code>this.notes = this.notes || [];</code> check. This won't be needed so it can be safely dropped. The same goes for bootstrapped data in general. It just works.</li>
<li>Clarified and expanded <em>What Are Decorators?</em> and added an example showing how to implement <code>@log</code> for logging how methods are called.</li>
<li>Reworked <em>Using <code>AltContainer</code> Instead of a Decorator</em> for clarity.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#from-notes-to-kanban" id="from-notes-to-kanban"></a><span class="text">From Notes to Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#from-notes-to-kanban">#</a></h3>
<ul>
<li>Added screenshots to illustrate progress.</li>
<li>Reworked <em>Modeling Lane</em> for clarity.</li>
<li>Reworked <em>Making Lanes Responsible of Notes</em> for clarity.</li>
<li>Push <code>addNote</code> and <code>deleteNote</code> <code>bind</code>s to <code>constructor</code> level. Logically <code>Lane</code> id remains the same during its lifecycle so this seemed like a safe change to make.</li>
<li>Highlighted important code changes using bullet points.</li>
<li>Added a section known as <em>On Namespacing Components</em>. This is a small technique you may find handy. It allows you to model cleaner component APIs so it's worth knowing.</li>
<li>Added missing <code>get</code> to <code>NoteStore</code>. While at it I bummed a couple of lines of code from it. Now it's as compact as it can get.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#implementing-drag-and-drop" id="implementing-drag-and-drop"></a><span class="text">Implementing Drag and Drop</span><a class="header-anchor-select" href="https://survivejs.com/#implementing-drag-and-drop">#</a></h3>
<ul>
<li>Reworked introduction.</li>
<li>Reworked <em>Preparing Notes to Be Sorted</em>.</li>
<li>Pushed <code>ItemTypes</code> to <code>'../libs/item_types'</code> as it's not a component.</li>
</ul>
<p>We will be doing more work on this chapter to make it clearer still.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#building-kanban" id="building-kanban"></a><span class="text">Building Kanban</span><a class="header-anchor-select" href="https://survivejs.com/#building-kanban">#</a></h3>
<ul>
<li>Added more context to the code examples to make them clearer.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#authoring-libraries" id="authoring-libraries"></a><span class="text">Authoring Libraries</span><a class="header-anchor-select" href="https://survivejs.com/#authoring-libraries">#</a></h3>
<ul>
<li>Made sure <code>preversion</code> hook <code>git commit</code> takes <code>--allow-empty</code> to allow empty distribution commits to be made.</li>
<li>Dropped redundant version related tip as <code>preversion</code> hook does everything we need now.</li>
</ul>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#styling-react" id="styling-react"></a><span class="text">Styling React</span><a class="header-anchor-select" href="https://survivejs.com/#styling-react">#</a></h3>
<ul>
<li>Expanded on CSS Modules and linked to <a href="https://github.com/gajus/react-css-modules">gajus/react-css-modules</a> as that makes it more convenient to work with them in React.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I'll continue going through the content with my editor while listening to your feedback. I'm particularly interested in <a href="https://github.com/survivejs/webpack_react/issues/224">highlighting updated lines</a> as that would make it easier to follow what lines of code changed during the tutorial. I believe resolving this could help to push the book quality a notch further.</p>
<p>Now that the content is getting solid this means I can spend more time on producing new content. I'll be focusing on typing next. Also some other plans have been put to motion but more on those later.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I think this was yet another good step towards a quality release at Amazon. Thanks for everyone involved! You make it worthwhile. :)</p>
<p>I hope you enjoy this release. As usual <a href="https://github.com/survivejs/webpack_react/issues">feedback</a> and pull requests are welcome.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
MobX - Reactive React - Interview with Michel Weststrateamobxreactivereactinterviewwithmichelweststrate2015-08-19t00:00:00z2015-08-19T00:00:00Z<p>As React deals only with the view layer you will often have to complement it with something else. <a href="https://facebook.github.io/flux/docs/overview.html">Flux architecture</a> is one answer but not the only one. <a href="https://mobxjs.github.io/mobx/">MobX</a> by <a href="https://github.com/mweststrate">Michel Weststrate</a> is a refreshing alternative. But what is it really about?</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#can-you-tell-something-about-yourself-michel-how-did-you-discover-react-" id="can-you-tell-something-about-yourself-michel-how-did-you-discover-react-"></a><span class="text">Can you tell something about yourself Michel? How did you discover React?</span><a class="header-anchor-select" href="https://survivejs.com/#can-you-tell-something-about-yourself-michel-how-did-you-discover-react-">#</a></h2>
<p>
<span class="author">
<img src="https://www.gravatar.com/avatar/bdbeb02a7fe50b769e67e0c076b33c54?size=200" alt="Michel Weststrate" class='author' width='100' height='100' />
</span>
I'm a lead developer at Mendix where I worked on both frontend and backend development. About half a year ago me and my team started working on a greenfield, enterprise scale project where most of the complexity is on the client side. We started a small research project to find the right technology and looked into Angular, Ember and React.
</p>
<p>React was definitely the one that did enlighten us the most. Its mental model is really simple, it has a clearly defined scope and it is convenient to write.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-drove-you-to-develop-mobx-why-not-to-just-stick-with-flux-" id="what-drove-you-to-develop-mobx-why-not-to-just-stick-with-flux-"></a><span class="text">What drove you to develop MobX Why not to just stick with Flux?</span><a class="header-anchor-select" href="https://survivejs.com/#what-drove-you-to-develop-mobx-why-not-to-just-stick-with-flux-">#</a></h2>
<p>Performance and code simplicity are both very important values in our project. Performance because we have to draw hundreds of different, moving components at 50fps. Code simplicity because we have about 400 different domain concepts to cover, so all our components should be really DRY. An always-re-render-everything approach results in very simple code. But it doesn't cut it in terms of performance.</p>
<p>With most Flux implementations, it really seems that to achieve performance you have to give up code simplicity. Immutable data is often presented as the way to go here. Yet it results in verbose controller (store) functions and forces you to do reference management yourself.</p>
<p>With mutable data structures, it is trivial to guarantee that there is only one version of a certain domain object in memory. So you never have to worry whether you leaked an old reference. With immutable data, pointer equality guarantees structural equality. Which is nice in terms of optimizations and history. Yet with mutable data, pointer equality means that you are looking at conceptually the same (and latest) thing.</p>
<p>So our goal for MobX is: Be able to write components that look like they are always fully rendered. Without needing nifty things like cursors or store subscriptions. To achieve DRY: the render function is the dependency tree, and nothing else. For our model and controller code we wanted to be able to write vanilla JS code as much as possible. Be able to use the mutable arrays and objects, cyclic data-structures and classes. I think MobX achieves these goals.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#mobx-can-work-with-flux" id="mobx-can-work-with-flux"></a><span class="text">MobX can work <strong>with</strong> Flux</span><a class="header-anchor-select" href="https://survivejs.com/#mobx-can-work-with-flux">#</a></h3>
<p>It is actually funny that you present MobX as an alternative to Flux. MobX can be combined with most Flux implementations. But I heard indeed from several people that they dropped Flux after starting to use MobX in their project.</p>
<p>I think the issue with Flux is that it is very obtrusive to your code base. If you use React and Flux together, it impacts your whole codebase. While just React nicely separates the concerns of view and 'the rest'. With Flux frameworks you go all-in. That introduces new problems like: 'how do I do async actions' and 'my actions need to go through the stores in a certain order'.</p>
<p>That makes me wonder: Did you have these questions when building vanilla JavaScript applications? What do you get in return from Flux? I think most things offered by Flux can also be achieved by disciplined programming. Stuff like uni-directional flow and making it clear where your state lives.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#on-frameworks-vs-libraries" id="on-frameworks-vs-libraries"></a><span class="text">On frameworks vs. libraries</span><a class="header-anchor-select" href="https://survivejs.com/#on-frameworks-vs-libraries">#</a></h3>
<p>At Mendix we are pretty reluctant to use all-in frameworks. The first two years they serve you really well. But the third year they cannot longer keep up the pace with new technologies. The fourth year you spent refactoring just be able to adopt new technologies.</p>
<p>We have learned from that, so MobX tries to be as unobtrusive as possible. Less obtrusive than frameworks that use immutables, cursors or reactive streams. So that you have a great deal of flexibility in how you structure your controller, view and model code (or actions and stores).</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-are-your-next-steps-how-do-you-plan-to-develop-mobx-further-" id="what-are-your-next-steps-how-do-you-plan-to-develop-mobx-further-"></a><span class="text">What are your next steps? How do you plan to develop MobX further?</span><a class="header-anchor-select" href="https://survivejs.com/#what-are-your-next-steps-how-do-you-plan-to-develop-mobx-further-">#</a></h2>
<p>MobX is all about updating views on your data automatically. People often interpret views as 'user interface' and this plays a central role indeed in the React integration. But reactive data is really convenient for backend integration as well.</p>
<p>At our project we do not only use MobX to update the user interface, but also to create a changelog that is sent to the backend server. Both are just views on the same data. I hope to get this idea more clear and to find some nice convenience methods that hints users in this direction.</p>
<p>Soon, MobX will include a way to visualize all the relations between state and views. This will provide great insight in the actual flow of state through your application.</p>
<p>And maybe I should write some Flux thingy around MobX and React. Because either people seem to think you need to Flux in order to properly React. Or they just love to be guided in how to setup each part of their application.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-" id="what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-"></a><span class="text">What does the future look like for React? Can you see any particular trends?</span><a class="header-anchor-select" href="https://survivejs.com/#what-does-the-future-look-like-for-react-can-you-see-any-particular-trends-">#</a></h2>
<p>I think React has a brighter future than Angular. Simply because you aren't stuck with a full fledged framework that you have to obey, or it will work against you. But React has to keep an ecosystem that prefers composition of micro libraries over all-in-one solutions.</p>
<p>This is also the reason that small editors like Sublime and Atom in combination with standalone build tools like Grunt and Gulp are now more popular than feature creeped IDEs (I think, I don't have any numbers on that).</p>
<p>No framework lives forever. So if you want to make sure your software outlives your frameworks, you have to be able to replace your libraries one by one. One day you will wake up to discover that browsers are fast enough to re-calculate your whole application on each state change. Then you just remove MobX and everything will work just the same as the day before without a major refactoring.</p>
<p>I'm very interested to see what Relay will do in this regard. Because from a bird's eye view it seems to increase the coupling between view, controller and backend. Making it much harder to replace any of these parts.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#who-should-i-interview-next-" id="who-should-i-interview-next-"></a><span class="text">Who should I interview next?</span><a class="header-anchor-select" href="https://survivejs.com/#who-should-i-interview-next-">#</a></h2>
<p>Dan Abramov, his <a href="https://github.com/gaearon/redux">redux</a> is the only 'Flux implementation' I could see myself using. It is not unobtrusive if you are coming from the mutable world, but the mental model of redux is beautiful and the dev tools are fun. I can imagine it works really well in (at least) medium sized applications.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Thanks for the interview Michel! It was certainly enlightening. We ported the book <a href="https://github.com/survivejs/mobx-demo">Notes and Kanban examples to MobX</a>. Check out the source to see how this worked out. Compared to the original I was definitely positively surprised. MobX seems like a good fit for these problems. You can play around with MobX online by taking the <a href="https://mobxjs.github.io/mobx/getting-started.html">ten minute, interactive introduction to MobX + React</a>.</p>
<p>Michel goes into more detail at <a href="https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/">his post about making React reactive</a>. So if this article piqued your interest that might be a worthwhile read. Of course you can just hop into the <a href="https://github.com/mobxjs/mobx-react-boilerplate">MobX boilerplate</a> and proceed from there.</p>
SurviveJS - Webpack and React - v1.7asurvivejswebpackandreactv172015-08-16t00:00:00z2015-08-16T00:00:00Z<p>I skipped doing a public post for <code>v1.6</code> as I was too tired (berry season is taxing). Now I'm going to give you release notes for both <code>v1.6</code> and <code>v1.7</code> at once. I have also some news of the future plans. So stay tuned.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#development-model-changes" id="development-model-changes"></a><span class="text">Development Model Changes</span><a class="header-anchor-select" href="https://survivejs.com/#development-model-changes">#</a></h2>
<p>I've moved to a staged development model. Now I maintain <code>master</code> and <code>dev</code> branches. <code>master</code> contains the current stable release. All development happens at <code>dev</code>. This way the code examples stay in sync with the book and the site. Less frustration and a better book for everyone. If you have PRs in mind, please make them against <code>dev</code>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-v1-6" id="book-improvements-v1-6"></a><span class="text">Book Improvements - <code>v1.6</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-v1-6">#</a></h2>
<p>In total 63 commits went to <code>v1.6</code>.</p>
<ul>
<li>Some typo fixes were made. A lot more follow in <code>v1.7</code>.</li>
<li><code>webpack-dev-server</code> configuration was pushed to <code>webpack.config.js</code></li>
<li>Noted that <code>webpack.config.babel.js</code> works. I've expanded on this at <code>v1.7</code></li>
<li>A lot of effort went into making <em>Implementing a Basic Note Application</em> easier to approach</li>
<li>Dropped custom <code>findIndex</code>. In <code>v1.7</code> I went further and now it uses <a href="https://www.npmjs.com/package/array.prototype.findindex">array.prototype.findindex</a></li>
<li>Added imagery to <em>React and Flux</em></li>
<li>Mentioned that <code>-S</code> and <code>-D</code> map to <code>npm i --save</code> and <code>npm i --save-dev</code>. This is just for you keyboard jockeys out there.</li>
<li>Added the book subtitle to the cover. It looked strange without.</li>
<li>Formatted all <code>npm i</code> parts so that they stand out better. The web version uses special formatting reminiscent of a real terminal.</li>
</ul>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.5.0...v1.6.0">all changes</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements-v1-7" id="book-improvements-v1-7"></a><span class="text">Book Improvements - <code>v1.7</code></span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements-v1-7">#</a></h2>
<p>108 commits went to <code>v1.7</code>. So based on numbers it was busier. Especially the early part of the week was good. After that it was all berries and mushrooms for me. It's the season after all and Winter is coming.</p>
<ul>
<li>A massive amount of typo and grammar fixes were made in this iteration. I tried my luck with Fiverr and it paid off seriously. Thank you Ava and Nancy! There might be some left still but we squashed quite a few. I also ran the content through <a href="http://www.hemingwayapp.com/">Hemingway</a> to simplify sentence structures where needed.</li>
<li>I managed to make <em>webpack.config.js</em> <code>TARGET</code> selection cross-platform. Now the configuration relies on <code>process.env.npm_lifecycle_event</code>. npm sets that during execution and we can rely on that. Thanks Hector for pointing me to the right direction!</li>
<li>Clarified point about <code>eval</code>. As it happens Webpack provides multiple <a href="https://webpack.js.org/configuration/devtool/#devtool">devtool</a> options. I suggest <code>eval-source-map</code> for development in small projects. You can try faster, lower quality options with bigger projects.</li>
<li>Noted that it's possible to exit Node.js repl using <code>CTRL-D</code> instead of <code>CTRL-C</code>. Thanks to Ahmed for pointing this out!</li>
<li>Improved Kanban project naming (consistent with CRUD) overall. Now it should read a little better. I also pushed reference related logic to a store method. It's nicer but still a lot of code considering what it actually does. As long as we operate through indices like this, there's no neat way around it.</li>
<li>Showed how to set up isomorphic rendering for the Kanban application. It's not that useful in this case. I do hope you get the idea as it's powerful.</li>
<li>Dropped deployment chapter. As I managed to explain isomorphic rendering earlier in the previous point, the deployment chapter became redundant. Good riddance.</li>
<li>Added JSX suffixes to imports. As the project gets run through Node.js context when rendering in an isomorphic way, I had to add JSX suffixes. Perhaps someone knows a better solution but this made sense at the time.</li>
<li>Pushed id creation inside stores. The reasoning for this is that if you are dealing with a real back-end, that's the way it goes. You should <em>never</em> have to think about ids at view level so it's better to do it right. Besides now gluing a real back-end with the project is a notch easier.</li>
<li>Reworked the early part of the Flux chapter with my editor (thanks Jesús!). The chapter can likely still be improved but it's better now. It's a little long to my tastes but on the other hand it covers a lot of ground.</li>
<li>Ended up using term <em>Webpack</em> everywhere. I know <em>webpack</em> is the correct name but I went for consistency here. So consider that "Webpack" == "webpack".</li>
</ul>
<p>I wanted to get some screenshots done for this iteration too and work on a Leanpub exclusive chapter. This work will go to the next iteration. The good news are that now there's far less to worry about so I'm more likely to get these tasks done.</p>
<p>You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.6.0...v1.7.0">all changes</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<blockquote>
<p>Fail to plan, plan to fail.</p>
</blockquote>
<p>It seems to me the book is on a good track and we're making steady progress. New people are finding the book and even buying it. And the feedback has been good. I know the book isn't everyone's piece of cake. But I'm okay with that. By trying to please everyone you please none.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#going-amazon" id="going-amazon"></a><span class="text">Going Amazon</span><a class="header-anchor-select" href="https://survivejs.com/#going-amazon">#</a></h3>
<p>The next major goal for me is to get the book to Amazon, iBooks and such through <a href="https://www.lulu.com/">Lulu</a>. This might also provide us a paper version if there's demand. Enhanced distribution could go a long way in improving sales. After all I'll need to make this work financially in order to be able to write more.</p>
<p>For this to happen we'll need to lock the scope of the book. This is due to ISBN requirements. You can make small changes to a published book but nowhere on the level what we're doing right now.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#but-there-s-more-technology-to-cover" id="but-there-s-more-technology-to-cover"></a><span class="text">But There's More Technology to Cover</span><a class="header-anchor-select" href="https://survivejs.com/#but-there-s-more-technology-to-cover">#</a></h3>
<p>I know interesting new technology, such as <a href="http://redux.js.org/">redux</a>, keeps on coming out all the time. The problem is that if I keep on changing the newest cool thing I will never get a stable version out. It is far better idea to lock the scope and cover the interesting things through the blog.</p>
<p>This gives me a more flexible way to try out various ideas before committing them to a book. It also helps to give the current work some visibility it sorely needs.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#the-current-plan" id="the-current-plan"></a><span class="text">The Current Plan</span><a class="header-anchor-select" href="https://survivejs.com/#the-current-plan">#</a></h3>
<p>As a result the current plan is as follows:</p>
<ul>
<li>Continue iterating on the current content based on feedback. No major changes to the chapter structure anymore, just minor tweaks to make the book more approachable.</li>
<li>Write chapters that are unique for the commercial edition. This improves the value proposition and actually might encourage more people to buy the book. After all, that enables more content! I expect at least three chapters.</li>
<li>Expand this blog with supporting topics. I have a nice series of posts planned up and I welcome ideas. I want more people to discover the book and this could go a long way towards that.</li>
<li>Figure out how Hacker News works. I did try <em>Show HN</em> but received zero response. Perhaps I'll have better luck next time.</li>
</ul>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>So towards the Amazon release I go. It might be interesting to try running some sort of campaign to eventually open the unique content. For now I will need to let the commercial version to have some leverage over the community edition. Perhaps there's a way to align these two goals (community content, making a living) but as for now this might be the way.</p>
<p>I will be able to tell a lot more after a wider scale release. Given I'm a first time author I'm still learning the ropes here and no doubt making a lot of mistakes in the process. I have other book ideas but I'll have to get this first one out before I can even think about those. Perhaps within a year or so I can do an expanded second edition. Any sooner and I'm pissing off my first edition readers. :)</p>
<p>I hope you enjoy this release. As usual <a href="https://github.com/survivejs/webpack_react/issues">feedback</a> and pull requests are welcome. It's interesting to write a book this way. That's for sure.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
A Quick Look at React Booksaaquicklookatreactbooks2015-08-01t00:00:00z2015-08-01T00:00:00Z<p>As an author I like to keep an eye on the market. You have to know who you are against after all! It's not an understatement to say could that it's about to get swarmed with books. In this post I'll go through the ones I could find and provide you some intel on them. Perhaps you would like to get a couple of books to your collection!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#free-books" id="free-books"></a><span class="text">Free Books</span><a class="header-anchor-select" href="https://survivejs.com/#free-books">#</a></h2>
<p>Even though there are <a href="https://github.com/enaqx/awesome-react">a lot of freely available React resources</a> there aren't too many free books yet.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#survivejs-webpack-and-react" id="survivejs-webpack-and-react"></a><span class="text">SurviveJS - Webpack and React</span><a class="header-anchor-select" href="https://survivejs.com/#survivejs-webpack-and-react">#</a></h3>
<p><a href="http://survivejs.com/">SurviveJS - Webpack and React</a> is the most comprehensive freely available book I'm aware of. It will show you how to set up a <a href="https://webpack.github.io/">webpack</a> based development environment and then develop a simple <a href="https://en.wikipedia.org/wiki/Kanban">Kanban</a> based on it. More theoretical topics, such as linting, styling and library authoring are discussed as well. At the time of writing it has over 250 pages and more content is planned based on demand.</p>
<p>The book is open to external contributions and in fact a lot of people have contributed feedback and fixes. From author's point of view this has been just awesome!</p>
<p>If you like the book and want to support the effort, <a href="https://leanpub.com/survivejs_webpack_react">buying a digital copy</a> would most likely make the author's day. Suggested price without VAT is $19.99. Pay based on value you perceive as Leanpub books allow.</p>
<p>There's also <a href="http://www.amazon.com/SurviveJS-Webpack-React-apprentice-master/dp/152391050X">a paper version available through Amazon</a>.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-webpack-cookbook" id="react-webpack-cookbook"></a><span class="text">React Webpack Cookbook</span><a class="header-anchor-select" href="https://survivejs.com/#react-webpack-cookbook">#</a></h3>
<p><a href="https://christianalfoni.github.io/react-webpack-cookbook/">React Webpack Cookbook</a> is a little guide I developed with <a href="http://www.christianalfoni.com/">Christian Alfoni</a>. The eventual plan is to polish the content and host the improved version here with a similar support model.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#hacking-with-react" id="hacking-with-react"></a><span class="text">Hacking with React</span><a class="header-anchor-select" href="https://survivejs.com/#hacking-with-react">#</a></h3>
<p><a href="http://www.hackingwithreact.com/">Hacking with React</a> by Paul Hudson delves straight into React. At the time of writing it has 123 pages and it uses a no-nonsense approach. In some ways it's the anti-thesis to SurviveJS, but there's room for different kind of offerings. Even though the book is free to read online, the author offers it through <a href="https://leanpub.com/hackingwithreact/">Leanpub</a> as well. The minimum price without VAT is $10.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-native-animation-book" id="react-native-animation-book"></a><span class="text">React Native Animation Book</span><a class="header-anchor-select" href="https://survivejs.com/#react-native-animation-book">#</a></h3>
<p><a href="http://browniefed.com/react-native-animation-book/">React Native Animation Book</a> by <a href="http://browniefed.com/">Jason Brown</a> explains how to deal with animation in React Native. You get all relevant bits in a single place. That's it really.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#commercial-books" id="commercial-books"></a><span class="text">Commercial Books</span><a class="header-anchor-select" href="https://survivejs.com/#commercial-books">#</a></h2>
<p>The commercial side of React books is about to go wild. <strong>Developing a React Edge</strong> was likely the first book on the market. Since then a few others have followed. The challenge for authors is that as React moves forward quite fast. Books will require constant maintenance effort to stay up to date.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#developing-a-react-edge-the-javascript-library-for-user-interfaces" id="developing-a-react-edge-the-javascript-library-for-user-interfaces"></a><span class="text">Developing a React Edge: The JavaScript Library for User Interfaces</span><a class="header-anchor-select" href="https://survivejs.com/#developing-a-react-edge-the-javascript-library-for-user-interfaces">#</a></h3>
<p><a href="http://shop.oreilly.com/product/9781939902122.do">Developing a React Edge</a> by Frankie Bagnardi, Jonathan Beebe, Richard Feldman, Tom Hallett, Simon Højberg and Karl Mikkelsen was published by Bleeding Edge Press at November 2014. At 234 pages it covers a wide range of React related issues starting from the very basics and including aspects such performance tuning, server side rendering and testing.</p>
<p>As I haven't bought the book it is hard for me to evaluate how up to date it is. The book has both digital and paperback versions available. At Amazon the price is around $30 for both VAT included. At O'Reilly digital edition costs $22.99.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-d3-js" id="react-d3-js"></a><span class="text">React+d3.js</span><a class="header-anchor-select" href="https://survivejs.com/#react-d3-js">#</a></h3>
<p><a href="http://swizec.com/reactd3js/">React+d3.js</a> by <a href="http://swizec.com/">Swizec Teller</a> is a focused book at 63 pages. At <a href="https://leanpub.com/reactd3js">Leanpub</a> it's minimum price is $9 while suggested on is at $19 VAT excluded. There are expanded packages available that provide more material such as screencast and example code. In the book you will build a small data visualization project based on the technologies.</p>
<p>If you want a quick read that's straight to the point, this could be it. It's nowhere broad as <strong>Developing a React Edge</strong> for instance but if you just want to visualize data, this might work.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-beginner-s-guide" id="react-beginner-s-guide"></a><span class="text">React - Beginner's Guide</span><a class="header-anchor-select" href="https://survivejs.com/#react-beginner-s-guide">#</a></h3>
<p><a href="https://leanpub.com/react-beginner-guide">React - Beginner's Guide</a> by Daniel Schmitz and Daniel Pedrinha Georgii is a small, focused book. Its minimum price is $5 VAT excluded.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#effective-react" id="effective-react"></a><span class="text">Effective React</span><a class="header-anchor-select" href="https://survivejs.com/#effective-react">#</a></h3>
<p><a href="https://leanpub.com/effective-react">Effective React</a> by Ian Chursky covers the basic tools you need to get started with React. Also ECMAScript 6 is covered. Published through Leanpub, it's minimum price has been set to $16.99 (no VAT).</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#descubre-react" id="descubre-react"></a><span class="text">Descubre React</span><a class="header-anchor-select" href="https://survivejs.com/#descubre-react">#</a></h3>
<p><a href="https://leanpub.com/descubre-react">Descubre React</a> by <a href="http://soyjavi.com/">Javi Jiménez</a> is a Spanish introduction to React. It has 83 pages and its minimum price is $12.49 VAT excluded.</p>
<p>If you want a Spanish introduction to React, here's your only option at the moment.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pengenalan-reactjs" id="pengenalan-reactjs"></a><span class="text">Pengenalan ReactJS</span><a class="header-anchor-select" href="https://survivejs.com/#pengenalan-reactjs">#</a></h3>
<p><a href="https://leanpub.com/pengenalan-reactjs">Pengenalan ReactJS</a> by Donny Stark is an Indonesian introduction to React. It will be published through Leanpub. At the time of writing it has 34 pages. No minimum price has been set yet.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#rails-meets-react-js" id="rails-meets-react-js"></a><span class="text">Rails Meets React.js</span><a class="header-anchor-select" href="https://survivejs.com/#rails-meets-react-js">#</a></h3>
<p><a href="http://blog.arkency.com/rails-react/">Rails Meets React.js</a> by Marcin Grzywaczewski and <a href="http://robert.pankowecki.pl/">Robert Pankowecki</a> explains how to get started with React in Ruby on Rails environment. The book is available through Arkency for $49 and has over 150 pages.</p>
<p>Based on table of contents the book shows you how to get started from scratch, how to set up an effective asset pipeline and of course how to integrate with Rails. The book covers also concepts such as testing, forms and i18n. Note that React portions have been written in CoffeeScript.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-by-example" id="react-by-example"></a><span class="text">React by Example</span><a class="header-anchor-select" href="https://survivejs.com/#react-by-example">#</a></h3>
<p><a href="http://reactkungfu.com/react-by-example/">React by Example</a> by Arkency explains React through numerous examples. The book shows how to build a password strength meter, credit card input and Twitter posting box for instance. The book is available for $49 and has over 130 pages.</p>
<p>If you want to learn React through a series of specific examples this might be the way to go. Even though the book is in early access it has sold already over 200 copies.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#easy-react" id="easy-react"></a><span class="text">Easy React</span><a class="header-anchor-select" href="https://survivejs.com/#easy-react">#</a></h3>
<p><a href="http://easyreactbook.com/">Easy React</a> by <a href="http://www.wjgilmore.com/">W. Jason Gilmore</a> is available through <a href="https://leanpub.com/easyreact">Leanpub</a>. The book is currently in beta and the price starts from $14.99 without VAT. At the time of writing it has 83 pages.</p>
<p><strong>Easy React</strong> is a project based book and focuses on an application known as <em>VocabGiant</em>, a language learning tool. The book discusses a wide range of topics ranging from setting up a development environment, developing the app (Flux included), developing a backend (REST + Express + MongoDB) and React Native. So by the looks of it this should be a great book for a full stack developer!</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-under-the-hood" id="react-under-the-hood"></a><span class="text">React Under the Hood</span><a class="header-anchor-select" href="https://survivejs.com/#react-under-the-hood">#</a></h3>
<p><a href="https://leanpub.com/reactunderthehood">React Under the Hood</a> by Freddy Rangel is available through Leanpub. The minimum price of the book is $9.99 without VAT. At the time of writing it has around 80 pages of content. As per title, the book delves into the technical foundations of React.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#reactjs-cookbook" id="reactjs-cookbook"></a><span class="text">ReactJS Cookbook</span><a class="header-anchor-select" href="https://survivejs.com/#reactjs-cookbook">#</a></h3>
<p><a href="https://www.packtpub.com/web-development/reactjs-cookbook">ReactJS Cookbook</a> by Johannes Stein is available through Packt exclusively at the moment. It is on preorder for $39.68 and is due November.</p>
<p>As many books discussed by now, <strong>ReactJS Cookbook</strong> shows you how React components work and goes into topics such as animation, isomorphism, ES6 and testing. It is expected to have 301 pages.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-js-essentials" id="react-js-essentials"></a><span class="text">React.js Essentials</span><a class="header-anchor-select" href="https://survivejs.com/#react-js-essentials">#</a></h3>
<p><a href="https://www.packtpub.com/web-development/reactjs-essentials">React.js Essentials</a> by <a href="http://artemij.com/">Artemij Fedosejev</a> is available through Packt and Amazon. At Packt preorder price of the digital version is $23.80 while at <a href="http://www.amazon.com/React-js-Essentials-Artemij-Fedosejev-ebook/dp/B00YSILZRW">Amazon</a> Kindle version is available for $29.75. According to Packt site the book should been available in July but Amazon has expected date at January 2016.</p>
<p>The book is expected to have 194 pages. It covers basics of React and goes into architecture (Flux). There is also information about testing (Jest). No official table of contents is available as of yet.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#introduction-to-react" id="introduction-to-react"></a><span class="text">Introduction to React</span><a class="header-anchor-select" href="https://survivejs.com/#introduction-to-react">#</a></h3>
<p><a href="https://www.apress.com/9781484212462">Introduction to React</a> by Cory Gackenheimer is available through Apress and Amazon. At Apress digital edition is available for $17.99 while print costs $24.99. At Amazon paperback costs $19.68. The book is expected to be available at September.</p>
<p>The planned length of the book is 170 pages and it will cover basics of React, Flux architecture and testing at least. There is also specific discussion about JSX.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#pro-react" id="pro-react"></a><span class="text">Pro React</span><a class="header-anchor-select" href="https://survivejs.com/#pro-react">#</a></h3>
<p><a href="https://www.apress.com/9781484212615">Pro React</a> by Cassio de Sousa Antonio is available through Apress and Amazon. At Apress digital edition is available for $27.99 while print costs $39.99. At Amazon the print costs the same. The book should be available at December.</p>
<p>The book has 280 pages and covers a wide range of React related topics.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-up-running-building-web-applications" id="react-up-running-building-web-applications"></a><span class="text">React: Up & Running: Building Web Applications</span><a class="header-anchor-select" href="https://survivejs.com/#react-up-running-building-web-applications">#</a></h3>
<p><a href="http://shop.oreilly.com/product/0636920042266.do">React: Up & Running: Building Web Applications</a> by Stoyan Stefanov is available through O'Reilly and Amazon. At O'Reilly digital early access version costs $33.99 while print goes for $39.99. At Amazon print is slightly cheaper at $37.99.</p>
<p>Early chapters of the book are already available and according to Amazon the full book should be completed by December. The book will have around 250 pages.</p>
<p>I probably don't need to repeat myself here. Expect to learn basics of React and then some.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#master-react" id="master-react"></a><span class="text">Master React</span><a class="header-anchor-select" href="https://survivejs.com/#master-react">#</a></h3>
<p><a href="http://ludovf.net/reactbook/">Master React</a> by Ludovico Fischer doesn't have a lot of information available yet. Digital version of the book is due Autumn and there is some early content at the site.</p>
<p>By the looks of the book will go through a wide range of React related concepts. These include development tools, third party libraries, JSX and server-side React as with so many other books.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#mastering-react" id="mastering-react"></a><span class="text">Mastering React</span><a class="header-anchor-select" href="https://survivejs.com/#mastering-react">#</a></h3>
<p><a href="https://pragprog.com/book/lfreact/mastering-react">Mastering React</a> by The Pragmatic Programmers doesn't have a lot of information available. So far we know that it will have 250 pages and is due 10th of January, 2016.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#react-native-books" id="react-native-books"></a><span class="text">React Native Books</span><a class="header-anchor-select" href="https://survivejs.com/#react-native-books">#</a></h2>
<p>There's also an emerging category of React Native books and the first book has already been released and more are on their way.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#beginning-mobile-app-development-with-react-native" id="beginning-mobile-app-development-with-react-native"></a><span class="text">Beginning Mobile App Development with React Native</span><a class="header-anchor-select" href="https://survivejs.com/#beginning-mobile-app-development-with-react-native">#</a></h3>
<p><a href="http://beginning-mobile-app-development-with-react-native.com/">Beginning Mobile App Development with React Native</a> by <a href="http://manuel.kiessling.net/">Manuel Kiessling</a> is likely the first book on the market. It is available through <a href="https://leanpub.com/beginning-mobile-app-development-with-react-native">Leanpub</a> for $29.99 (no VAT) and has 82 pages guiding you into the topic.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#learning-react-native" id="learning-react-native"></a><span class="text">Learning React Native</span><a class="header-anchor-select" href="https://survivejs.com/#learning-react-native">#</a></h3>
<p>Learning React Native by <a href="http://blog.bonnieeisenman.com/">Bonnie Eisenman</a> is available through O'Reilly and Amazon. At O'Reilly digital early access version costs $33.99 while print goes for $39.99. At Amazon print is available for $32.59 and is expected to deliver at December. The book is around 200 pages long.</p>
<h3 class="header"><a class="header-anchor" href="https://survivejs.com/#react-quickly" id="react-quickly"></a><span class="text">React Quickly</span><a class="header-anchor-select" href="https://survivejs.com/#react-quickly">#</a></h3>
<p><a href="https://www.manning.com/books/react-quickly">React Quickly</a> by Azat Mardan, published by Manning Publications, delves through React related topics quickly as the title promises. The early access version costs $31.99. If you want the paperback as well, expect to pay $39.99.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>A lot of the React books have significant overlap. Their length ranges from very short (63 pages) up to quite long (301 pages). There's also wide variance in pricing as a result. The cheapest goes for $5 while the most expensive costs $49. There are both self-published options and books backed by a publisher. It is hard to comment on the quality of the books as I haven't read these.</p>
<p>The situation is very interesting. It's going to be difficult for a book to stand out content-wise. The biggest differentiating factor I can see is actually openness of the book. My book is a notable exception to the rule. It's going to be interesting to see if it makes any difference compared to the competition and publisher backed options.</p>
<p>Let me know if I missed some awesome book at the comments and I'll add it to the listing.</p>
SurviveJS - Webpack and React - v1.5asurvivejswebpackandreactv152015-07-31t00:00:00z2015-07-31T00:00:00Z<p>Compared to the previous tagged release (v1.1.0, 10th of July) this new one (v1.5.0) is a monster. 274 commits went into it and nine contributors took part. Of course it was up to me to do most of the work. That said it is always amazing to get external contributions. It always makes my day when I get one.</p>
<p>I have to give my biggest thanks to <a href="https://github.com/Foxandxss">Jesús Rodríguez Rodríguez</a>, my new official editor! It's not understatement to say that he motivated most of the changes you see in the current revision.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#book-improvements" id="book-improvements"></a><span class="text">Book Improvements</span><a class="header-anchor-select" href="https://survivejs.com/#book-improvements">#</a></h2>
<p>The book has been improved in various important ways:</p>
<ul>
<li>The early part of the book gets faster to the interesting parts (i.e. React). I removed some of the fluff (Flow, redundant <code>index.html</code> etc.) and eliminated the old <code>Getting Started</code> chapter. Now you jump straight to <a href="https://survivejs.com/webpack_react/developing_with_webpack">developing with webpack</a>.</li>
<li>There's a new chapter about <a href="https://survivejs.com/webpack_react/building_kanban">building the Kanban project</a>. I focus on production related concerns there solely and discuss various related techniques. I believe some of those might be useful even if you don't care about the project itself.</li>
<li>The architecture of the Kanban application has been revamped to be singleton based. This is more faithful to the way <a href="https://facebook.github.io/flux/docs/overview.html">Flux architecture</a> has been designed to use. There are some parts of code that aren't particularly beautiful and there's likely some room for improvement.</li>
<li>More insightful explanations. Instead of dropping some code and waiting you to decipher it I've moved to <strong>explain</strong>, <strong>show code</strong>, <strong>what happened</strong> kind of model that should be hopefully easier to follow.</li>
</ul>
<p>In addition there are hundreds of other fixes. But you know me, I don't like to ramble too much. You can see GitHub for <a href="https://github.com/survivejs/webpack_react/compare/v1.1.0...v1.5.0">all changes</a>.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#known-issues" id="known-issues"></a><span class="text">Known Issues</span><a class="header-anchor-select" href="https://survivejs.com/#known-issues">#</a></h2>
<p>The portions dealing with Alt don't support hot loading yet. I will have to craft a pull request to fix <a href="https://github.com/goatslacker/alt/issues/408">a hot loading issue</a>. Doing that should improve your experience a bit. So be prepared to refresh the old fashioned way for now.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I will prioritize my work depending on the feedback this release receives. I know some of the current content can be pushed further. For instance deployment chapter could use some TLC. On the other hand it would be a good idea to start serving my paying clients (i.e. Leanpub readers) better.</p>
<p>Given I want to provide the guys that support me a little extra something I've thought of making <a href="https://github.com/survivejs/webpack_react/issues?q=is%3Aopen+is%3Aissue+label%3A%22bonus+chapter%22">bonus chapters</a> available on early access through Leanpub. The chapters would become available to public as certain conditions are met.</p>
<p>In order to encourage you to encourage me I could tie it to amount of readers. There are two hundred readers right now. I could release a new chapter as another two hundred are gained for instance until I run out of chapters to write. I believe this would be a fair way to deal with it.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope you enjoy this release. There's a lot of content to go through. As usual <a href="https://github.com/survivejs/webpack_react/issues">feedback</a> and pull requests are welcome. I hope you enjoy the improved version of the book.</p>
<p>Remember that you can support my work by <a href="https://leanpub.com/survivejs_webpack_react">purchasing the book at Leanpub</a>. Every little bit counts and allows me to keep it up.</p>
Web Design is Scrappyawebdesignisscrappy2015-07-17t00:00:00z2015-07-17T00:00:00Z<p>If you had to describe my approach to web design in one word the word would be scrappy. I rather get something to work fast than agonize on details. It is going to take a fair amount of iteration no matter what. This site is a good example of scrappy design.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#getting-scrappy" id="getting-scrappy"></a><span class="text">Getting Scrappy</span><a class="header-anchor-select" href="https://survivejs.com/#getting-scrappy">#</a></h2>
<p>I started from a base design created by <a href="http://eldh.co/">Andreas Eldh</a>. We have developed a static site generator known as <a href="https://antwarjs.github.io/">Antwar</a> together. Incidentally it is based upon webpack and React. And Antwar itself is based on an <a href="http://braddenver.com/blog/2015/react-static-site.html">experiment by Brad Denver</a>. Feeling scrappy yet?</p>
<p>As nothing is harder than evaluating your own work I looked actively for feedback during the development process. I had to <a href="https://antwar.js.org/blog/antwar-050/">develop Antwar further</a> in order to reach my goals. Besides the technical part I also had to make sure the content is accessible and that there's marketing copy in place.</p>
<p>The design is scrappy in sense that I integrated ideas from various sources. Sometimes I might realize something randomly and will just add it there. A good example is the recent addition of commenting per chapter. I understood it might be a nice way to get some extra feedback on content and help me to see potential problems clearer. And given it was fast to add, it made perfect sense.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#services-to-support-scrappy-design" id="services-to-support-scrappy-design"></a><span class="text">Services to Support Scrappy Design</span><a class="header-anchor-select" href="https://survivejs.com/#services-to-support-scrappy-design">#</a></h2>
<p>Besides asking for feedback from friends and sometimes total strangers I used a couple of services with varying results. Out of the services <del>criticue</del> (now defunct) worked the best for me. Often it's the negative feedback that helps you the most. Criticue helped me to prune out the worst mishaps.</p>
<p>As I had good experiences of Feedback roulette (defunct now) in the past I set it up too. Unfortunately I have yet to receive single useful round of feedback even though I have a single credit for testing.</p>
<p><a href="http://fivesecondtest.com/">Five Second Test</a> was useful for getting answers to specific design issues. I didn't use it a lot, though, but I can see its value. The response times were adequate as well.</p>
<p>All of these services allow you to earn credits by providing feedback yourself. Even though this takes time it can be enlightening to see designs of other people and help them to improve. Perhaps over longer term you might develop a stronger intuition for design.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>I believe the current design of the site is quite passable. It doesn't remind me of the 90s too much at least. I'm sure it could be better in some ways but as they say you are blind to your own work. I have outlined some issues I'm aware of at the <a href="https://github.com/survivejs/site/issues">site issue tracker</a>. If you have any ideas, please set up issues there for me to study or comment on this post.</p>
<p>I would love to have more functionality on the site. Even though Disqus comments work I believe Medium style commenting system would work better for books. Unfortunately I haven't been able to find a suitable 3rd party service for this purpose yet.</p>
<p>It would be nice to have more interactivity. Web as a platform would allow that but of course it's going to require a lot of work to pull off. That said if you are aiming for the maximum amount of awesomeness, go interactive.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-could-have-been-done-differently-" id="what-could-have-been-done-differently-"></a><span class="text">What Could Have Been Done Differently?</span><a class="header-anchor-select" href="https://survivejs.com/#what-could-have-been-done-differently-">#</a></h2>
<p>I would have probably saved a great deal of time by going with some established solution such as <a href="https://wordpress.com/">WordPress</a> or <a href="http://jekyllrb.com/">Jekyll</a>. <a href="https://pages.github.com/">GitHub Pages</a> supports Jekyll particularly well and I have even written a <a href="http://yeswejekyll.com/">scrappy guide for it</a> so I know the topic. I'm also aware of the limitations of Jekyll. Developing Antwar gave me a good excuse to learn more about the topic.</p>
<p>Whole site design could have been bought from elsewhere. Same goes for marketing copy, photography and such. In fact this given me a good excuse to work on these skills. That said it may be a good idea to use professional services in the future. After all they have spent years honing their skills and will be able to get better results faster.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>I hope this brief post gave you some idea of why the site is the way it is. If you like the design or just want to study how it has been made, check out the <a href="https://github.com/survivejs/site">site repository</a>. The source itself might be a little scrappy in parts but that's to be expected. It's a scrappy design after all!</p>
<p>I suppose the nicest thing about working on a webpack and React stack is that it gives me a nice amount of flexibility. I can build layouts using React and author using Markdown. That's the best out of both worlds. Antwar is still missing some of the functionality you might expect (pagination, tagging etc.) but it keeps on growing as I use it. No need to aim for perfection the first time around.</p>
<p>I feel web design is scrappy by definition. It is hard to get everything right the first time around. It is a good idea to leave room for creativity and experimentation. I suppose taken further you would start running tests on your site and looking at the numbers. So far my approach has been guided by intuition and might not be the best when compared to data based approaches.</p>
Reaching Towards the Next Levelareachingtowardsthenextlevel2015-07-15t00:00:00z2015-07-15T00:00:00Z<p>In <a href="https://survivejs.com/blog/balance">my previous post</a> I discussed some of the difficulties of related to technical publishing. I also presented a possible solution, a mixed model that might make open publishing more feasible. The idea is that starting closed and asking for money beforehand you reward early adopters while decreasing the risk of the author. As the content gets opened eventually others can benefit from it. I know this goes against the common wisdoms of book publishing but it's a model I would like to try.</p>
<p>It has become apparent to me that if I put my weight behind it, I could grow this into a business that's able to support me and perhaps a few others should I get so lucky. Even though Finland has its issues it isn't a bad place to start a company. In fact there's support for starting businesses that can help to cover starting costs up to 18 months. It will be enough to get past the beginning stage.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-would-a-viable-business-look-like-" id="what-would-a-viable-business-look-like-"></a><span class="text">What Would a Viable Business Look Like?</span><a class="header-anchor-select" href="https://survivejs.com/#what-would-a-viable-business-look-like-">#</a></h2>
<p>In order to get by I would have to make around $1500 per month after taxes. That's $50 per day. In terms of book sales that would mean five sales per day assuming a book costs $20 (half goes to side costs). It doesn't sound so hard when put this way.</p>
<p>Fortunately book sales aren't the only towards a sustainable business. More specialized products can be built on top of the freely available content. In addition I'm open to consulting. In the end it comes down to finding the ways in which I can be most useful and provide most value.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#it-s-about-helping-other-developers" id="it-s-about-helping-other-developers"></a><span class="text">It's About Helping Other Developers</span><a class="header-anchor-select" href="https://survivejs.com/#it-s-about-helping-other-developers">#</a></h2>
<p>As a developer myself I have known my share of pain. SurviveJS is about that. I want you to avoid some of that pain. If I can make someone's life a little easier through SurviveJS I have done my job.</p>
<p>Besides helping developers I would love to be able to help smoothen the way for other technical authors. Getting started is tough and anything you can do to make it less so is welcome. Leanpub helps in its own way but it isn't nearly enough. There are just so many things to worry about. And should you fail at some critical aspect, you end up with a dud.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#next-steps" id="next-steps"></a><span class="text">Next Steps</span><a class="header-anchor-select" href="https://survivejs.com/#next-steps">#</a></h2>
<p>My next major goal is to resolve the biggest remaining issues related to the book and get a release out on 31st. After that I'll expand distribution to see if that makes any difference.</p>
<p>I have a couple of older books in backburner waiting to be edited. One of them is <a href="https://christianalfoni.github.io/react-webpack-cookbook/">Webpack and React Cookbook</a>. It deserves a refresh and an editing pass. As the content is already freely available that won't change. Ebook will cost, though, and will hopefully provide some financial relief.</p>
<p>Another, older effort known as <a href="https://github.com/survivejs/js_tricks_and_tips">JavaScript Tips and Tricks</a>, will require a bigger refresh. It's actually the original "SurviveJS" and the reason why I ended up with the name. The idea of this book is to go through a variety of JavaScript techniques to give you deeper insight to the language. It won't be a long book. It's more of a "oh, I can do that?" type of an affair.</p>
<p>Over shorter term I want to establish little streams like these. After all every dollar counts at this point. The sooner I can reach my viability goal, the better. Over longer term I would love to grow the brand to help other technical authors. But before I can do that I need to help myself and figure out these things. Fortunately I won't have to do that alone as community support has shown.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Becoming incorporated is both an exciting and a scary step. So far community response has been great so why not to push it and see if this can be turned into a real business? The numbers look realistic to me. In the worst case it won't work out and I end up with a ton of references to use at a job interview. In the best case I'll have a little business that will allow me to produce even more content and most importantly keep on helping.</p>
Balancing Between Open and Closed Publishingabalancingbetweenopenandclosedpublishing2015-07-14t00:00:00z2015-07-14T00:00:00Z<p>If there's one thing technical authors have in common, it's that they all want to help other people. The question is how to achieve that most effectively. In my <a href="https://survivejs.com/blog/the-story-so-far">previous post</a> I discussed how I have fared with my first effort so far. The results have been mixed. Community response has been amazing in many ways but that hasn't translated to amazing sales. That said I'm grateful to all that have contributed. In the end sales enable further efforts.</p>
<p>I was likely naive in thinking that having the content freely available while offering a way to purchase a digital copy would work by default. The greatest benefit of this approach has been possible extra visibility (easy to link) and the amount of external contributions. I believe this has improved the quality of the book further than I could have ever achieved alone. Next time around I might have a group of people that are interested in pushing the content straight from the start!</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#current-publishing-solutions" id="current-publishing-solutions"></a><span class="text">Current Publishing Solutions</span><a class="header-anchor-select" href="https://survivejs.com/#current-publishing-solutions">#</a></h2>
<p>As an author you have a couple of options. You can try to pitch your idea to an established publisher. They would take care of the logistics, provide editing and help with the marketing and sales efforts. In return they would take a significant chunk of the profit. Normally you can expect a royalty between 15 and 50 percent per sale depending on the publisher. If you are a tough negotiator you can receive an advance. That will help to fund authoring and will be deduced from potential profits.</p>
<p>Another option is to self-publish. You will take care of the bits a traditional publisher would. In return you receive a larger chunk of the profit but on the downside you have more work ahead of you. Especially as a first time author this will include some additional risk as you have to learn these things. If you don't have a pre-existing audience you will have to earn it. More established authors have an advantage here.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#self-publishing-approaches" id="self-publishing-approaches"></a><span class="text">Self-publishing Approaches</span><a class="header-anchor-select" href="https://survivejs.com/#self-publishing-approaches">#</a></h2>
<p>If you choose self-publishing you have some additional alternatives. You can do it the old fashioned way. First you find the potential reader somehow, demonstrate the value and close the sale. This isn't the only way, though. Making the content freely available makes the sales effort voluntary. You can gain value, consider it zero and move along.</p>
<p>You can also try to compromise between these ends. Having some of the content available may encourage the potential reader to purchase the rest. You can also refine the content into different formats (audio/video) and aim to produce most of the income through that. A book can give you certain amount of prestige and lead to consulting opportunities.</p>
<p>The biggest benefit of having the content freely available is that it becomes easy to share it. It won't feel like selling. You can gently point towards your content without feeling too bad. Your readers can contribute directly without having to go through an errata process. Business-wise the problem is that you are relying on generosity.</p>
<p>If you want something equivalent to an advance, there are a couple of alternatives. Platforms such as <a href="https://www.kickstarter.com/">Kickstarter</a> or <a href="https://www.indiegogo.com/">Indiegogo</a> have become popular. Essentially they provide one way to receive pre-sales and validate the concept. Platforms such as <a href="https://www.patreon.com/">Patreon</a> allow you to receive donations that can contribute towards your efforts. Feasibility of these depends upon your legislation.</p>
<p>To measure potential interest before moving on with your idea you can set up a light landing page. There are services such as <a href="https://www.launchrock.com/">Launchrock</a> that will allow you to set up one easily. You can start gathering emails of the interested readers and begin to build your audience. I went the hard way and build a site of my own but that doesn't mean you have to.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#an-alternative-self-publishing-approach" id="an-alternative-self-publishing-approach"></a><span class="text">An Alternative Self-publishing Approach</span><a class="header-anchor-select" href="https://survivejs.com/#an-alternative-self-publishing-approach">#</a></h2>
<p>Given it is not possible for me to leverage donations or crowdfunding without potential trouble I started thinking about alternatives. It seems to me it should be possible to merge some of the best features of both open and closed approaches.</p>
<p>I like how open approach fosters contribution. It is encouraging and helps you to refine your content better faster. The problem is that it is difficult to demonstrate value and convert that into sales. The closed approach doesn't have that problem but contributing won't be as easy. In addition linking to content isn't going to work by definition.</p>
<p>What if it was possible to take a bit of open, a bit of closed and a bit of Kickstarter, mix it together and end up with something that works for both authors and readers? I imagine it could work as a graduation process:</p>
<ol>
<li>A book idea is identified based on community demand. You as an author pick it up, perform further market study on it and decide to proceed based on that.</li>
<li>The book will get started in a closed incubator (private GitHub repository for instance) and pre-sales begin. Early adopters will receive access to the content and will be able to contribute towards development of the book.</li>
<li>After a predefined sales threshold is reached (Kickstarter bit) the book content will become available to the public. To make sure book content becomes open despite the sales, a time limit (a year or two?) can be set after which it will become open.</li>
</ol>
<p>The idea is that by starting closed you provide incentive for early adopters to buy due to exclusivity. Just being able to contribute towards the development of the book can be a good incentive. You will still get contributions just like in an open model. This requires a certain level of trust, however. What if someone forks the content and runs with it?</p>
<p>The Kickstarter bit is there to push community towards a common goal. Open content is valuable as it will allow people to access knowledge regardless of their income. It is a shame to see old books become forgotten due to long copyright terms. The time limit is a way to work against this.</p>
<p>Too often good technical books become obsolete in a blink. Having them maintained by the community that uses them actively seems like a good idea to me. After all this is the way open source has proven to work.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Perhaps hitting some kind of a balance between open and closed ways of publishing would pave way for more technical authors. In addition it should help in keeping the content fresh. That is a problem that plagues technical books in particular. Technology tends to be a moving target and having books with better longevity isn't a bad goal.</p>
<p>I believe an alternative model such as this could help to alleviate some of the risks involved. I am certain there are problems I am overlooking. But based on what I've seen perhaps it could work. What do you think?</p>
SurviveJS - The Story So Farasurvivejsthestorysofar2015-07-13t00:00:00z2015-07-13T00:00:00Z<p>Given I'm a first time author I've done my fair share of mistakes with <a href="http://survivejs.com/">SurviveJS - Webpack and React</a>. It was an attempt to change the direction of my career. Being a subcontractor's subcontractor provides income, sure, but was a dead end for me with no room to grow in an economy that keeps getting tougher. Interestingly the book has garnered a lot of attention and I believe some have found it useful. It has been bit of a disaster economically and it's hard to imagine I could keep a business like this up for long if something doesn't change.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#why-survivejs-webpack-and-react-was-written-" id="why-survivejs-webpack-and-react-was-written-"></a><span class="text">Why SurviveJS - Webpack and React Was Written?</span><a class="header-anchor-select" href="https://survivejs.com/#why-survivejs-webpack-and-react-was-written-">#</a></h2>
<p>The first steps towards the book were taken at the end of January. I happened upon <a href="https://christianalfoni.github.io/javascript/2014/12/13/did-you-know-webpack-and-react-is-awesome.html">a blog post about Webpack by Christian Alfoni</a>. As I had worked with webpack and React earlier I of course couldn't resist commenting. I even proposed that it would be nice if there was a cookbook about the topic. The comment has been lost to the history but Christian took on my initiative. As a result <a href="https://christianalfoni.github.io/react-webpack-cookbook/">react-webpack-cookbook</a> was born.</p>
<p>We worked on it together for a few weeks and I started to realize there's demand. It would have saved me so much time if someone had gathered this information to one place. As a result I poked a contact of mine at a quite known book publisher that pays decent royalties. And so the negotiations began. We negotiated till early April but in the end the publisher wasn't interested. We failed at writing style.</p>
<p>That could have been the end of the story but the opportunity seemed too good to miss. There was a clear demand for a book. Why not to write it? As Christian got busy with work and I was getting increasingly frustrated with my situation I decided to channel the frustration towards something constructive and so I started writing the book. Sometimes you have to go "all in" no matter what.</p>
<p>As I didn't feel like going through another round of negotiations with other publishers and I was aware of <a href="https://leanpub.com/">Leanpub</a> I decided to pick them. Early on I agreed with Christian to keep the material open. I was a bit hesitant at first but the approach has shown some of its benefits. I'm still a bit unsure about the financial part, though.</p>
<p>The nice thing about Leanpub is that it allows you to test the market so to speak. I actually released the initial, raw version of the book for free and slowly but surely started to bump up the price as the content matured. That allowed me to gauge interest in the topic. One day Leanpub decided to feature the book and this in turn converted to a nice amount of sales. It always gives you an extra dose of motivation to see people actually appreciate your work.</p>
<p>An alternative would have been to start pre-sales through a platform such as <a href="https://www.kickstarter.com/">Kickstarter</a>. Unfortunately that was not an option for me as a finn given our legislation is against it. There are strict regulations against donations to protect citizens against fraud. Even though understandable it can be a little restricting at times.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#where-i-failed-" id="where-i-failed-"></a><span class="text">Where I Failed?</span><a class="header-anchor-select" href="https://survivejs.com/#where-i-failed-">#</a></h2>
<p>Having the content <a href="https://github.com/survivejs/webpack_react">out in the open</a> has resulted in numerous external contributions. I believe this has contributed towards the quality of the book immensely and will continue to do so. But here lies the great conundrum. Why would you pay for something that's freely available?</p>
<p>So far the book has earned around $1177 excluding Leanpub's cut (10% + $0.50 per sale). After all the middlemen (PayPal, government, co-op) get their cut and taxes have been paid, that translates to 614 euros. That would be even less if I earned more per year due to the way tax progression works. It would have been more profitable for me to fiddle my thumbs at home and live on social security.</p>
<p>The big question is can this situation be changed somehow? I would of course love to keep on developing content. The goofy prefix <code>SurviveJS</code> implies a series of book. But if I can expect profits like this it just doesn't make any sense economically. Even though I write because I want to write I still need to make enough to have butter on my bread.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#what-next-" id="what-next-"></a><span class="text">What Next?</span><a class="header-anchor-select" href="https://survivejs.com/#what-next-">#</a></h2>
<p>The initial plan was that people that feel they get value out of the book would buy the digital version to help fund the maintenance effort and development of new content. Unfortunately this isn't working out as you can see from the figures above. Sure, the book might generate some income but nowhere enough to make this worth it financially.</p>
<p>As far as I can see there are a few options. The easiest option would be just to give up and move onto something more profitable. I had a good run but it wasn't enough this time. End of story. That would be a silly way to end this, though.</p>
<p>As donations are illegal that rules out Kickstarter, Patreon and such. I can see these approach have worked for many but unfortunately it's not possible here.</p>
<p>I could stop maintaining the open content while putting all the effort to a superior, commercial version. I feel this might result in a lot of bad karma, though. That said I could develop commercial content on top of the free content and sell that perhaps.</p>
<h2 class="header"><a class="header-anchor" href="https://survivejs.com/#conclusion" id="conclusion"></a><span class="text">Conclusion</span><a class="header-anchor-select" href="https://survivejs.com/#conclusion">#</a></h2>
<p>Even though the book has been a success in some ways and exposed people to webpack and React, unfortunately it has failed in the only way that matters in the end. If there's not a sustainable source of income it is hard to justify the effort financially. I would love to develop more content but if the invisible hand decides it's not possible, then it's not.</p>
<p>In the end if we want to keep this project alive we'll need to climb that final, financial hurdle. It is the hardest hurdle for me as I may have to bend on some of my principles. How is it possible to combine open content and business?</p>