Blog ES6

State of Modern Component Styling

By on August 17, 2017 9:47 am

As new user interface component frameworks are created and old frameworks are replaced with emerging technologies, methods for styling those components must change with them. Long gone are the days of creating a simple HTML component and importing a simple CSS file with corresponding class names. Concerns such as style leaking, local DOM manipulation and theming are driving changes to the approaches we take. With developer IDEs and the JavaScript language itself and extensions such as TypeScript becoming more intelligent and allowing auto-completion, should our styling approaches not give us the same? In this world of intelligent auto-completion, why should we expect developers to remember and replicate matching class names across CSS and HTML? Modern frameworks are adapting to this shift and there are many different solutions to the problem of making styling and theming more intuitive. Here we will explore some of these solutions.

Higher Order Components in React

By on August 15, 2017 10:14 am

Traditionally, engineers use mixins, decorators, inheritance, and plain code duplication to add common functionality to a handful of components. Mixins and decorators can modify the target object in such a way that you are never really sure what methods are safe to override without unwanted side effects. Inheritance can quickly get out of hand as you choose a base class and later discover that you actually need functionality from several base classes. Code duplication increases your technical debt and creates more work later. Sometimes, these patterns are the smart choice to solve your problem, but often, you can solve them more effectively with higher-order components.

Web Frameworks: Common Usage

By on August 10, 2017 10:13 am

Previously on Web Frameworks, we looked at how various frameworks deal with the concept of applications. Akin to listening to the whole album, we got a sense of how the frameworks pull it all together. In this post, we explore what are common types of applications and how the frameworks we are considering might work in those use cases. If you are going to throw a party, you want to know if your favorite band is going to set the right mood.

Wrapping Web Components With React

By on August 8, 2017 9:38 am

There are many reasons to like React. It provides a nice library for writing reusable components and leverages its own virtual DOM, abstracting away the obtuse native DOM APIs in favor of a simple method calls, which are further abstracted away with a JavaScript language extension, JSX. Numerous other reactive and virtual DOM solutions exist that provide a similar level of abstraction. These solutions diff the current and next state and properties of components in the virtual DOM to determine if and where changes are needed in the actual DOM, resulting in a performant, testable abstraction for writing new components. React is also lightweight in that it is not a full application solution. It simply provides the framework for reusable components that can be plugged into any web application.

Web Frameworks: Applications

By on August 3, 2017 9:51 am

Applications built with web technologies, something that was a curiosity a few short years ago, have emerged onto the scene as a must have for most organizations. Transcending websites and providing users with a more open and unbounded experience, web applications are everywhere. Likely the main reason you are reading this series is to determine how modern frameworks enable you to build web applications.

Event Delegation: Pattern or Anti-Pattern?

By on July 11, 2017 11:50 am

A significant amount of work on JavaScript toolkits and frameworks has centered around trying to fix, normalize, and optimize browser implementations. Doing so requires making many assumptions about what the problems are, how our tools will be used by developers, and what we expect of the future.

The assumptions made often turn out to be wrong. What’s worse is that these choices may prove to be correct for a very long time before coming back to bite us. During this period of blissful ignorance, toolkits can become tremendously popular and become a vital part of large, complex codebases.

Web Frameworks: Foundational Technologies

By on July 6, 2017 11:23 am

We have previously discussed the look and feel of web frameworks. While we often become interested in a framework based on the stylishness of the widgets and applications it can create, this may lead to a similar approach to how we have historically selected music. Traditionally, you would go out, buy an album, maybe from a band you knew, with a great album cover and a list of interesting tracks.

Perhaps the album was currently #1 in its popularity on the Billboard charts? Maybe you even sample a few tracks while in the music shop. However, once you got home with your CD and played it over your kick-butt, valve amplified, highly optimized sound system, you find out that it was mixed by someone who thought that no one listening on an MP3 player through cheap headphones would ever notice the low sample rate and removal of the bass! Instead of feeling like you are in the middle of a concert, you feel like you are listening to a band playing in a toilet over a phone. So the album was optimized for its look and feel while ignoring the foundational architecture needed to create an album that scales under the demands of a highly optimized stereo system!

Web Frameworks: User Experience Design

By on June 27, 2017 9:57 am

While instruments such as guitar and drums are part of a band, how they are used by the musicians define the style of the band’s music. Similarly, the elements of an application user interface connected together define the user experience. In this post as part of our ongoing series about frameworks, we are going to explore in depth the ways in which frameworks enable an overall UX design.

Intern and JavaScript Testing in 2017

By on June 22, 2017 12:24 pm

Since we released Intern in 2013, the state of JavaScript testing has changed substantially. The JavaScript world was a very different place. Node.js was at version 0.8, and core modules like http were still being heavily developed! Popular tools like webpack, React, and TypeScript were still in the early stages of development. Jasmine was probably the most popular testing framework for JavaScript, although there were were several other tools in common use such as Mocha and QUnit. WebDriver testing with JavaScript was still a fairly manual affair unless you used a cloud testing service like Sauce Labs or BrowserStack.

Web Frameworks: User Interface Development

By on June 16, 2017 4:32 pm

Whether it is Top 40 or classical or R&B, artists and music have a recognizable look and feel. When looking at frameworks, some simply provide us with a bag of instruments, while others provide us with chord progressions and album covers we can customize.