What is a Framework?
Web design and development can sometimes be a pretty daunting task. Coding everything from scratch is something that can definitely be done and most of the time it is what has to be done, but this can be a long process. Starting a website from scratch can be a long and arduous ordeal. Luckily, there are many tools that are available to make that task a somewhat smaller one. One of the tools that I am going to talk about in this article is called a framework.
A framework is something that is built (usually open source) to facilitate the development of websites and web applications. Like a frame to a house, frameworks can give structure to websites and web applications. You just need to know how to use them. Frameworks seek to provide automation and templates for the code that will be written. The framework, depending on what it is for, can provide templates/code for CSS and HTML, or coding extras and shortcuts for languages like JavaScript. This allows code to be used over and over again within your project. The first framework that I am going to talk about, and maybe the most used and most heard of, would be one called Bootstrap.
Bootstrap
Bootstrap is an open source front-end framework that includes HTML, CSS templates and optional JavaScript plugins. Though there is a bit of JavaScript and jQuery that comes with Bootstrap, all you really need to know is HTML and CSS. The great thing about Bootstrap is that it makes developing websites mobile-first very easy. The grid system that is associated with Bootstrap is very responsive or able to ‘respond’ to different devices such as smartphones, tablets and computer monitors. Along with this grid system comes easily added templates for navigation, forms, buttons and image carousels. It even uses it’s own font. Not only does Bootstrap have these templates and the code for them, but it also tells you how to use them.
A code example of one of the best features of Bootstrap, in my opinion, would look something like this:
<div class="container">
<div class="row">
<div class="col-sm">Content</div>
<div class="col-sm">Content</div>
<div class="col-sm">Content</div>
</div>
</div>Above, is an example of what is called the ‘Grid’ in Bootstrap. The grid allows you to create a fully mobile-first website quickly and easily. The example shows how to make a row of three columns being equally 33.33% of the page wide. The content would have this same format/look on phones, tablets and computer screens which is why the grid is so awesome.
VueJS
The next framework that I want to talk about is called VueJS and it is a little bit different from Bootstrap. This framework is purely a JavaScript framework but still can work with HTML and CSS. VueJS is a very versatile framework because it can be used with many other tools and even other frameworks. For example, VueJS could be added to a Bootstrap project and vice versa. VueJS projects also have the ability to add what are called ‘component frameworks’ (framework inception!) such as Vuetify to help make the app building experience even better. Adding Vuetify when creating a VueJS project can bring in a beautiful template to begin working with, meaning building the project is that much easier.
Because VueJS is an open source project, it is constantly being updated and added to. On their website, vuejs.org, it is even called a ‘progressive framework’ meaning that it is still developing and growing. The nice thing about VueJS is that if you have experience with AngularJS or ReactJS, it will be very easy to adapt because the format is familiar.
<div id="app"> {{ message }} </div>new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
The above example is something central to VueJS. It is called the ‘Vue Instance’ and contains all of the data, functions and whatever information Vue needs in order to complete what you want it to. In the example, the instance references the div with id of ‘app’ and contains a data element with a format of string that says ‘Hello World!’ Inside the div, the curly braces pull the string from the message element and displays it on the page. This can be done with any part of the instance that you wish to access.
Frameworks are a fantastic way to make your website or application building experience a good one. Coding everything from the very beginning is often just the way that things have to be done, but frameworks with lots of reusable code make the building experience a much faster one. While the frameworks mentioned in this article are awesome, there are so many different frameworks available to choose from. Even though I only talked about a few frameworks, there are many, many frameworks for all kinds of coding languages.
Jordan Ashment is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. This article relates to various projects in the Rich Internet Applications Course and is representative of the skills learned.
