It’s Never Been Better to Get Started with Cypress Web Tests

By on in Development, JavaScript

If your project could at all be described as a web application, your UX pipeline would likely benefit from adopting Cypress. Beating out Selenium on speed as well as breadth of testing tools, Cypress provides automated testing of your website’s critical features in a matter of minutes.

A testing framework built on top of many familiar techs — Mocha, JQuery, Chai — Cypress can be a frustrating product because, though it looks familiar, it behaves in unfamiliar ways. But its powerful tooling means mastering this framework is well worth the effort.

Here are the most important things to know as you dive into Cypress.

Continue reading …

Migrating From Sprockets to Webpacker

By on in Development, JavaScript, Rails

Starting with Rails 6, Webpacker became the default asset compiler, replacing sprockets–better known as the asset pipeline. While the asset pipeline was a big step for its time in making it easy to package JS, CSS, and images, webpack has matured enough to do all of the above and more, due to modern JavaScript’s support for modular imports and exports.

Why Migrate?

Personally, the biggest benefit of webpacker is how it encourages me to think about structuring assets as components so that they are theoretically portable and do not rely on hidden globals. And by using an extensible tool like webpack under the hood, you can take advantage of popular plugins and customizations to tune what you need – like deduplicating shared imports, in both JS and CSS. Finally, you’re not limited to just extending webpack: it’s much easier to tap into the huge ecosystem of npm packages.

Below is a breakdown of how to start moving from sprockets to webpacker.

Continue reading …

The Best of Both Worlds: HTML Apps & Svelte

By on in Development, JavaScript, Open Source, Rails

At Carbon Five we try to be agile about our technology choices and pick the simplest tool for the job at hand. That means that even in 2019, the era of React and Redux and GraphQL and all the other fancy tools for client-side web applications, sometimes the best tool for our clients is a good old Rails app, serving HTML.

Often the vision for the project pushes us towards a Single Page Application instead — maybe the app is going to be highly interactive or include realtime data, or the client is already invested in a front-end framework. In those cases, of course, we’ll reach for React or Angular or Vue. But for the traditional CRUD app that just needs to show some data and let users update it, a small team of experienced Rails developers can get an idea to market incredibly quickly.

Continue reading …

Optimizing Performance in React 16.8

By on in Development, JavaScript

In smaller projects, React offers snappy performance – the virtual DOM diffing means updates can happen quickly and for the most part, things just work. But, particularly when you’re dealing with large data sets, things can bog down as every render loop causes many unnecessary renders of components which have not actually changed.

React Dev Tools comes with a profiler that can help pin down the problem, and React 16.8 came with some features to make it easier to improve performance of functional components. But to use these tools effectively you need to know what the problem is and how to find the culprit.

Continue reading …

A Proposal: Elixir-Style Modules in JavaScript

By on in Development, Elixir, JavaScript

Moving your code towards a more functional style can have a lot of benefits – it can be easier to reason about, easier to test, more declarative, and more. One thing that sometimes comes out worse in the move to FP, though, is organization. By comparison, Object Oriented Programming classes are a pretty useful unit of organization – methods have to be in the same class as the data they work on, so your code is pushed towards being organized in pretty logical ways.

Continue reading …

Taking Elm for a Test Drive

By on in Development, JavaScript

Elm emerged on the scene in early 2012 as a strongly-typed, functional language that compiles down to Javascript. With its architecture and type system, it claims to provide bulletproof guardrails to help developers build systems that are highly reliable, with “no runtime exceptions in practice”.

Elm prides itself on having a low barrier of entry – it can be introduced as a component into an existing web app, so long as your app can provide it a self-contained div. In fact, the creators of Elm strongly advocate taking an incremental approach to introducing Elm into your systems.

Lately, a few Carbon Fivers and I have been taking the language out for a spin and discovering what it means to write software systems in Elm. In this post, we’ll walk through what it looks like to take a small form widget written in vanilla jQuery and convert it to Elm, picking up language basics and learning to write apps the Elm way. We’ll also discuss the unique feature set that makes Elm apps so reliable.

Continue reading …