Dojo 6

Hello!

Paul Shannon

  • Sr Engineer @ SitePen
  • Talkscript Podcast
  • Phoenix TypeScript
  • Committer: Dojo, Intern
  • devpaul

The Dojo Framework

"Batteries-included" reactive framework

Features

  • Widgets
  • Routing
  • Processes
  • State framework
  • Polyfills
  • Custom Elements
  • Build time rendering
  • Internationalization
  • Accessibility

Dojo's Reactive Lifecycle

Process Widgets State

Widgets

Classic Widgets


				import { tsx } from '@dojo/framework/core/vdom';
				import WidgetBase from '@dojo/framework/core/WidgetBase';
				import Hello from './widgets/Hello';

				class App extends WidgetBase {
					protected renderer() {
						return (
							

								
								
{'Start editing to see some magic happen \u2728'}

							

						);
					}
				}

Functional Widgets 


				import { create, tsx } from '@dojo/framework/core/vdom';
				import Hello from './widgets/Hello';

				const factory = create();

				const App = factory(function App() {
					return (
						

							
							
{'Start editing to see some magic happen \u2728'}

						

					);
				});

Classic Dojo

  • Classes
  • Providers
  • Decorators
  • Metas
  • Containers
  • Local state

VS

Functional Dojo

  • Render functions
  • Middleware

Demo

devpaul/catsvsdogs

State

Dojo Store

State is managed globally by a store

Processes

Business logic is defined by processes and commands

They are tasked with manipulating the store

Dojo 6 features

Build Time Rendering

Dojo can pre-render routes into HTML at build time

and serve that HTML to the user before any HTML is loaded

Demo

dojo/site

Zero configuration

custom elements

dojo/widgets

Improved Developer Experience

  • Faster development builds
  • Glob support for code splitting
  • TypeScript 3.4+

Resources

Thanks!

Slides available at

devpaul/dojo6-slides