Part 29 - What are frontend frameworks versus templates?

• Watch Video

Much of what I have taught in this course are fundamental principals of website development. Foundational elements. The basics. HTML. CSS. JavaScript.

Those 3 technologies are the basis for all websites. Even when a website is programmed using a different language, like C#, Python or PHP, the code which is eventually rendered in your browser is still HTML, CSS and JavaScript. As you will recall from previous essays, those 3 languages are all client-side or "front-end" technologies. They are called "front-end" because they happen in the front of everything; they render in your browser.

Some websites also use more complex technologies like PHP, Node.js, Python or ASP.NET. Those languages are all server-side, or "back-end" technologies. They are called "back-end" because they happen in the back of everything; they render on the webserver.

JavaScript is unique among website languages, in that it can be a front-end language, or a back-end language. For example, ordinary JavaScript is a client-side language rendering in a browser, while server-side JavaScript is used in a language like Node.js.

In a previous essay, I explained how a website "framework" is simply a library of prewritten code. I deride frameworks a lot, because as a developer with 27 years of experience, I would rather do my own work from scratch, and not rely on the work of others. It's a lot more gratifying to build a log cabin in the woods with your own two hands than it is to buy a house.

But, admittedly, typically it's a heck of a lot easier to buy a house and redecorate, than it is to start chopping down trees with an axe.

So, when should you use a framework, and when should you man-up and build a cabin?

Well, before I answer that, it's important to understand, just as we have front-end and back-end languages, we also have front-end and back-end frameworks. Makes sense, right? Remember, a "framework" is nothing more than a package of files, a library of files, based upon a certain language. So, any computer language can have multiple frameworks associated with it. PHP has many different frameworks. JavaScript has many different frameworks. There are even frameworks which combine multiple languages like HTML and CSS. So long as you have blocks of computer code, which are intended to be reused on multiple projects, you are technically using a framework. While working at a financial institution, I helped build a proprietary CSS framework I called Spire, used to style and alter the user interface of banking applications. You can build a framework and call it anything you want, but no matter what name you give it, as long as it's a bundle of reusable code, it's still a framework.

What is the difference between a front-end and back-end framework? How can you identify and differentiate them?

The easiest test to discover the answer is to ask, "What does this framework need to render?"

If the framework files can sit on your local computer, and render in your browser, it's a front-end framework. Front-end frameworks might use languages like HTML, CSS, JavaScript or any combination of those languages.

If the framework files must be delivered through a webserver, before rendering in your browser, it's a back-end framework. Back-end frameworks may use languages like PHP, Python, Ruby, Node.js, ASP.NET, Java or any combination of those languages.

That's it. Front-end frameworks render in the browser. Back-end frameworks render on the server. That sounds simple. But there's a huge problem with this. That problem being, the computer nerds don't understand that simple difference. If you look on the Internet, there are countless articles which are completely wrong and misinformed. On website after website, on forum after forum, in article after article, endless droves of misguided developers will list numerous frameworks and claim they are "front-end" when in fact, they must be installed on a server to function. Yes, you can set up your local machine to function as a server, but still, if you do that, it's not a front-end technology anymore.

For example, two of the most popular back-end frameworks in use in 2021 are JavaScript-based frameworks called Angular and another called React. Many developers falsely claim React and Angular are front-end frameworks. This is a lie. Neither React nor Angular can run on your local machine before you install Node.js, which can only run on a webserver. Therefore, React and Angular are not front-end/client-side frameworks. React and Angular are back-end/server-side frameworks, running on a Node.js server.

Linking to an outside server doesn't count either. As I have taught in previous lessons, you never link to files on another website. Not for images. Not for CSS. Not for fonts. Not for JavaScript. Not for anything. You keep all your files local; running on your own server. And the reason why is obvious; if you link to an external site and that site goes down, or the browser times-out, your site will break. 99% of website developers will link to outside files, but that is sloppy and stupid. Don't do that. Be part of the intelligent 1% of developers who do it right.

The guidelines are simple. When framework files can sit on your local computer and run in your browser, it's a front-end framework. When framework files need to be delivered through a webserver before running in your browser, it's a back-end framework.

Another thing to note is simply this; if you know the base language of any framework, you will learn that framework in minutes. Think of it like learning to read and write a foreign language and a "framework" is just a book written in that language. Once you have learned the language, you can read any book written in that language. Code is just the same. For example, PHP is a back-end language. Names of some PHP frameworks are Laravel, Zend, Symphony, and CodeIgniter. If you are well-versed in PHP, and you can program in raw PHP, you will be able to understand any of those frameworks, because they are just libraries and folders of PHP files. You can read the language. You can read the framework.

There are also true front-end frameworks which only use HTML, CSS and JavaScript, such as Bulma, ZURB Foundation, and Bootstrap. Once again, if you are well-versed in the basics of HTML, CSS and JavaScript, you will be able to grasp the basic principals of those frameworks in a day. There's really nothing to learn in most frameworks, if you already know the language that framework is written in.

Now we can get back to the question I didn't answer - when should you use a framework?

In all honesty, no one really uses them at all. We typically use templates (sometimes called "themes").

I know. I know. You're wondering, "What the heck are templates/themes?"

The easiest way to explain the benefits of a "framework" versus a "template" is to start at the beginning.

When websites were first developed, they were typically created by people with two skillsets: Designers and Programmers.

For example, if building an online store, the designer might create the basic HTML and the programmer might create a back-end database to tie all the merchandise into being displayed on the page and so forth. Designers would mock-up a layout and interface, typically using a program like Photoshop, to establish the look and feel of the site. Once completed, the graphical elements would be cropped and saved as .JPG images and the programmer would then start to write the HTML code to make the webpage look like the Photoshop design.

