Andre Vermeulen avermeulen

Web development beyond the src tag

Using ES6 modules in the browser.

So far you have used modules import/export in NodeJS and in the front-end you have used script tags to import your source code.

You can actually use modules in your front end code. And frameworks like ReactJS & VueJS are heavily using that. To do that though you will need a tool that convert the JavaScript that is using modules into JavaScript that can be executed in the browser.

AlpineJS with ViteJS

ViteJS is a modern JavaScript build tool that can be used to build modern JavaScript frameworks including ReactJS and VueJS to name only two. In this tutorial you will explore how to use ViteJS with AlpineJS. This will prepare you for using ViteJS with ReactJS or other modern web framework.

Modern JavaScript built tools like ViteJS, ParcelJS & react-create-app (built with webpack) embrace ES Modules. Meaning that external dependencies are installed via npm and imported. So no more script, style or link tags. HTML, CSS & JavaScript are bundled into compact bundle.

Create app using Vite

Let's start exploring ViteJS by creating a new application. Using this command:

Elastic Electricity App

Create a web app, to help your local Municipality to track electricity usage per household. Each month the Municipality gives each household's 50 units each for free. Households can topup if they need extra electricity.

As you use appliances, your units will drop accordingly.

If the units per household is equal or below 30, add a class warning into your current units.

In your app you must have the following.

Using ESLint with VS Code

ESLint is a tool for “linting” your code. It analyze your code and warn you of potential errors.

Installing ESLint

In order for it to work, you need to configure it with specific rules. Luckily it provides an ESLint configuration that anyone can use.

To use ESLint you will need to install Node.js

Building blocks

To pass the OCA exam your really need to know these Java concepts.

Classes & Interfaces
- methods on classes
- the affect of access modifiers on classes
- the affect of interfaces on classes
- class constructors

Todos

Things to look into

https://www.apollographql.com/docs/link/links/context/ - storing a token Apollo GraphQL client.

	const students = [
	{ name: 'Ethan', subject: 'History', score: 85, grade: 10 },
	{ name: 'Mia', subject: 'Physical Sciences', score: 92, grade: 12 },
	{ name: 'Lucas', subject: 'Life Sciences', score: 88, grade: 11 },
	{ name: 'Avery', subject: 'Geography', score: 90, grade: 9 },
	{ name: 'Lila', subject: 'English', score: 94, grade: 11 },
	{ name: 'Benjamin', subject: 'Maths', score: 87, grade: 12 },
	{ name: 'Nora', subject: 'History', score: 82, grade: 10 },
	{ name: 'Alexander', subject: 'Physical Sciences', score: 88, grade: 9 },
	{ name: 'Grace', subject: 'Life Sciences', score: 90, grade: 11 },

	get("/login", (req, res) -> {
	// create route that render a login screen
	});

	get("/logout", (req, res) -> {
	// or see how to destroy the session
	request.session().removeAttribute("username"); // Remove session attribute 'user'
	res.redirect("/login");
	});

	package cost;

	public class CalculateCost {

	// calculate the sms cost
	public static double smsCost(int qty) {
	return 65 * qty;
	}

	// calculate the call cost

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="counter"></div>
	<input type="text" class="name" pattern="^[A-Za-z]*" >