DEV Community: Van Balken

Trying Vue without NPM

Van Balken — Sun, 28 Mar 2021 10:37:17 +0000

You can start hacking away with Vue (and Axios) without NPM. One simple html-file is all you need. In this post I will show you how with an example based on the official Vue.js guides.

I wanted to create a simple frontend to show some data from a REST API. I wanted to use a modern framework but I didn't wanted to bother with Node and NPM. Luckily with Vue.js thats really easy to do!

Vue.js can be easily included using a script-tag and the same goes for Axios.

Below you find a working example of the official Vue.js Using Axios to Consume APIs example in copy-paste-able html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>Bitcoin Price Index</h1>
    <div v-for="currency in info" class="currency">
        {{ currency.description }}:
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: null
        },
        mounted () {
            axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .then(response => this.info = response.data.bpi);
        }
    });
</script>
</body>
</html>

The same is also possible with (but not limited to):

React
Old school AngularJS

A quick look at destructering

Van Balken — Fri, 28 Jun 2019 20:53:19 +0000

This post will use a couple of examples to provide a quick look at destructering In JavaScript (and TypeScript). You should read the MDN web docs if you want to know more. It's well-written and contains helpful examples.

The basics

Destructering is used to extract data from arrays ([]) and objects ({}) with little code:

const person = ['John', 25];

let name, age;

// Without destructuring
name = person[0];
age = person[1];

// With destructering
[name, age] = person;

const person = {name: 'John', age: 25};

const {name, age} = person;

Default values can be used as well:

const namelessPerson = {age: 21};

const {name = 'Jane Doe', age} = namelessPerson;

It can be used in a function to only pick the properties you need:

const person = {name: 'John', age: 25};

function hello({name}) {
    console.log(`Hello ${name}!`);
}

hello(person); // 'Hello John!'

A bad example

With the last two examples combined you can write code that is quite hard to read:

const person = {name: 'John', age: 25};
const namelessPerson = {age: 21};

function hello({name = 'Jane Doe'} = {name: 'John Doe'}) {
    console.log(`Hello ${name}!`);
}

hello(person); // 'Hello John!'
hello(namelessPerson); // 'Hello Jane Doe!'
hello(); // 'Hello John Doe!'

(Both the property name and the parameter object have default values assigned.)

An example in TypeScript

One specific situation in which destructering is useful is when you're subscribing to an observable that returns an array. For example when you use combineLatest:

combineLatest(user$, dog$).subscribe([user, dog] => {});

// And when explicitly typed
combineLatest(user$, dog$).subscribe([user, dog]: [User, Dog] => {});

Use "async as" to cleanup Angular templates

Van Balken — Sun, 23 Jun 2019 19:43:08 +0000

The result from an AsyncPipe can be stored in a local variable:

<span *ngIf="person$ | async as person">
    Hello {{ person.name }}
</span>

The local variable can be used in the scope of the ngIf. This can reduce the need of additional AsyncPipes and ? operators.

The important part is the as with which you can store the conditional result of the ngIf in a local variable (See: Angular Docs).

I found out about this by reading: Handling Observables with NgIf and the Async Pipe @ Ultimates Courses. I recommend reading it for more information.

The Angular Style Guide doesn't mention how to name your Observables. But in the documentation of the RxJS library they say: It can be convenient to name Observables with a trailing "$" (Angular Docs).