Tutorial¶
Setting up Babel¶
Let’s start by setting up the Babel configuration to transpile ES6 into standard JS. Create a file called .babelrc in your project’s directory and put the following in it:
{
"presets": ["es2015", "stage-0"],
"plugins": [
"transform-decorators-legacy"
]
}
Now, install the babel
command by running:
$ npm install -g babel-cli
And install the Babel plugins and presets using:
$ npm install --save-dev babel-preset-es2015 babel-preset-stage-0 babel-plugin-transform-decorators-legacy
You’re all set up! Time to write some code!
Creating your first ES6 module¶
Let’s start off with something simple. Create a file in src
and call it app.js
:
export class Person {
constructor(name) {
this.name = name
}
hello() {
console.log(`Hello, ${this.name}!`)
}
}
Now create a QML file named main.qml
:
import QtQuick 2.0
import "app.js" as App
Item {
Component.onCompleted: {
var person = new App.Person('Michael')
person.hello() // Prints "Hello, Michael!"
}
}
Using polyfills¶
Let’s get some fake users from <http://jsonplaceholder.typicode.com/>. In plain JS, you’d have to use XMLHttpRequest. With Quickly, you can use the fetch API. Add the following to your app.js
file:
export function getUsers() {
return fetch('http://jsonplaceholder.typicode.com/users')
.then(response => response.json())
}
And add the following code to your main.qml
file, inside the Component.onCompleted
block:
App.getUsers().then(function(users) {
var name = users[0].name
console.log('The first user is: ' + name)
})
Isn’t that nicer and easier than XMLHttpRequest?
Using NodeJS core modules¶
Let’s say we want to parse a URL and get the domain name. Easy, just add the following to your app.js
file:
import * as url from 'url'
const data = url.parse('http://www.google.com')
console.log(data.host) // prints 'www.google.com'