Over the last few weeks, I’ve been working on improving the overall performance of our SaaS platform (OnCare) for user experience gains and profit. Hopefully, some of my fresh musings could be useful to you.
Philosophy on performance focus
TLDR; Focus on building and marketing features, then fix performance issues if and when they emerge.
We’ve been running the business lean, taking in requirements, building solutions from first principles and iterating on feedback from customers once it’s been shipped. It’s a tricky balance spinning all the technical plates while growing your business, one of which is performance. …
I’ve found the propaganda, hyperbole and stints of doing TDD alluring but I never really found it sticks, much like an intensive exercise regime. My sentiment is that it’s a methodology more concerned with code quality than user value or time constraints.
I have however found a sustainable flow that gives me a lot of the upside of writing tests with a reduction in the downside of writing upfront tests & code for features that turned out to be misguided and ultimately scrapped. …
The React team seems to have their ear to the ground as they’ve noticed there’s some help needed in managing [simple] state.
Redux and Flux frameworks are great but they’ve got a learning curve, lots of boilerplate and integration cost to get started.
React Hooks have come along and hopes to provide a simple API to:
- Easily allow reusue of stateful logic between components
- Reduce complexity (E.g. class lifecycle methods or requirement for Flux frameworks)
Let’s jump straight in with a simple stateful toggle component.
Before using classes and setState API:
After using useState hook:
I think that’s…
I’ve been involved in software engineering for over 10 years now and I’ve learned a lot from observing how the best engineers conduct themselves, get shit done, provide value and pursue a career path. Here’s some themes that I’ve identified as common to some of my most respected engineers. This is by no means an exhaustive list, instead it covers some relatively obscure topics.
Compounding Improvements
The best engineers are honest with themselves, realise their weaknesses and work on continuous improvements to bolster their skillset. …
At OnCare we’ve been using Hubot, a chatbot made by the folks at Github as a companion to help our team get the answers they need. I wanted to share our experience as it differs slightly from it’s roots of Hubot being a developer focused bot.
Bit of a back story first; our sales team was looking for information about customers in order to do their job. We didn’t have admin pages to let them self-serve so all enquiries were being manually handled by me. …
At OnCare we’ve gone to great pains to make a service that our customers love using. Part of our journey has been to ensure the app customers use through the day, every day works offline or on terrible internet connections. Here’s some of our learnings in realising this offline experience.
Assumed starting point
There’s a lot to building an app, most of that has been well covered elsewhere so I’m going to assume you’re familiar with the following concepts:
- React Native
- Redux
- Making backend read and write requests
Objective
There’s many aspects to a fully offline first app but for the purposes of this…
There are many many things a frontend developer could be using but there are some I feel are the most important here. Everything I’ve mentioned is designed to save you time, develop your skills and leave you more productive, not just to chase the new shiny. You could adopt these for individual projects but I’ve had organisations in mind when writing this.
Use a CSS preprocessor (SASS/LESS)
If for nothing else, using SASS/LESS gives you sane variables so you don’t have to duplicate and maintain quite as much code.
Once you start scratching the surface you quickly discover that using mixins and nested structures, you…
If you’re debugging your way through your website using console.log or just looking to discover some features you might not know about, these tips are set to save you a bit of precious time. Admittedly it’s not the juiciest of topics but let’s face it, we spend a lot of time “developing” in the debugging environment so let’s make the most of the tools we have.
Debugger statement
The first step to moving away from console/alert statements, shove a debugger; in your code. …
You might have noticed you have a laggy experience when scrolling around your site. I won’t bore you with all the possibilities but you’ve either got a CSS or JavaScript issue. Most developers will assume it’s a JS issue but CSS can play a big part in scroll performance degradation, especially when position:fixed elements and box shadows come into play.
The one thing I’ve seen come up a number of times that’s easily addressable is fixed side or top navbars. The latter being the frontrunner with Bootstrap offering a out-the-box fixed top navbar.
To witness where things are causing slowdowns…
What’s quite expensive to run (in terms of machine resources) and not totally trivial to implement is surprisingly straightforward to achieve in CSS and works seamlessly with responsive layouts.
I discovered this layout option whilst working on picplane.com where I wanted to nicely show a big list of images and Masonry was getting taxing on performance, especially with Angular.
Here’s an example of the result you can achieve:
With this CSS:
.masonry-container {
column-count: 3;
column-gap: 15px;
}.masonry-item {
display: inline-block;
width: 100%;
}.masonry-item img {
display:block;
width: 100%;
}
James Broad
CTO @ OnCare
