Part 5: Frontend ❤️
Recap of Last Time
- We built a Node.js app utilising the built-in http.createServer
- Starts an HTTP server and serves static files out of the ./public directory
- We implemented dynamic routing with a handy easy to define syntax
- Our routes use Handlebars template files to display content that's not static
- We also wrote a super simple form data parser that will allow us to capture user data
- We connected up a database, using SQL queries mixed into "actions" to contain them
What are we building again?
Ever wanted to remind yourself of something, out of the blue? Well, we're building a quick tool to do that!
What's left to do?
Today, we're working on the frontend a bit.
Next session, we're going to write a cronjob and connect up the mailing functionality.
Then, it's launch time!
The state of frontend
Modern JS and CSS are not supported across all browsers. Your options are:
- Screw those pesky old browsers... 😈
- Write your frontend code in lowest common denominator standards 😳
- Add a compilation step allowing you to write modern code but have it come out as acceptable even to the oldest of the Internet Explorers
So what's a 'pipeline'?
- Your app should serve static assets on production
- In your development environment, it's helpful to "watch" for changes and not rely on static assets
- An asset pipeline lets you have your watch for changes on dev, and compile assets on live
What we're actually going to do...
On live, a build step will happen before deploy completes with static assets.
On development, assets will be compiled and served from memory.
Install packages! 😿
For JS, we will use Babel, Browserify & Uglify.
For CSS, we will use PostCSS with SASS rules.
* We install them as dependencies and not devDependencies because our production build step needs them!
Importing the new modules
A new type of response is needed
Incorporating it into our statics
npm run build
Ok, let's make some files now
🚨 Moar styles! 🚨
Code's too long to put in the slides, but here you go:
date picking for everyone
Unfortunately, input type="datetime-local" only works on new browsers...
Handlebar helpers in templates
Helpers can simplify a lot of things in views.
Look at that gorgeous thing...
Well done, you made it! 👏👏👏
See you next time where we look at Adding in email functionality and building a cronjob.
Please don't hesitate to contact me or leave feedback on the course:
See today's code: https://github.com/frameworkless-js/remind.ist/tree/stage/5
See today's lesson running live: https://part5.remind.ist
frameworkless.js -> Part 5
By Mike Timofiiv