Learn by doing, part 2 …

Ok, so I’ve started project – learn a lot – and then again moments of – why’d should I do that, why should I finish came when something was going badly …

Just to speak about that, I’ve failed through JAlgoArena project creation so many times – that in terms of pet project that can be really demotivated – so I need to really keep my motivation high to get it to the point I’ve initially aimed.

I’ve started the project from Java server part, to evaluate coding task for a giving algorithmic problem – I’ve wrote a bit about that in my previous post.

Then all my focus went to the UI part, so it can be cute and useful. But before I will show some stuff, let me tell you how much effort it took, to be at the point where I am now (having stable, React/Webpack/Redux/Express/Passport solution).

Initially everything started from html, css (+ bootstrap) and jQuery – and the life was easy. With coming complexity, life become harder and harder with jQuery – so as I’ve already loved React – I’ve started to use it. But wait – I just forget! Closely before – I’ve moved everything to Heroku – why? Because I quickly realized, that I will need server part to do webpack magic – to use stuff like hot reloading etc. (and btw, Heroku is another think I really love!).

Here we are, all code moved to react + es6 (babel) on client side.But that was just beginning, quickly moving some parts to react wasn’t enough – as there was many jQuery coupling – in random places I was querying and setting data – so when something failed – it was tricky to find the right place. So another campaign started – this time to clean code from jQuery usage.

Once done, I’ve realized I have same problem with styles, global app.css was looking at me with his bloody eyes saying – yep, I’m using global scope! As I’ve read one of the simplest (and still good) ways to handle that in React are inline styles (styles injected directly in React JS components) – and here I didn’t need any more ids or class names – which were require to fulfill needs of global css.

As I was going through all that changes, I’ve built up my app state (with usage of React state) and it become clear what is changing through the lifecycle of the app – but it was still tricky to know why state was changed in this way. That was the moment to use flux, or being more specific – reflux.

With flux architecture and reflux implementation I was able to distinguish between where state is kept and what is changing it. Anyway – whoever started from flux, and then even use reflux can quickly see that solution is better – but not ideal. Especially flux for me introduced too many layers of data flow and too much redundancy (many dispatchers?).

Just to be clear, before implementing above I’ve started from redux, as I knew it’s the best way to solve it nowadays. But I failed. I really failed. Besides of already knowing it and using through some own projects couple of months ago – I really forget the ideas and it was really hard for me to use it in app – couple of hours of coding, and I’ve decided to remove branch and pray for it to be killed – just because of much of effort and so little (no at all) value. That was pushing me back in the history of flux family frameworks to the roots, but as I already knew reflux is not that far from flux, I’ve started from it (this time successfully).

So finally, I’ve moved successfully to Redux – and you know what? With dev tools it provides it’s the best way to monitor the state of your up, understand in any moment what is happening and enjoy adding new functionality! Take a look on below.

Zrzut ekranu 2016-08-28 o 20.44.06 (2)

Anyway, that wasn’t easy one – and then using react-router with proper layout through react – again something which eats me many hours. Just to add to that – react-bootstrap – something moving us away of pure bootstrap – directly to react world – it required from me 2 approached and mind change – that I can write that in React and it doesn’t need to be kept in html. Effects are amazing, as there is less code, easier way to read them and everything is coded through same React way.

In the last part of moving to redux and react, I’ve focused on moving even hidden from my eyes parts to Redux state (showing modal when work in progress, actual location from router, etc) – and using best practices, moved most of react components (redux + react advice to keep components and containers separated, for me they are named components and pages) to functional approach – something which looked strangely initially – but final effects where quite good – simpler code, less dependencies to React even – so far so good.

Here is the moment, when someone can think – user management? Easy one! But the reality shows it’s really hard part to do, especially when you don’t want to use some generator which can put you a bit of code you will never use (or understand). As I already knew, the parts I want to use were passport js and some local json based db – I’ve chosen nedb. Again, that wasn’t easy way – I was spending hours and even couple of days configuring it, learning about it, client side, server side, cookies, session. And exactly that part took a patience from my mind, doing cookies and session well, in secure way. When I really thought I’m done, everything works well – I’ve realized that it worked only on Safari – but Chrome nor Firefox didn’t work (they’ve just didn’t create any session for me). I still have many suspicious about that – but I’ve realized it will be easier to follow actual standards and use tokens (JWT in this case). With tokens, after spending many hours with cookies and session – it was really easy and nice part (I will never ever go back to sessions nor cookies again in context of security! Tokens are really cool, secure and works well).

My last part before of what you can find there today was ranking, and profile for the user so you see all your submissions – and now I can say it’s first usable version!

So instead of pasting more screenshots of it, I will just paste the heroku link: https://jalgoarena-ui.herokuapp.com/. That’s life application where you can create account, run solution of algorithmic problems (to submit you need to be logged in!) – and submit so you count in the ranking 🙂

Btw, there is special branch – with_dependencies on https://github.com/spolnik/JAlgoArena-UI, it’s in case if you cannot  download all dependencies, so you just download zip, and run it against heroku based JAlgoArena judge service. In case you want to host both, so https://github.com/spolnik/JAlgoArena too, in the first one you need to change one line before running it (url of service) in the file: https://github.com/spolnik/JAlgoArena-UI/blob/master/client/actions/index.js.

Anyway, if you want to see how to create own https://hackerrank.com, take a look on the code! For me it was fun, and really effective way to learn bits about modern front end development. I plan to go step further, and use it for some local hackathons or coding contests – so we can have even more fun.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s