Becoming a UI Engineer in 2019. An opinionated path — Part 1

In the past few years, I’ve found that it is quite hard to find good, ready-to-go UI engineers. The UI engineering field is vast, opinionated and moving on at a dizzying pace. Frameworks fall in and out of favor every 3 to 4 years. Thus find a perfect match to a requirement seemed like a far fetched goal.

What we end up doing was build a solid training path to educate non UI engineers, new hires and transfers from other groups.

In this series, I’ll try to chart a path for you to become a solid UI engineer. If you are one of those who are still stuck in the JQuery world, it might help you too. Okay, enough talk. Let’s get to it.

Prerequisites

Patience

You should know that UI Engineering is not perfect. Best practices are also evolving constantly. Moving away from classical OOP is a big thing. Java engineers freak out when they see a language without type safety and a half baked class paradigm. CSS is a big monster to tame. Web applications have evolved from server side rendering to SPAs. Every year, strategies such as semantic, responsive, adaptive, mobile-first, progressive have been emerging. JavaScript has gone from vanilla to ES6 to several magical Babel based languages.

But if you are patient, you will realize that JavaScript is a beautiful language when you stick to a functional style, forget the class keyword and avoid classical multi-tier inheritance.

Computer Science Basics and Problem Solving Skills

There is no substitute to this. I am assuming that this is a transition for you and not a start from scratch. Understanding basic data structures and solving logical problems is a must to be an effective software engineer. If you are brand new to programming, get started with coding camps and take online classes. Checkout http://udemy.com

Basic Unix commands

Learn how to use basic Unix commands such as cd, mkdir, pwd, cat, more, ps, du, grep, find etc.

Get a mac

Did I say this was an opinionated path? Why a Mac? Because it is built on linux. In my experience so far, I have mostly worked in linux based servers, VMs and containers. New Macs are expensive. get a used one.

Start using Notes app

A note taking app is essential while you start a journey of learning. Learn how to use your Mac’s basic Notes app. Any note taking app should work.

Install the basics

Chrome

Chrome looks light weight but is not lightweight. Its memory footprint is horrible. Still, I love the developer tools that comes with it and you get plenty of add-ons.

VS Code

VSCode in my opinion is the best IDE/Editor for JavaScript development. Atom comes close but Microsoft owns both. Atom will become the less loved IDE at some point.

• Goto https://code.visualstudio.com/.
• Download and install.
• Open VSCode.
• Open the Command Palette (⇧⌘P) and type ‘shell command‘ to find the Shell Command: Install ‘code’ command in PATH command.
• Now you should be able to open up VSCode from the terminal by running the command ‘code’.

Node.js

You will need to install Node.js globally in your system. This is probably the only piece of node related software that I’d ask you to install globally. For everything else, we have npx. We’ll discuss nvm at some point in the future.

Git

Install git. Then go to https://github.com. If you don’t have an account, create a free one. Master a few basic commands such as clone, checkout, diff, commit, pull and push.

Let’s build something

Let us wet your appetite by building something. Something like a hello world. In our case it is a hello world app that is about 292MB. So make sure that you have decent internet speed. Ready? cd to your folder and run:

npx create-react-app my-app
cd my-app
npm start

Your browser should open up to show something like this:

What you have done is create a new React app using the create-react-app module.

There is a lot of MAGIC behind this and we’ll deal with it eventually. Now, if you are curious about what it is doing, open up the editor (Hopefully you have installed VSCode by now). Like so.

code .

This will open up VS Code and load the current folder. Sometimes it is fun to tinker things without knowing anything about it. Knock yourself out.

Once you are done, delete the folder. Save the space. Forget the magical experience for now. We’ll take it one step at a time.

Next up: Mastering Fundamentals.