Front-end development can sometimes be a daunting task. 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 these tools that we will talk about here is called a framework. There are frameworks for both front-end and back-end development. The three best frameworks for front-end development (in our opinion) are:
- Bootstrap
- AngularJS
- VueJS
A framework is something that is built (usually open source) to facilitate the development of websites and applications. Like a frame to a house, frameworks give your project structure. 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 the same code to be used over and over again within your project. The first framework that we will talk about, and maybe most heard of, is 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. Actually, Bootstrap recently announced that it would be removing jQuery in favor of just JavaScript in version 5. 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. This means it’s able to ‘respond’ or fit to the size of 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 has great documentation on how to use them.
A code example of one of the best features of Bootstrap, 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 a very simple illustration of what is called the ‘Grid’ in Bootstrap. The grid allows you to create a fully mobile-first website quickly and easily. This example shows how to make a row of three columns being equally 1/3rd 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.
AngularJS
AngularJS is different from Bootstrap because it is a JavaScript framework. It uses what are called directives in order to extend the HTML and add functionality. One of the nice things about AngularJS is that it is very easy to set up in your project. There are multiple ways of doing the same thing in AngularJS, which could be a help or a hindrance. Below is an example of AngularJS in action!
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>
</div>AngularJS was not created with mobile development as a focus though it can run on both Android and iOS. Luckily, Angular 2 and Angular 4 were created. These are both mobile oriented and easily made to be modular. While AngularJS is made with JavaScript, Angular 2 and Angular 4 are made with TypeScript which is kind of like an upgraded JavaScript.
Though these are later versions of Angular in versions 2 and 4, AngularJS is still very useful and still applicable to many projects. Each version has it’s specific benefits and usefulness.
VueJS
The last framework is another JavaScript framework called VueJS and it is similar to AngularJS in many ways. 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 has the option of bringing in a beautiful template before you even begin. This means building the project is that much easier!
VueJS is an open source project. That means it is constantly being updated and added to. On their website, vuejs.org, it is 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 work. 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 display it on the page. This can be done with any part of the instance that you wish to access.
Frameworks Rule!
Frameworks such as Bootstrap, AngularJS and VueJS 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 we only talked about a few frameworks, there are many, many frameworks for all kinds of coding languages.
So you know what frameworks are. Now what? Visit our Facebook Page or explore this site for info on how to get started in web development yourself. There are so many resources out there to help you on your journey. Discover the astonishing things you can do with frameworks!
Leave a Reply