Making Web Apps
Frontend web development is a very broad field with many specialized skills. To make breaking it all down a bit simpler, lets divide it into two pieces: on one hand, you must learn how to make websites, which involves learning HTML & CSS, computer networking and more. Once you can make websites, you are prepared to lean about building web apps, software which is built out of the same technologies that power websites.
They do this because there’s not enough space to specifically list everything you’d need to know for the job. What employers actually want, obviously, is someone who deeply understands how to build frontend apps. That means understanding how frontend apps work regardless of framework or paradigm, and understanding how these different tools can be used to put them together.
Picking up a new popular framework becomes much easier once you have an understanding of frontend development as a whole, and it is possible to get hired without knowing the specific things an interviewer asks for if you can demonstrate your broader competence.
To digest it all, it is useful to rewind and think about what a frontend app does. All of these tools serve three basic ends:
- drawing stuff on the screen
- Loading in data and managing it
- hooking the two together
Any type of UI, from a mobile app to a smart TV’s menus, must solve these, and you’ll see the same patterns and solutions across software ecosystems. The web is the largest software ecosystem out there, which is why you see such a huge number of open source libraries and tools. This bounty of tools is making building powerful UI’s easier than ever. Unfortunately, it also means learning the whole ecosystem is more complicated than ever.
First of all, a GUI program needs to be able to draw something on the screen. Unlike a blog website whose fixed HTML can be predefined, a web app’s UI depends on its data and thus needs a way to dynamically create the UI elements programmatically.
For most UI’s, such if you were programming a video game, this starts with an API with basic commands like drawing a square. Web apps are built with HTML, so the basic commands in our case modify elements in the HTML document.
Any UI can be thought of a series of nested boxes, like a Russian doll. The sidebar you are reading is nested inside this page, which is nested inside your browser window, which is nested within your OS’s GUI. You can break up these nested boxes into individual functional components. For instance, on Hacker News, you can imagine that there is a “story” component with various nested components like the title, rank, author, link to the comments, etc.
This can be a bit inconvenient to build with just the DOM API, because it forces you to work with individual nodes. For each story you add, you’ll need to create a container element, append the title header, append the other links etc, and then append the entire nested structure to the document in the right place.
Indeed, the DOM API itself is evolving to support these types of encapsulated web components, following’s these popular libraries’ lead. Web technology is constantly evolving as we learn more about how to build UIs. Game developers, frustrated with the constraints of HTML, wanted better primitives for drawing graphics, which led to the gradual adoption of graphics tools like SVG, Canvas and WebGL. Soon enough, we’ll hopefully have popular full-fledged 3d games in the browser. A good frontend developer needs to be aware of all of the emerging web technologies.
The list goes on, but google can help you find libraries to assist with other widgets for charts, embedded maps, etc. The Atlas visualization was built with SVG using a charting library called D3.js.
Creating REST APIs, or modern alternatives like GraphQL, is generally under the purview of a backend developer, but understanding how they work and how to use them is necessary for a frontend app. A good beginner project is to hook into a big public api like twitter's or facebook’s and make a UI with their data.
Once you are maintaining data in your frontend application, it is stateful, or rather, it remembers previous actions. HTTP, however, is stateless: each request has no memory of previous requests. Therefore, if you want to remember data across multiple sessions, such as staying logged in after you refresh the page, you need some for of persistence. Client-side persistence technologies include HTTP cookies, local storage, webSQL and indexedDB.
So, with the ability to render components in the UI, and the ability to pull data in from the sever, the last step is to hook the two together. As it turns out, being stateful and asynchronous make UI programming fundamentally difficult.
Newer tools, like React’s Redux, take novel approaches to achieve maintainable data mapping.
If all of this feels overwhelming to you, that is because it is. Truly, nobody knows everything there is to know about frontend tech. There are many more things not covered in this list, but once you have learned a means of solving each of the three problems, you’ll know enough to make your own apps. Then, you can learn as you go.
For some advice on how to break this down and learn it all in order, check out the guide How to learn frontend web development.