React Most Wanted

First contact

Almost a year ago I had my first contact with React. I was developing web applications for couple of months so almost everything in that sector was new to me. The good thing about it was that I had no problem leaving everything else behind to go with React.

I had one big application written in php using the codeigniter framework for the front-end and slim for the REST API back-end. Thinking of it, it was the right path to use the mVc pattern. It was my first web application so of course there must be some mistakes on small and large scale so I decide to rewrite it from scratch. I should start making the main concept and functions in the back-end and during that to search and decide what front-end php library to use.

During that time a friend of mine moved to Graz (Austria) to work in a new company as web developer. We both where working on our web applications alone and without any contact to other developers so both of the applications where nothing spectacular. We where still in contact and he was always talking about what great tools they use or want to use. That was the time where we both saw how important it was to communicate with other developers. Otherwise you will stay in your small sandbox never growing up.

He mentioned to me Atom. A great text editor and I moved from Notepad++ to it. I’m using it since then. He was talking about SCRUM, Continuous Integration etc… Things that are very interesting in a large scale companies with many developers but for me not so much interesting than just knowing that these things exist and what they are good for.

One day he wrote me a message that they had a great presentation about a new “framework” called React and that I should try it. They plan to refactor all of they’re code to use this new technology. I was thinking: if they (a such large company) are willing to move to React there must be something special with it and I am already in the middle of refactoring my code from scratch…why not try it. At that time I haven’t decided about the font-end.

It was very hard for me to catch up. I heard about node before but never thought to use it. Only the setup for a first “Hello World” would be a marathon. I didn’t give up! Everything I read about React was so promising that I just want to learn this “crazy” thing. Every day I read at least one article about react and of course you hear about the state, flux and finally redux.

Googling for react brought me also the first time to Medium with the first article I read here. Dan Abramov is writing about how to separate Presentational and Container components. I still struggle to make the separation correctly but with the time I more and more think that is more about taste than a hard pattern or rule how to separate them.

The first application

Because I had to rewrite my front-end from starch I had to decide to use react or to stay with codeigniter. During research to react I finished the back-end so decided to just go for it. Had nothing to lose than time and I never was afraid to learn new things and no one should be! At first I tried some starter kits but somehow all of them I found where outdated, or had some errors or they’r dependencies where outdated so updating them would make it unusable. Ended up picking up peaces from multiple starter kits and binding them together. Somehow it worked out and there was a application that I could open in development under the port 3000.

How it felt working on react

Then there comes to add more features than just “Hello World” ;)

Routing was the first one. Then came internationalization and the one I searched the most was the design part. In php it was of course Bootstrap and I tried to make it in React to. There is a great library but at that time there where not much parts in it I would like to have. Searching more I came over the Material-UI project. It also doesn’t have all parts from the Google’s Material UI design patterns but it had enough for me. Because our old and new application need a Android application and in that we already use Material UI patterns it would be great that the user has the same design concepts in both web and app.

The application should be responsive. If the old one made with php was this should be it at all cost. That was the main motivation to add all those features. The new application should at least be as good as the old and even better. No feature from the old application should be missing and every new one is welcome.

It took me some nerves and time to make the first usable version but it was there. Couple of times refactored. I always try to deploy the first usable version to our users. The application would be used only in our company and I know every user in person. They all know that they are application testers at the beginning. They don’t freak out on bugs and errors. Well, at least most of the time. Just send a message and it will be repaired ASAP.

After the back-end and front-end the Android application should also come ASAP. Tried to make it so small as possible. We need it to scan industrial bar-codes with different hardware or just the camera but the hardware was more important.

During all of that something bad and something great happened. The hot reloading broke in my application. I just couldn’t fix it. Made me crazy. While searching for a solution I noticed that there was something that would solve all my problems. The environment for the react application was always a problem for me. I found create-react-app the superman library off all react libraries. I real live saver! I think it really saved lots of developer lives preventing that they jump out of the window while struggling with the react environment :P Moving my code to a create-react-app made application was a great time saver. So if you don’t think that CRA is a live saver then at least agree with me that it is a time saver :D

After a couple of months updating, adding features and repairing bugs in back- and front-end and the android application it came the time where the users don’t want more features or just very small ones, the errors and bugs became rare and I got more time to refactor and clean everything.

Next step

Cleaning up the code I noticed something that every developer knows. Old code smells. It’s so ugly and so bad written that you shame yourself for being the person who wrote it. Some notice the “stinky” code more, some less. It is like cheese on a sunny day. It’s not about how good you are as developer but how much you advanced as developer and how much you crystallized and updated you skills. No one writes perfect code so every code can be refactored and made better.

Well my code was so stinky that I decided to look it from the distance. Watching it like that I noticed that there where some nice parts and lots of bad ones. I would like to take the good parts with me to my next project but leave the bad ones behind. But I don’t want to just copy paste them. There must be a better solution.

I refactored the first application from scratch because it was my first web application and it had lots of bad parts. The back-end was now in the second main version and I liked how things where working. Using the same code base for other projects would save me time so I created a composer library with all the main parts from the REST API back-end. Updating the package would update the main parts in all my projects. Something like that would be great for the react front-end to.

I started extracting some parts of my react application to npm modules. It resulted in 3 npm packages:

Those are my first ever made standalone react and redux npm packages so nothing spectacular. At least I tried. So here they are…lets go to the next one. Hmm…the other parts of the application are very useful but are made in a very bad starting point. The internationalization was working but a mess. The theming solution to. Those also use already made libraries. Its just the way the collaborate in the project that I would extract. And extract it in a way they are used with the minimum of influence of hocks or hacks to make them work in a react-redux environment. Those solutions are not something I could put in a npm library. It’s just the way the act together.

There are also other features I don’t have in the current application but I would like to have in all of my projects like service workers for offline availability and persistance of the whole state. The current application uses persistance but not for the whole state. The part that communicates with the back-end is not designed for it.

I started making a list of all those features and searching for them on the internet. It was a real chasing to find the right and best library for every feature. Because of the way I was chasing them on the internet I began to thing of it like finding the “Most Wanted” features and libraries I would like to have. Collecting the libraries wouldn’t be enough. They should also be in a representational project from witch I could start every new one.

The Most Wanted

Digging trough a huge number of possible libraries and starter kits I found the libraries that should give me my “Most Wanted” features. The main selection reason was the size of the projects maintainers and they’re activity. The chosen libraries should have a stable future. For now my personal “Most Wanted” features are:

  • easy to maintain
  • PWA — has Progressive Web App features
  • responsive — included with PWA
  • material-ui
  • routing
  • theming
  • internationalization

The libraries that should give me those features are:

Those with some smaller packages and dev dependencies would allow me to create a react starter project from which I could start my new applications.

If you want to see how it looks like here is the DEMO.

It’s still in working progress so there is not much of content and I’m thinking of it if there should be any content. But it has some of the main features like responsive behavior, material-ui (it 100% and only material-ui), routing, persistance and service worker for the PWA features, theming and internationalization.

The only content for now is a date in the dashboard that shows that the internationalization works by formatting the date between the en and de locales.

You can take a look at the whole project here.

I explain in the readme file why I have used every of those libraries.

Conclusion

Every new technology brings pros and cons to use it. I thing that react is something every web developer should at least try. It has a extremely fast growing community and if someone would ask me it will play a huge role in the future of web development. There are lots of discussions about the theme to use react or some other library. My chose is react.

It can be hard to start with react but it doesn’t have to. One great helper to start is create-react-app. I would recommend every one to use it. If you wan’t some more features you can try react-most-wanted out.

Every feature and every library chosen are my personal favorites. This is no recommendation or description how to use react correctly. I would appreciate it if every one who looks at the project and thinks that it can be done better or that I have made something wrong should share his thoughts with all of us.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.