In part 2 of this series, I focused on the basics of back end development. Here, I’m going to talk about developing client-side code.
The front end of a Single Page Application (SPA) is composed of three major things:
- HTML: a markup language that’s parsed by the browser to create the Document Object Model—a tree representing the structure of your page
- CSS: another markup language that applies styling to the DOM
They generally work together as follows:
- The user interacts with the application in some way.
Frameworks: a Blessing and a Crutch
If you want to make an application in a reasonable amount of time, and if you want to avoid reinventing the wheel for a bunch of solved problems (showing/hiding a particular element based on a variable’s state, for example), I’d recommend picking up a solid framework and using that as a foundation for your app.
There’s a definite downside with this for the beginning developer, though. Since a good framework abstracts the details away from you, you never learn the underlying logic that the framework is hiding from you—and, because of this, you learn how to make a web application using a particular framework, and that framework only. And unfortunately the shelf life of these frameworks is relatively short, and the list of them is absurdly long.
Libraries as Building Blocks
There is a halfway point between adopting a monolithic framework and hand-rolling all your own code: pick out a variety libraries, each one of which handles a particular problem, and then knit them together to make an application without wasting your time fixing solved problems or getting locked in to a particular framework’s structure.
Hopefully you can use this general knowledge to give you a couple more keywords for Google as you learn—and some foundations so that you don’t go into any future tutorials completely blind. Happy coding!
This is the third in a series on understanding SPA architecture: