Try to keep your client as dumb as possible, to achieve this you should avoid the following: In many cases your service layer can take the heavy lift away from the FE which takes away complexity/ risk and avoids duplicating/ mutating business logic + domain sources of truth.
Category: Javascript
React – don’t use redundant JS expressions
consider this JSX code: It isn’t incorrect, and once all the transforming and bundling is complete, at runtime we will end up with an element in the DOM with that class, as intended. But the issue is that this could be a little bit more efficient. Every-time we put { something } in our JSX,… Continue reading React – don’t use redundant JS expressions
Javascript – get acquainted with falsy
If you are not aware of what the exact definition of Falsy is in Javascript, then I recommend patching that knowledge gap immediately. Here is the definition. I want to highlight why it is important to have a full grasp of this concept. Consider this code: Here we have an age variable and we expect… Continue reading Javascript – get acquainted with falsy
React – migrating lifecycle to hook
At some point in your React career you might need to migrate a class based component to a function component. The old component may have lifecycle methods performing operations for the component, and you might think how on earth can all that go into this function component?? Let’s look at some examples, in your old… Continue reading React – migrating lifecycle to hook
Javascript – loop efficiency
I want to run through a scenario that highlights how loop performance can be very poor…when poorly considered, and you might not realise it if the code “works”. Consider this scenario – the database has a table of 30,000 bookings for a collection of tennis courts, for each booking there is a startDate and an… Continue reading Javascript – loop efficiency
Javascript – hoisting
Recently I had to refactor a very large react class component into a function component, the overall goal was to keep the business logic the same, but add thourough typing so the risk of regressions from a much larger refactor later would be lower. I ran into a problem with this, it seemed at first… Continue reading Javascript – hoisting
Javascript – be aware of code transformation
Many developers new to React are not aware of what is really going on with their code base at a lower level. The code you write will often be very different from the code that reaches the browser at runtime. There will certainly be no TypeScript. See my post here on that specifically. I want… Continue reading Javascript – be aware of code transformation
Chrome Dev Tools – element mutation events
Have you ever had trouble debugging an element that is conditionally visible. If it was visible because of a css hover state, this might be quite simple, as most developers will be aware that the inspector allows us to force a state, but sometimes forcing this state does not show the conditionally visible element, and… Continue reading Chrome Dev Tools – element mutation events
Javascript – favour immutable patterns
I am going to use quite a basic example here, but I feel it still gets the point across, consider this code: the person object is being created with department: ‘IT’ because if the getEmployeeDepartment is not able to find their department, then it should remain as IT, this is the default. There is a… Continue reading Javascript – favour immutable patterns
Javascript – check out the Event Loop
You can read more on the Event Loop here, this is quite low level subject matter, and most developers may have never even heard the Event Loop, let alone understand the dynamics involved. If you are one of those developers, don’t worry, this isn’t anything to be ashamed of, after all many of the dynamics… Continue reading Javascript – check out the Event Loop