Back in June 2013, on the official blog, there was mentioned:

React isn’t an MVC framework. React is a library for building composable user interfaces.

While this is true, MVC also did not start as a type of framework or web architecture.

In this article, we find out how MVC concepts used at the component level can add better structure, split responsibilities, and reduce the complexity of React projects. We talk about the dance between the Model and the View, a dance that can add value to your apps.

All code examples are available in this GitHub repository.

A bit of Model View Controller history

Trygve Reenskaug discovered MVC at Xerox PARC in 1978. …

For me, building applications is like playing strategy games. I get to architect complex systems and, in a way, I feel like an artist.

Throughout my career, tight deadlines and ever-changing requirements were constants that often enough left me frustrated and overworked.

I wanted a way to avoid that small, innocent-looking task turning into days of hard work!

A few years ago, I started a quest to distill a better way of engineering software, one that delivers value while keeping me from burning out.

Continuing from my last article, The 4 Layers of Single Page Applications You Need to Know, together with a lot of lessons learned from Robert C. Martin’s Clean Architecture and Eric Evan’s Domain Driven Design book, that quest led me to business-driven applications. …

Hi and welcome to a SOLID example of implementing inversion of control (IOC) in TypeScript when working in distributed teams.

Spoiler alert! It’s all about plugins!

Image for post
Image for post
Photo by rawpixel on Unsplash

The inspiration

We performed this tennis refactoring Kata by Emily Bache yesterday at work.

Your task is to write a “TennisGame” class containing the logic which outputs the correct score as a string for display on the scoreboard. When a player scores a point, it triggers a method to be called on your class letting you know who scored the point. Later, you will get a call “score()” from the scoreboard asking what it should display. This method should return a string with the current score. …

Let’s architect a React application from the ground up, exploring the domain and its services, store, application services and the view.

Image for post
Image for post
The four layers of single page applications — by Alberto V

Every successful project needs a clear architecture, which is understood by all team members.

Imagine you’re new to the team. The technical leader presents the proposed architecture for the new application coming up on the roadmap:

Image for post
Image for post
Light Functional JavaScript

I love Node.js! It’s very fast, lightweight and lets you spin up applications with just a few lines of code.

I remember reading about the Node.js callback hell and how there’s no escape from it

There’s even a website called the, lol.

What’s funny is that most times I don’t even realize how messy my code is until I try to test it.

Because I have no life, I once tried to retrieve some of my gists from the Github API, reduce them to their descriptions and URLs and sort them alphabetically by their description field.

No problem!

Here’s the mini express app

An app with 33 lines of code, amazing!

Here’s the hellish route which handles the gists logic I talked about

Hell o

Mmmm, I’m not even going to try testing it! I may add tests if you guys like this article and decide to punish me by insisting.

But wait, there must be light at the end of the tunnel. …

Image for post
Image for post

I like the idea of test-driven development because it makes you think about what code does instead of how it does it.

At my current workplace, I am developing a very customer facing online store application in Angular.

Even if I’m not at the TDD level yet, I try to get high test coverage for my code, avoiding late-night calls about a bug in production and possibly ruining the sleep of my little girl.

Being an online store, I’m working allot with entities like Price and Product. These are very stripped out versions of the Price and Product interfaces. …

The people behind Angular describe it as being a “Superheroic JavaScript MVW Framework”.

Because all Superheroes need Sidekicks, welcome ngrx, a Redux inspired state management system supercharged with RxJS.

Building Front-end applications should be easy, that’s what I used to say.
Is it different now? We’ll see…

It’s important for an application to have a clearly defined architecture, coding styles and an overall sense of structure.

The task

Our job is to create a list of awesome GitHub users (demo), that we might be interested to follow.

Once the following action is performed by clicking the button, the related user is marked as followed. …

With the help of RxJS

Image for post
Image for post
The road to Single State Management

More and more people are talking about JavaScript state management systems like Redux, MobX or Relay. Almost every article, tutorial or talk out there has something to do with the libraries above.

Let’s say you join an ongoing Angular project and you say:

Yes, I want it, I want to get inspired by Redux!

You google around and find the @ngrx/store library which is great and you cannot wait to use it. Then you talk to the team about not managing state in controllers, introducing concepts like actions, reducers, selectors, and immutability.

Depending on your team’s momentum, the decision to adopt new technologies can take a while. …


Daniel Dughila

Chapter Lead at ING Tech, Romania @danielDughy

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