Brain Dump on React and My GoDaddy Tech Stack

Hello blogging world!

It has been far too long since I've utilized my tech blog, and since I am nearing the tail end of my summer internship I thought this would be a perfect time for a brain dump. TLDR: I have been interning at GoDaddy this summer (I'll be co-authoring a blog about this with my colleague Yeng Tan so look for that coming out in a few weeks!!) on the Hosting User Interface team (HUI). The team is only about two years old now, but they've already made some great changes within the Hosting organization. The reason for the creation of HUI was to create a universal user interface that could be used across all of GoDaddy's hosting products to make the platform and user experience much more seamless.

** Also side note, for those of you reading this who are confused because you thought that GoDaddy was just a domain selling company, you may want to check out some of the awesome hosting products that are offered here... okay silent plug over **

This was a really cool experience because I got to contribute to the changes and components that the HUI team was making during the first half of summer, and then I got to experience the shift towards on-boarding all of the other hosting teams to use HUI during the second half. I definitely learned much more about web development and user interface technologies than I could have imagined, and I was so lucky to be surrounded by incredible mentors. Especially since before this summer our entire tech stack was foreign to me (with the exception of basic HTML, CSS, and JavaScript).

So without further ado, our HUI tech stack accompanied with a much needed brain dump:

• React
• React-Router
• Fluxible
• Bootstrap 4
• React-Intl
• SCSS
• ExpressJs
• Webpack
• Mocha
• Enzyme

It was a lot of new information to learn very quickly for the summer. But, I am really lucky to have had the opportunity to work with such awesome "up-and-coming" technologies in the web dev world. I'm actually really grateful. I was even able to get paid to learn all of these. What a great opportunity.

First I'll start with the top one (and definitely the most important in my opinion) : React.

Originally created from developers at Facebook, React is a JavaScript based language that sort of combines HTML and JavaScript in a way that allows the performance of a site to increase quite a bit. This is because React encourages you to create a lot of individual components that all render by themselves and together make up a web-app. This way if a user is interacting with one of these elements, the changes only need to be re-rendered for that one component instead of the entire webpage. This lowers the lag on webpages and actually makes sites much more responsive (especially really complex websites that require lots of API calls and client-side rendering!).

Honestly, after working with a lot of HTML/CSS and minor amounts of JavaScript, I was expecting React to come relatively easily to me. I was sadly quite a bit mistaken. I think that basic React probably would have made more sense to me, but I didn't have enough JavaScript experience to be prepared for all of the ConnectToStores, ExecuteAction, ComponentWillMount, and other built in functions that my team was using. I would say after about a month of experience, things really started to click with React. Once I was able to get my own basic components rendering, it was actually really rewarding to be able to code using the language. 

Next: React-Router.

This is a "Standard Routing Library for React," according to Google. To be honest I didn't use React-Router much this summer, but I know it was important for our work because it keeps the UI in sync with the URL. I actually just did a small amount of research on it (how I wish I had done this a few weeks ago!) and learned a little bit more. So basically it allows us to specify how the components or pages we create are accessed by url. We can create different routes for different parts of the website. This is a little bit more difficult with a large user base, because we have to use a LOT of API calls in order to make sure we are sending the user to the correct place with all of their info, but it's actually pretty effective when used well!

Fluxible.

Fluxible is an implementation of Flux. It allows for server-side rendering of web apps. For those who don't understand a lot of the jargon I'm writing, basically it means this:

For every API call we make or every element that we are trying to fetch from our databases, we need to store this information somewhere on our servers. This makes it easier for the customers to fetch their data through requests on the client side (ie - clicking a button is a request), which triggers an action in the React code we use. It's the basics of an MVC.

Wait, Jessie - what's an MVC???

