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.

FullStack 2017 Recap

By on August 7, 2017 12:28 pm

FullStack is JavaScript conference in London hosted at the Skills Matter CodeNode. This year the conference provided a wide variety of interesting talks and topics related to JavaScript, exposing the audience to a wide range of information. Kitson Kelly, SitePen’s CTO and myself enjoyed attending, speaking and meeting a number of people.

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.

Less Clicking, More Binging

By on August 1, 2017 9:05 am

Whether it’s Game of Thrones or an old season of Rupaul’s Drag Race, it’s pretty likely you’ll be streaming something tonight from your TV. Netflix, Hulu, Sling — these are the apps that dominate our quiet evenings. And while many of us don’t consider them apps, they are services that we consistently interact with on a daily basis. But despite how ubiquitous these apps have become in our lives, there is one thing they are getting wrong — the user experience for navigating content.