Let me tell you a story about a client.
This client was demanding. They wanted all the things, and they wanted them now.
Servers know this kind of client all too well. When the client comes in, asking for everything and the kitchen sink, a server just has to sigh.
“A lot of that is just going to go to waste, you know,” says the server, softly.
Their comments go unheeded.
Does this client sound familiar?
This client is your Single Page Application (SPA).
There’s a new client in town, though, and it only asks for what it needs.
In the beginning, there were servers.
The servers roamed the wild, waiting for clients and their connections, and when a server received a connection it would pounce. The servers liked the connections and held on to them, guarding them closely.
Thus the traditional web app was born.
But the clients grew tired of the servers, which were needy and somehow both clingy and flakey.
“Give us back our connections!” cried the clients, “On our terms!”
“We will just stop by to grab all the things when we need them,” the clients went on, “that’s really all we need.”
This is a quick reference guide to the rules I use for organizing components when building a React application. I have found that having a well-defined system helps not only with organization, but also helps better identify how components fit together and maximize reusability across the codebase.
Definitely check out the extended version of this article if you’re interested in example code, a sample repository, and more information on Atomic Design.
When I initially create a React application, I put…
Organizing your application (or app/site, I’ll use these interchangeably) can seem easy. A folder for components, one for assets, another for utility methods. Maybe even a separate folder for pages! Don’t be fooled, it is almost never that easy.
This article is for anyone testing npm packages locally and who has struggled (or is struggling) to get to projects connected via
npm link. It's also for myself, so that I have one place to refer back to all the notes I've made in various places when was trying to get it to work for one project or another.
There are three…
Configuring authentication with Azure B2C in Next.js is not a particularly straight forward process. We’ll look at how to facilitate this using the NextAuth.js library.
Authentication with Next.js is, at least for me, a bit of a nebulous problem, especially if development requirements are not 100% solidified. Since you have access to both the client and server(less) environments, you could handle authentication purely in the client, on the server, or with a mix of both.
Add in the task of configuring authentication with Azure B2C and complications are compounded. …
Update: 06/28/21: Next.js v11 has some improvements when it comes to adding and using ESLint in a project, including some Next-specific linting rules. Some changes have been made to the original article based on the assumption that anyone reading new is going to be starting from Next.js v11+ rather than a previous version.
Next.js is amazing when it comes to installing, learning the framework, and jumping into the code. Its superb documentation & zero-config philosophy make this possible, and not having to think about configuration is wonderful…right up to the point when you want to add some additional configuration.
Component libraries are useful. They allow developers to add features quickly and with confidence that they will have consistent style & functionality. Libraries may be built in-house or by a third party. The former offers complete control over implementation but takes more time and resources to build; The latter can be implemented quickly, but relies on the existing implementation.
I like third party libraries, and have found that almost any limitations can be overcome by abstracting the library components on the side of the implementing application. When the library to implementing application ratio is 1 to 1, like in personal…
Please note that this was written with Expo 32.x & React-Navigation 3.x. I believe the same general ideas apply, but due to changes (modularization in particular) in the packages the code as-written will not be exactly the same.
React Native links updated to point to 3.x documentation.
I’ve been using React Navigation in my React Native projects lately and liking it a lot. It has all of the features I’ve needed and is relatively straight forward to work with out of the box. …
Software developer currently working in healthcare.