As websites became more complicated and more server-side languages were developed, more specialized roles started to be created.

Things really began to change in around 2008 when the term "responsive design" entered the vernacular of web development. For years, we built sites that were just being viewed on desktop computers. Starting in 2008, people were looking at websites on high definition television sets, tablets, and smartphones. Because the screens of different devices were so dramatically different in size, a website that looked beautiful on one device might look awful on another. We needed to fix this problem with "responsive design" - websites which could dynamically alter their layout and respond to the size of the screen the site was being viewed upon.

Obviously, this was a huge amount of work. Responsive design basically meant we had to start designing multiple layouts to accommodate every single permutation of screen size. As you can imagine, if you try to design for 4 different screen sizes, that means you are now doing 4 times the amount of design and programming. Responsive design became a nightmare for developers, because it literally quadrupled the time required to design and build everything. Imagine instead of building a cabin, you now have to build that same cabin in 4 different sizes.

The problem was, multiple devices with multiple screen sizes was never going to go away. Responsive design became something that couldn't be avoided or ignored. This was an irrefutable new method of web development. When you are told to "adapt or die" this is what they are talking about.

So, how do we adapt to this?

One way was to start building front-end frameworks. Create generic and universal libraries of code which could be reused and repurposed and restyled, so we weren't forced to develop every single project from scratch.

However, you can immediately predict the obvious drawback; an immense loss of creativity. Everything becomes homogenized and sterile; it's too easy to fall into patterns where websites are no longer unique and innovative. Instead, they all start to look the same. Nobody wants that. Everyone, from creative individuals to corporations, want to stand out from the crowd and be noticed. You can't be noticed on the Internet if you have a cookie-cutter website.

Beyond boring and tedious layouts, the bigger problem with frameworks is they still have no structure. To continue my architecture analogy, a framework is like having someone hand you blueprints and pre-cut wood to build house, but nothing has been put together yet. It's kind of helpful. It's a little easier than starting from nothing. But in some ways, it's almost worse than starting from scratch, because you have to figure out how to make the structure match the limited guidelines you were given.

And this is where "templates" or "themes" come in. Remember I said responsive design was like building 4 separate houses? Using a responsive design template is like someone has already framed all 4 houses for you, all the windows, wiring and plumbing is in place, you just need to finish the rest. And the other 3 houses are magical. So, as you install in a floor in the main house, the identical flooring appears in the other 3 houses all by itself. That is what I mean when I say no one uses frameworks, but they use framework templates.

Let me give you some concrete examples, by showing you some front-end templates I have used.

Over the past few years, I have started using some HTML5 templates to build my personal websites. You will notice at the bottom of my www.GirlsAndGrandpas.com site, it says the site is based upon a template called Stellar from HTML5Up.net. If you compare the design and layout of the two sites, you will notice the similarities immediately. My site is not identical to Stellar. I customized the template colors and the layout and changed the fonts and the images. But, the fundamental structure of the Stellar template remains. My site for BMX racing called www.LearnBMXRacing.com is based upon a template called Editorial from HTML5Up.net. In the case of both examples, the original HTML5 template I used contained HTML and CSS. Nothing more. I modified the code as I needed to customize it. I also converted the plain HTML pages to PHP, so I could use include files for things like the header and footer, and I could parse an XML file for the video content.

Overall, even though I did a great deal of development and programming to customize these templates, I saved myself a massive amount of time, because most of the responsive elements and layout had already been done for me.

Bootstrap is another very popular front-end framework. Bootstrap is a true front-end framework, using nothing but HTML, CSS and JavaScript. You can download Bootstrap and use it on your local computer without installing it on a webserver. But, no one ever uses raw Bootstrap files. Instead, developers tend to use Bootstrap themes. Bootstrap themes, which are built upon the Bootstrap framework, simply serve as a starting-point to develop and design a site. You might even use multiple Bootstrap themes to construct different pages in your website. Here are a few examples of some nice Bootstrap themes:




Here are some examples of the raw Bootstrap framework. Technically, these are Bootstrap themes too, but they are so stripped down, to the most generic and basic elements, it's unlikely anyone would ever use them as a basis to start building upon.

As you can see from those examples, templates often reuse developed elements, even on totally different templates. The methodology is to mix and match the foundational structures, but not to rebuild the code from scratch each time.

Now you have a clearer understanding of how frameworks were developed; what the differences are between back-end frameworks like Laravel or Node.js; why frameworks like Angular and React are back-end frameworks, even though a majority of developers falsely claim they are front-end; why legitimate front-end frameworks like Bootstrap and ZURB Foundation are beneficial; and why most developers never build from raw frameworks, but are actually using themes and templates which are created within frameworks.

Remember with all these different libraries and frameworks out there, no developer knows all of them. So, don't get lost and overwhelmed by all this information. As I have talked about in past essays, all of this technology is constantly evolving and in flux. Some frameworks will become very popular and successful. Some will fade into obscurity. As a developer, in order to remain valuable and viable, you have to simply pay attention. Follow the trends. Watch the statistics. Anticipate popular technology and ignore trends and technologies which you can see disappearing.

You will always be a useful and valued developer when your skills remain diversified.

Because remember kids, the world owes you nothing... until you create things of value.

• Watch Video

Glossary

back-end (also called "server-side")

framework

front-end (also called "client-side")

templates/themes

Downloads

• Start Bootstrap Theme (Freelancer)
• Start Bootstrap Theme (Resume)
• Bootstrap Made Theme (iPortfolio)
• Start Bootstrap Theme (Personal)
• Get Bootstrap Examples

Other Articles

• Previous Article