Blog React

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.

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 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.

If we chose our JavaScript Framework like we chose our music…

By on June 13, 2017 9:20 am

…we would all be using justin-bieber.js. We as an organization have been working with JavaScript since 2000. We have seen frameworks rise and fall, including being responsible for some of them. We have seen trends come and go. We have seen browser dominance ebb and flow. We have seen winners and losers. We have seen JavaScript go from an obscure simplistic scripting language to the language of the internet. Through all of this we have experienced and learned a lot. We would like to share some of that with you.

Probably the most common question we get asked as we get to know an organization is “What framework should I use?” No matter what some people would have you believe there is no straightforward answer. The answer though is founded in our typical response of “What are you trying to do?”

Death of Object.observe()

By on November 6, 2015 9:47 am

flight

Adam Klien, software engineer at Google, announced on ESDiscuss that they were withdrawing the proposal to implement Object.observe and plan to remove it from V8 by the end of the year.

While I was never sold on the approach of this API, I assumed long ago it was the API that would be used for data binding to plain old JavaScript objects. I am also surprised because I was discussing the state of Web Components with a member of TC39 just a few weeks ago. While I listed all the parts of Web Components that are in V8/Blink but not elsewhere, including Object.observe, they assured me the other browsers would eventually implement the rest of Web Components. I also missed that Polymer 1.0 abandoned Object.observe.