Glad you asked! I was wondering the same thing a few weeks ago. MVC stands for Model. View. Controller. It's a widely used structure for web applications because the model acts as the server side (back end stuff, like APIs - it's the data, business logic, and all intelligence of the system),  the view acts as the client view (front end stuff - it reads the messages from the model to update the view), and the controller is what allows these two ends to talk to each other (it reads the user input from the view and changes the model accordingly). It's actually pretty cool to learn, because we interact with this structure pretty much every day and most people don't even realize how the websites that they are using run. 

So in terms of what I am doing this summer with HUI, our model is the React-Router, it allows us to access our API's and store user's data. Our view is React, which deals with everything that the user interacts with. Which would make our controller Fluxible.

For a TLDR, Fluxible makes rendering and manipulating components in the virtual DOM way easier. Through the application load life-cycle, Fluxible can speak to both the backend and the frontend at the same time, which allows us to call our APIs very efficiently (making for a much faster user experience!).

Bootstrap 4. 

This one is pretty self explanatory. We have an internal library of components/bootstrap-like styling that utilizes Bootstrap 4 and helps all of our products to have a similar UI. I'm definitely a huge fan of Bootstrap for web design, so it was nice to see at least one familiar face amongst the sea of unknowns in my tech stack.

React-Intl.

We used this React package to help us with our international customers. Since GoDaddy reaches over 17 million people, it has a bunch of versions of the website (and its products). There need to be translated versions of every single word we use in all of the languages that GoDaddy services (which is a lot!). React-Intl helps with the formatting of all text in order to make translations much easier.

SCSS.

I work very little with SCSS files for my job because I've been doing less design work and more API integration (since I requested to learn more about this over the summer). But whenever our internal styling system doesn't quite give us what we need, we use SCSS to create custom classes for our components. Though this really isn't common practice for my team, we usually try to not recreate the wheel as much as possible and utilize the internal styling quite a bit.

ExpressJs.

This is one of the major 'unknowns' in my tech stack sea even still. I know that ExpressJs is a framework for Node.js, but if I'm being honestly I don't know much more than that. I still have a hard time understanding Node as well. Hopefully this encourages me to make a future blog post about these!!

Webpack.

This is a JavaScript bundler. It takes all of our js files and bundles them into about one large file that contains ALL of the react components that we created (and there should be a lot if we are sticking to the way React is meant to be used). It is very configurable, which makes our lives a lot easier. We also are able to bundle all of the components from different modules locally and use those instead of our current ones saved in the shared artifactory. This is helpful for local development if the task I'm working on requires changes across multiple modules, because I need to make sure my dependencies on my project are using my local changes, and not the old ones that are normally accessed.

Mocha and Enzyme.

We use these languages for JavaScript testing. Enzyme is specifically for React, and Mocha allows us to work easily with Fluxible. My team really strives to create test cases for every component and to attempt to get over 90% coverage whenever possible. So I got quite a bit better at writing unit tests over this summer. Which was pretty cool to experience after having just learned what a unit test was only a few months ago. 

I definitely do think that testing was one of the things that I struggled with most this summer though. It was a lot of technologies that I was very unfamiliar with all at once and I couldn't quite wrap my brain around some of them. I do think that testing is very important for components and it was good to experience that, because it showed how the creation or change of a component could easily break some of its previously created functionality (or the functionality of another component!). I'll definitely utilize that with Sqzee over the course of next year.

Oh yeah! Yeng is also the founder of an awesome company called Sqzee that I'm lucky enough to be joining in the Fall. I'll be doing a lot of user interface work, and their web app is based off React so I'm really excited to take a lot of what I've learned this summer and utilize it for projects like this.

All in all though, this internship was such an awesome experience for me. This post is more about the technical side of my summer. But, in a few weeks I'll upload the link to the more personal co-authored recap that Yeng and I are just finishing up now.

Hopefully that either explains what I've been up to or maybe allows a web dev newbie to take a first glance at some really powerful and great technologies. At the very least, it allowed for me to readdress and realize the importance all of the languages I use every day.

As always, until next time.