Frameworks
The frameworks are more complex and usually you’ll have to install them on your computer.
How to do this can be found in the online documentation of the specific framework. And whenever you are done coding and you want to run your code, you’ll have to run a command that will process your code into something the browser will understand. We are “serving” the application when we do this.
Vue.js
Vue.js is a lightweight JavaScript framework. It can be used to build user interfaces and single-page applications (SPAs). The way user interfaces are written with Vue.js can be hard to get your head around the first time you encounter it. Have a look at this code sample:
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
<p v-if="!hide">
Let's play hide and seek. <br />
Go to the console and type: <br />
obj._data.hide = true <br />
</p>
</div>
<script>
let obj = new Vue({
el: "#app",
data: {
hide: false,
},
});
</script>
</body>
</html>
This is a simple HTML page, importing a JavaScript link from Vue. There is something weird going on in the HTML of the <p> tag: there is a v-if element. This element will only be displayed when the condition in that v-if is true.
In this case, it is looking at the hide property of our data object in our Vue instance. If you change the value of this hide to true, the negated hide statement will become false, and the element will disappear. This is something that we could have done without Vue as well, but we would then have specified a JavaScript event for the change of the value and used JavaScript to edit the CSS to hide the paragraph.
You can even see HTML elements that are new to you. That is because these are not regular HTML elements, but rather from Vue, which lets you define your own elements. You can run into HTML that looks like this:
<div id="custom-component">
<maaike></maaike>
</div>
And when you open the webpage associated with it, it shows:
Maaike says: good job!
This is not because HTML knows how to do that. This is because there is a snippet that defines the maaike component. Here is the snippet:
<script>
Vue.component("maaike", {
template: "<p>Maaike says: good job!</p>",
});
new Vue({ el: "#app" });
</script>
In the preceding code, a new Vue component is created, and it can actually hold data and have a function too, but this one is very basic and just to illustrate we can add HTML templates in the template property. There is a paragraph specified. When the webpage gets loaded, the **** component will be replaced with whatever is in the template.
The content of one page can come from many files. Usually these components all have their own file. There is a lot more official Vue tooling that you will get to know once you dive into Vue.js. It is actually a great framework for beginners with frameworks, as it is rather clear what is going on and is a great starting point for comprehending frameworks in general.
At the time of writing, you can find the full Vue docs here.
Angular
Angular is a framework that originates from and is (currently) maintained by Google. Angular is a lot heavier than Vue.js, but it can be considered a complete package. This means that Angular takes up more disk space, and more disk space usually means it is slower to compile and install. Looking at Angular code isn’t really that much different from Vue.js. However, Angular uses TypeScript instead of JavaScript. TypeScript is a superset of JavaScript and gets transpiled to JavaScript, but it is stricter and has a different syntax as well.
Angular can be recognized by the ng attributes in the HTML. We are not going to show a full example, but here is the HTML that will show all the tasks on a to-do list (when the code around it is set correctly):
<ul>
<li ng-repeat="task in tasks">
{{task}}<span ng-click="deleteTask($index)">Done</span>
</li>
</ul>
The ng-repeat attribute is specifying the repeat action that for every task on the task list, it should create a <li> element. And task can be used as a variable inside <li> as well, as indicated by {{ task }}.
There’s one more Angular-specific thing going on, ng-click, which tells Angular what to do when an element gets clicked. This is similar to the onclick event of JavaScript, but it can now be dynamically binded. This means that when writing the code, you don’t need to know about onclick yet. Clearly, you can achieve the same thing in JavaScript by specifying events that will lead to changes of the onclick attribute (and the complete element if necessary), but this is a lot more code that needs to be written. This goes for anything in Angular: it can be done with just JavaScript but it is a lot more work (and that might actually be an understatement, depending on the complexity of the situation).
At the time of writing, you can find the full Angular docs here.
Learning to work with libraries and frameworks such as React, Angular, or Vue is a very logical and even must-have next step if you seek to be a frontend developer. In the authors’ view, the difficulty of these options doesn’t really differ that much. Which one is the best choice depends on the place you want to work and the region that you are in, because there are regional preferences for these frameworks and libraries.
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
