Since this is my last term at OSU, I really wanted to do something that is not required by the school course, somewhat challenging but still manageable. So I set a small goal for myself that I will learn a front-end framework and use it to implement a web page. After some research, it seems that the three most popular frameworks are Angular, Vue.js and React. I have zero experience in all three frameworks and my experience in web design only comes from CS 290. I choose to look at Vue.js and Angular first and leave React to a later time.
Vue.js
The website describes it as “The Progressive JavaScript Framework, an approachable, performant, and versatile framework for building web user interfaces.” It builds on top of standard HTML, CSS and JavaScript with intuitive API and world-class documentation.
Angular
“Angular is built by a team of engineers who share a passion for making web development feel effortless. We believe that writing beautiful apps should be joyful and fun. We’re building a platform for the future.”
It does not tell me much of the information here nor does it help to decide which framework is more suitable for me to learn at my stage. So I decided to spend some time on both frameworks, watch videos, go over the tutorials and documentations provided by the development teams, and see if I can grasp the idea behind it and be able to write some codes on my own. I was very energetic and excited.
I first started with Angular. I know that TypeScript is essential to know in order to use Angular, so I wanted to see if I can pick up TypeScript in a short time. The resources I used are Angular docs and videos on YouTube. I’m really a learning by doing person, so instead of just reading the docs, I followed a tutorial provided by the dev team that walks you through step by step to build a simple e-commerce site.
Component. Every application in Angular is built with components. This concept is new to me as I have never heard of this and have no idea how it works. According to the definition, ” Components define areas of responsibility in the UI that let you reuse sets of UI functionality.” A component consists of three things: a component class, an HTML template, and CSS for each component which is called component-specific styles in Angular. So this means that before you start building your application, you kinda need to have a rough blueprint in your mind of what components you will need for your application and then you will build them one by one. This is very different from what we learnt in CS 290 that we just build the web page in whole.
Typescript. Having some basic understanding in HTML, JavaScript, and TypeScript will speed up the process to grasp the framework. Here is a code snippet of the product list component. It’s taken from the product-list.component.html file. I’m already familiar with the html structure and syntax like h2, div, h3 and button as well as using {{ }} to render the property value as text. What’s new to me is the way it writes loops and if statements. Here it uses *ngFor and *ngIf. Also to set the title, it uses the binding [ ] syntax as follows.
<h2>Products</h2>
<div *ngFor="let product of products">
<h3>
<a [title]="product.name + ' details'">
{{ product.name }}
</a>
</h3>
<p *ngIf="product.description">
Description: {{ product.description }}
</p>
<button type="button" (click)="share()">
Share
</button>
</div>This is the desired output
In the next few weeks I will continue sharing my experiences of learning Angular and Vuejs and my final pick to start my small side project, so stay tuned!
Reference:
https://vuejs.org/
https://angular.io/about?group=Angular
