React: Looking Forward

Today was the first day of my 4th week in the Front-End Engineering program at The Iron Yard. So far we have covered the basics of HTML, CSS, Sass, and Javascript. Today we started looking at React. The combination of these tools will be the bulk of what we will work on for the rest of the program. They say the course is “immersive” which I liken to the kind of “immersing” my older brothers would do to me in the swimming pool as a kid — hold me under just long enough, let me up for a quick breath and then right back under. At only 4 weeks worth of experience, I’m hardly qualified to talk too extensively about any of this but I thought that it would be worth jotting down a few thoughts to reflect on later.

“React is a declarative, efficient, and flexible JavaScript library for building user interfaces.”

That is how the homepage for React describes itself. If that sounds like gobbledy-gook to you, it did to me as well a couple weeks ago. For the 2 of you that are still reading and NOT tech savvy (thanks Mom and Dad) I would explain these basic technologies this way; HTML tells the browser that there should be a form on the page, CSS and it’s offspring Sass makes it pretty, and Javascript handles what happens when you click “submit”. Someone could probably define this more explicitly (constructive comments welcome) and I’m sure I’ll have a clearer explanation in the future but that is the best I can do right now. To illustrate better, here is simple tic-tac-toe game that I made for one of our first Javascript projects. The HTML says that there should be a basic table of squares and some text but it would be pretty boring if left that way. The CSS makes sure that you see a cute crab or seagull when you click a square and that the color, style, and size of the fonts works well. Javascript is controlling when and how things appear. It can be used to update the page and even “inject” items into the basic structure of the page that weren’t there before. So enough with the tutorial, what is React, right?

A webpage is a living, breathing, ever-changing thing. I envision the web browser like a happy puppy waiting with it’s ears perched for you to do something that it can react to (pun intended, see what I did there…). Whether you know it or not, the browser is “listening” to you. It knows things like where your mouse is resting on the page and how long you’ve been sitting there watching that panda video. It is listening and waiting for you to take some action so it can do it’s cool tricks. Think of all the clickable things on your Facebook page. How many things can you count that require your browser to do something? And when you click your notifications you expect the little red alert button to go away, your message to pop up , and all of it to get synced in the background. Now think about how many clickable things are happening right now on the Facebooks worldwide and how all that gets rendered and coordinated by the Great Wiz of the Internets. It would be easy for things to get out of sync and that appears as a bug in the page to you. Also, as a user you probably don’t care all that much but all those information updates get expensive when you are moving massive chunks of data around. React was invented by some really smart people at Facebook to help manage all that. React essentially takes a picture of the page, remembers it’s “state”, and only updates the parts of the page that are changed when something is changed (click on a notification, submit a message, unfollow your crazy Uncle Larry). That means less data moving around, which explains the efficient part of it’s definition and also means that your notifications are in sync now. Thanks Facebook!

OK, I realize even Mom is probably not reading anymore but here is what this means for me.

I’m excited about creating things that inform, entertain, and serve people in a compelling and beautiful way. I have been doing that with music, film, audio and design for practically my whole life. I am interested in software development because it is a new and powerful medium for me to continue doing those things. It is really hard to compel people with a great website or video if it underperforms or doesn’t get delivered smoothly. I am excited about React because it seems to promise a great experience for the end user and the developer as well. Heck, it even seems to cut costs for the company which the boss will surely like. I’m having a hard time seeing a downside here.

React is one of the most recent of many Javascript frameworks. And like all new technologies it promises to solve many of the current ills of the web. Whether it is all it’s cracked up to be or just the shiny new thing that will be replaced next year remains to be seen. Today, I am just grateful to be learning cutting edge technology and excited about the creative possibilities that will allow.