A Foot In Each Realm: Server-Side Rendering & Client-Side Rendering

2020 ended with a very interesting update from the React team at Facebook. They announced that they are currently experimenting with a revolutionary new concept in React: Zero-Size-Bundle React Server Components (see the React team’s announcement here). Behind the verbosity of this name is a fundamental shift in how React works. The basic idea is that some components may be rendered on the server. The motivation behind this is the same motivation behind many of React’s releases: performance. Zero-Size-Bundle React Server Components are not yet in production and are still very much in a research and development phase. Therefore, it…

React Logo
React Logo

One of the predominant concerns of front-engineering is the achievement of optimal performance in an application. Decisions — both on a structural level and on a code level — are made with this in mind. One of the reasons why React is so popular with engineers and businesses is that it encompasses a wide range of features that enable performance optimisation. These include the library’s light weight, its broad suite of built-in hooks and memoisation, to name just a few.

One feature of React which is very effective in providing optimisation of performance is its built-in code-splitting feature.

Dynamic Imports

Typically with…

Fish hook
Fish hook

With the introduction of React Hooks in version 16.8 of React back in 2019, many developers have shifted away from class components in favour of functional components, as state can be introduced and managed within a functional component.

The two most commonly used hooks are useState and useEffect. Indeed, these tend to satisfy the basic requirements of many components. useState allows the developer to create a value in state and update that throughout the component. useEffect allows the developer to execute a function after the rendering of a component is complete (see my other article on this topic here).

However…

Unit testing is now rightly accepted as an integral step of software development. Software reliability feeds directly into business sustainability for many companies: broken software can tarnish a business’ reputation, cause major disruption for customers, and cost a business a lot of money.

Particularly as component-based software has become standard, the impact of broken code can be widespread and not limited to only one feature. A high degree of test coverage for an application is very important. One approach to unit testing is Test-Driven Development.

The basic idea behind Test-Driven Development is that unit tests are written before a piece…

UI Performance has the potential to be the primary factor in determining UX quality, and thus growing or hurting your business. For many web applications, it can be where costs gather as the application evolves and is enhanced in other ways. Most UI libraries and frameworks that have been launched over the past number of years have reflected serious efforts by their developers to address common UI performance challenges, with varying degrees of success. React has succeeded in providing extremely effective solutions to these technical — and indeed business — problems.

React Logo
React Logo

Included within the release of React version 16.6.0 was…

Many large-scale enterprise applications — both internal and external — require a substantial amount of form handling. It acts as the means by which users provide the data that feeds into the engine of a system and which can later be analysed in such a way that reports are innovatively generated and presented to stakeholders or customers for various purposes.

From a UX/CX and business point of view, it is important that form handling is achieved in such a way that users are content to provide a complete and accurate set of data in a trusting and timely manner and…

Recently, having placed the idea on the back-burner for a long time, I finally decided to delve into the emerging world of CSS art. Whilst it would utilise the many features that are offered by CSS3, their application would be somewhat different from the day-to-day usage of building modern and innovative user interfaces. The result of my foray into this world is shown below (and can be seen at this URL: www.markbokeeffe.com/peeping-tom).

Some Background

I have been working with CSS for many years: first of all as a Web Developer and then later as a Front-End Developer. As front-end technologies…

Since the arrival of React v16.6.0 in October of 2018, some new and exciting features have created the potential for React developers to choose differently between the use of Functional and Class Components. Up until this point, the natural choice between the two would typically hinge upon whether there was a need to access state within the component, or perhaps if there was a need to use PureComponent to refrain from unnecessary re-rendering to the DOM. If either of these was deemed to be required, then the choice would be for a Class Component over a Functional Component. This would…

Mark O'Keeffe

JavaScript Enthusiast and Professional

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store