by Simon MacDonald
Photo by Glenn Carstens-Peters on Unsplash
Last week at CascadiaJS, Begin announced our new HTML first framework, Enhance. It wasn’t long before folks asked about building a Todo app with Enhance on our Discord.
If you just want to jump right into the app, you can clone the repository and run the following commands from your terminal:
npm install npm start
Once the app starts up, navigate to http://localhost:3333/todos.
Enhance apps are a combination of APIs, web components and pages. Our version of TodoMVC should look like this when you clone it:
app ├── api | ├── todos | | └── $id | | | └── delete.mjs | | ├── $id.mjs | | ├── clearcompleted.mjs | | └── toggleall.mjs | └── todos.mjs ├── elements | ├── todo-footer.mjs | ├── todo-item.mjs | └── todo-main.mjs └── pages | └── todos.mjs ├── head.mjs models ├── schemas | └── todos.mjs └── todos.mjs
How does it all work?
Great question. Let’s trace what happens when you hit the route http://localhost:3333/todos.
- The browser sends a GET request to
- The Enhance application checks to see if there is an API route that matches
- In this case, the
getmethod queries DynamoDB to get all the saved todos and returns a JSON payload.
- The application then calls the
pages/todos.mjs, including the JSON payload from step four as part of our store. The store will be passed down to all the web components loaded by this page.
pages/todos.mjsrenders out HTML by server-side rendering the apps web components, which you can find in the
Where to take things from here?
- Try out the Enhance Quickstart!
- Sign up for early access to the next version of Begin