2019-11-26 21:18:18 +00:00
|
|
|
# Vanilla.js Deck
|
|
|
|
|
|
2020-01-29 21:10:30 +00:00
|
|
|
|
|
|
|
|
|
2020-01-29 22:12:03 +00:00
|
|
|
👀 [View the live demo](https://jlik.me/vanilla-js)
|
|
|
|
|
|
2019-11-26 21:18:18 +00:00
|
|
|
A Vanilla.js Single Page App (SPA) slide deck for a presentation about Vanilla.js. Yes, this is inception! No builds (unless you
|
|
|
|
|
count the included Docker image) and no frameworks, just pure JavaScript for a SPA application that features:
|
|
|
|
|
|
|
|
|
|
- Routing (yes, you can bookmark/return to a slide)
|
|
|
|
|
- Transitions
|
|
|
|
|
- Reusable components
|
|
|
|
|
- Data-binding
|
|
|
|
|
|
2020-02-27 18:45:14 +00:00
|
|
|
There is a full walkthrough of the code available here:
|
|
|
|
|
|
|
|
|
|
📄 [Build a Single Page Application (SPA) app with Vanilla.js JavaScript](https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/)
|
|
|
|
|
|
2019-11-26 21:18:18 +00:00
|
|
|
## Getting Started
|
|
|
|
|
|
|
|
|
|
Optionally fork then clone the repo:
|
|
|
|
|
|
|
|
|
|
`git clone https://github.com/JeremyLikness/vanillajs-deck.git`
|
|
|
|
|
|
|
|
|
|
Spin up your favorite web server and point it to the root directory. There are no builds involved.
|
|
|
|
|
|
|
|
|
|
One simple approach is to use Node.js and `http-server`:
|
|
|
|
|
|
|
|
|
|
`npm i -g http-server`
|
|
|
|
|
|
|
|
|
|
`cd vanillajs-deck`
|
|
|
|
|
|
|
|
|
|
`http-server .`
|
|
|
|
|
|
|
|
|
|
Navigate to one of the URLs with `index.html` as the path.
|
|
|
|
|
|
|
|
|
|
### Docker setup
|
|
|
|
|
|
|
|
|
|
If you prefer, you can build a Docker image and run the presentation from there.
|
|
|
|
|
|
|
|
|
|
`cd vanillajs-deck`
|
|
|
|
|
|
2020-01-29 20:19:12 +00:00
|
|
|
`docker build -t vanillajs-deck .`
|
2019-11-26 21:18:18 +00:00
|
|
|
|
|
|
|
|
`docker run --rm -d -p 8080:80 vanillajs-deck`
|
|
|
|
|
|
|
|
|
|
Navigate to `http://localhost:8080/index.html` to start the show.
|
