React and the Order of the UI Frameworks
So here we are, on August of 2020, the world is in the middle of a cruel Covid-19 scarred summer, and I’m learning React and loving it. Just like everybody else, I had to cancelled my plans until 2021. Instead, I enrolled in Flatiron School’s immersive Software Engineering course. For 11 weeks, I’ve jumped into Zoom from 9–5, Monday through Friday with a diverse, funny and intelligent group of people from Austin and Houston that constitutes our cohort and instructors. I learned Ruby, then Rails (for Ruby), then Javascript, and now I’m learning React (for Javascript, because every programming language loves a good framework). It’s been an intense experience. There has been laughter, joyful moments of enlightenment, a couple of tears, many late nights of homework, code challenges, app projects, and overall so much learning. I even named a trio of kittens I’m currently fostering after programming languages: Ruby, Python and Java.
My last website project was built using Ruby for the backend and Vanilla Javascript for the frontend. I had never used CSS before, so I did all the styling implementing Bootstrap.
If you are a beginner like me, and you are wondering what all these things mean, and if you come from a humanities/arts background and want to learn code to design websites and channel your creativity through computers, and if you are a Flatiron student in Module 4 and you’re looking for a quick way to make your project look cool, I’m going to try to articulate my experience so far, and give recommendations on UI frameworks. Most of my blogs go in a roundabout way, but I hope you find this one worthwhile and purposeful.
What are Ruby and Javascript? They are programming languages, idioms to talk to the computer and tell it what you want to do. What are Rails and React? They are frameworks. What are frameworks? They are a bunch of stuff other people have written in a programming language. What’s the point of frameworks, like, what do they do, when would I use one? Say you learn a couple of things on Ruby. Congrats! You should feel proud of yourself, because it’s a really awesome thing learn, for real. So now that you know Ruby, you want to built your website, right? Well, then you definitely want to use a framework, such as Rials, because much of the basic code you’ll need to write for your website has already been written by a bunch of smart people and made available for free online. It’s a no brainer, just Google Ruby on Rails, click on the first link, follow the download instructions, and just like magic, you’ll have a shit ton of your website already working. Now you just need to customize and work on the specific things you have planned for your dream website.
What is a UI framework? UI stand for user interface, which is what the user sees. So you’ve got your backend on Ruby on Rails working wonderfully, and your React/Javascript frontend couldn’t funciton any better, but you got one problem: your website looks like shit (at least to the user). If you had enough free time (which nobody does, specially if you are a Flatiron student), you could desing your whole website from scratch using CSS. What is CSS? It’s a computer language, though not programming one, but rather a descriptive one. Programming Language vs Descriptive Language? Ruby is a programming language, all you write are things that do things, that make other things do other things. With programming languages, you do algorithms. What are algorithms? Algorithms are instructions. Instructions for who, and to do what? Instructions for the computer to do things (or to compute things, like a math addition or subtractions). CSS is a descriptive language, all you write is how you want things to look like. More specifically, CSS is what you use to stylized and design everything the user sees when they use your website.
So a UI framework is basically bunch of code that other people already wrote and that you can copy and paste in your website to make it look good, in a quick amount of time.
Here is a list of popular UI frameworks your can implement with React:
Ant Design
This one is Chinese, owned by Alibaba (I think it’s owned, or developed, or maintain by Alibaba) so it’s not too popular in the US. But it’s really cool, check out all the cute little buttons and icons they have. They have really cool stuff for forms, so if your website needs a lots of forms, Ant Design’s got you!
To install Ant Design, just type this in your terminal:
Then your import it on your CSS file, like so:
And then your can even import a layout in your App.js
Checkout this incredible good blog by Nicholas Rempel, about these steps and more details, and this one too, by this designer named Parvez.
Material-UI
This one is made by Google, so it’s quite popular among developers (and for good reason, we all want our apps to look like Google, right?)
They have very nice free templates, so your website can look like this for free!
Customization is also very simple, and most if not all Material-UI components have built-in ability to override behavior and style. Material-UI is well documented, it has regular updates and consistent appearance. Go ahead and use Material-UI and make your user think your website is elbow to elbow with Google, because it is, your website is the best!
Blueprint
Blueprint is not too popular, perhaps because it’s not mobile friendly. That mean if you use it, your website might like weird on a phone. But some people love Bluprint. These are some of their pros:
- - Light and dark theme modes.
- Their website has great interactive example of components.
- They have Sketch kits.
- Way too many icons
- Components look really, really nice, specially editable text, multi-select and date picker (these components are usually bad, ugly and/or non existent on other frameworks)
They also have a Non-ideal state, which I think no other framework has. So, basically, if you are a cool kid, Blueprint is for you. Blueprint is so cool, it shits ice cubes.
To install and use Blueprint, do this:
So those are my top three. I could keep on writing this blog forever, because there are many great UI frameworks out in the wild, and they are really all very good.
- Evergreen (great, but not mobile friendly either)
- Bootstrap (everybody loves Bootstrap, I think it’s okay. All the mentioned UI frameworks make strong rivals)
- Semantic UI (Flatiron has used these for our labs. So I guess if you have a tons of complicated projects you need to stylized, this framework will help you. Look at all the stuff they say about Semantic UI on their won website: jQuery Free, Declarative API, Augmentation, Shorthand Props, Sub Components, Auto Controlled State).
P.S: here’s a pic of my three coding foster kittens:
