A CS student’s battle with new paradigms

More from the series

Intro and primer for coming weeks

For my Bachelor thesis project I’m looking into React Native for a software company and evaluating its benefits as an extension to Objective-C and Java for creating UI components within native apps.

My project supervisor suggested that I keep a personal diary of my progress in order not to lose momentum at any point. I thought it was a great idea and decided to take it one step further by sharing my journey with the world. React goes against almost everything I’ve learnt during my uni education — and I love it. So at very least I might inspire someone to pick it up as well.

I’m not gonna go into the basics of why React is cool. You can read all about that in the docs. Instead I’ll try to explain, based on what I’ve learnt this week, why I think it’s the view-library to learn right now.

Although I’ll be writing every day my plan is only to publish a new story once a week. That way I’ll keep it less spammy. I also want to point out that this won’t just be a technical account. It’ll be riddled with thoughts, emotions and opinions.

With that, let’s get started.

First steps

I’m almost done working through Wes Bos’ course React For Beginners. He’s a really talented programmer and a great teacher! As the title has been confusing to some, I’ll clear it up by saying that the course definitely requires previous knowledge of JavaScript. So if you’re coming from JQuery or Angular you’ll feel right at home.

Declarative programming teaches you to think

At uni I was living in the imperative world of Java consisting of OOP and MVC patterns. The one outlier was a course in Erlang which taught me the declarative paradigm.

I try to visualize imperative programming as cranking the gearbox on our compiler. Your code is saying what it is you want to happen every step of the way. Declarative programming focuses on the result that you’re after instead of the process needed to get there. At uni, almost everything was solved using a for-loop. So much so that I actually wondered why there are other loops. Falling into this trap is an easy way to remain within the bounds of imperative programming.

If that explanation doesn’t do you justice Tyler Mcginnis puts it very eloquently:

“I’m by Wal-Mart. How do I get to your house from here?”

An imperative response: Go out of the north exit of the parking lot and take a left. Get on I-15 south until you get to the Bangerter Highway exit. Take a right off the exit like you’re going to Ikea. Go straight and take a right at the first light. Continue through the next light then take your next left. My house is #298.

A declarative response: My address is 298 West Immutable Alley, Draper Utah 84020

It’s no secret that declarative programming is trickier as it forces you to formulate the problem differently in your mind.

Modular components over MVC any day of the week

Components are the smallest forms of building blocks in React. They have their own state, input and output. This way, you don’t “build a website” as much as you put together <div /> components using React in order to build something greater than the sum of its parts.

This seems strange at first but it’s actually genius. I’ll explain, but first let’s take a look at why the MVC pattern exists in the first place. I’ve been taught that its purpose is to build software which is modular enough to allow refactoring on an ongoing basis without having to rewrite entire parts of core logic. In other words, high cohesion and low coupling of classes.

After learning modular programming with React I now see it as a paradox. Comparatively the MVC pattern now seems like a way of pretending to modularize with structured programming. Languages like Java also seem to have way too much overhead to be easily modularized. If we want to build modular software, why not use a library which supports it instead of relying on an abstract design pattern. It’s like teaching us to wipe something dry with a damp cloth.

It’s perfectly fine to rewrite classes as long as they are small enough! There are new technologies emerging every day which can be useful for your project. Let’s take Facebook as an example. They have to re-invent themselves every year in order to remain on top. Whether that means acquiring Instagram, introducing Facebook Live or blatantly stealing Stories from Snapchat. Forcing yourself to build around old classes instead of deleting them and starting over will limit your creativity and ultimately lead to bad code.

I will admit that following the MVC pattern religiously will result in fairly modular code, but this is too utopian. The real world has deadlines and disagreeing teams. Creating modular components is much easier when the library is already built to support it.

One last thing about React components: With JSX they actually dare to combine business logic with HTML in a visually horrendous way which we haven’t seen since PHP. The incredible advantage however is that you can understand a single component at a glance, without needing to understand the rest of the view. The consequence is that this allows a new developer who is unfamiliar with the project to pick up the baton and get to work from day 1.

React: Shamelessly mixing HTML and JavaScript in the same component

A taste of ES6

So far it’s only been a taste, but I hope I’ll have more time to learn about it next week.

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr, 0 );

//Output: 10

This reduce function works by taking an input (in this case a list of numbers) and recursively adding them to get a single value, i.e. the total. The fat arrow => makes all the difference as it maps the input on its left to the defined operation on its right. Initially you also need to define a starting value to add the first list item with, hence the second argument. Leave this out and the function will still assume zero.

One-liners are super sexy

Coming from Java I’ve never liked one-liners (surprise). Why not just spend 10 more seconds writing it out so the next guy doesn’t have to spend 3x as long figuring out what you meant.

But this is truly when programming becomes poetry, and React is one of the many new JS libraries which encourages this. Let’s look at some of my favorites:

var isAvailable = (details.status === "available" ? true : false)

var buttonText = (isAvailable ? "Add To Order" : "Sold Out!") <button disabled={!isAvailable}>{buttonText}</button>

The disabled attribute was introduced in HTML5 and renders a button unclickable. If isAvailable is True , React will omit the disabled attribute from the rendered HTML entirely. This effectively allows us to create a single button which changes based on availability, either with the text “Add to Order” or “Sold Out!”.

//if order[key] is null, OR-logic will choose 1

this.state.order[key] = this.state.order[key] + 1 || 1

The line above is a pretty efficient replacement of the if/else statement.

React ❤ Firebase

Firebase uses HTML5 Websockets which works wonders with React. As soon as the state is updated in Firebase it will trigger an event to mirror the change in the app. In the gif below, Web Bos shows how this works on his localhost after changing the name of the fish in the database. The change affects the state of the entire app, so if you look carefully you’ll see the fish name changing under Inventory as well. I found it pretty magical, especially since it only required 7 lines of code to connect the app to Firebase.