If you haven't heard, dojo has gotten an upgrade! The latest version of dojo ha some pretty awesome features, not just to build widgets, but it also includes a robust i18n package for your internationalization needs, a nice selection of out-of-the-box widgets and a pretty nice way to theme your applications.
A key tool provided by dojo is the @dojo/cli.
To get started you will want to use npm to install it globally.
npm install -g @dojo/cli @dojo/cli-create-app
Once it's installed, you can type dojo --help
into your command line and you should get this spiffy help message.
Nice
You're one step closer to world domination.
Now you want to actually create an application, which you do with the following.
dojo create app --name awesome-dojo-app
This will take about a minute or so to create your application directory and install all the dependencies for your scaffold application.
Once it's done, you cd
into your application directory and use the following command to run it.
dojo build --mode dev --watch --serve
Under the hood, the @dojo/cli
is using webpack to build and bundle your application. What we're doing here is:
-
build
- command to build the application -
--mode dev
- usedev
mode so that the builds are quicker and not production optimized -
--watch
- watch for any file changes and recompile -
--serve
- serve the application in a local server for us
You should be able to open your browser to http://localhost:9999/
and you would see the following
Success
I'll let you peruse the application provided, but let us take a look at the widget code real quick.
// src/widgets/HelloWorld.ts
import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
import { v } from '@dojo/framework/widget-core/d';
import * as css from './styles/helloWorld.m.css';
const logo = require('./../img/logo.svg');
export class HelloWorld extends WidgetBase {
protected render() {
return v('div', { classes: css.root }, [
v('img', { src: logo, classes: css.logo }),
v('div', { classes: css.label }, ['Hello, Dojo 2 World!'])
]);
}
}
export default HelloWorld;
You may not notice right away, but it's all TypeScript. Notice, in this widget their are no types or interfaces defined, that's because it's all inferred by the TypeScript compiler to make sure it's valid. The power of TypeScript!
Dojo has it's own virtual dom engine for building widgets and uses hyperscript as the default for creating your apps. If you are familiar with React, hyperscript is what it's like writing it without the JSX. But the v
method is much shorter for dev purposes.
I really like writing my widgets this way, and I won't go into too much detail on building a widget, I'll cover that in another post and you can read more in the dojo tutorials.
But I do realize, some people really love their JSX, so no worries, you can still use JSX if you want.
Just change the .ts
file extension to .tsx
and convert the hyperscript to JSX like this.
// src/widgets/HelloWorld.tsx
import WidgetBase from '@dojo/framework/widget-core/WidgetBase';
// tslint:disable-next-line
import { tsx } from "@dojo/framework/widget-core/tsx";
import * as css from './styles/helloWorld.m.css';
const logo = require('./../img/logo.svg');
export class HelloWorld extends WidgetBase {
protected render() {
return (
<div classes={css.root}>
<img src={logo} classes={css.logo}></img>
<div classes={css.label}>Hello Dojo!</div>
</div>
);
}
}
export default HelloWorld;
We need to import the tsx
module so that the JSX can be compiled and the default tslint
doesn't like unused modules, so you'll also need to add a comment for tslint
to ignore that line.
But there you go, you still use JSX in your Dojo widgets!
Be sure to check out the dojo tutorials for more great lessons and also the docs if you really want to dig in!
Top comments (3)
Very good post! Dojo seems quite interesting, what advantages does it offer over Vue? I've been looking at their webpage and I cannot find something particularly better in Dojo.
Some of the things that currently set Dojo apart are a few:
I have extensive experience with old school Dojo 1, which is incredibly scalable, so I look forward to building some larger apps with the new Dojo in the future.
Thanks! It definitely looks interesting, I'll take a look at it!