Learn Alpine, Elm and Mocha

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

elm-ui is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way. The novel part is that it does not require you to know CSS to be used, you can start building layouts right away!

You'll learn how to:
- use a declarative mindset for building UIs
- position elements on the screen
- create layouts with rows and columns
- build a form with elm-ui

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

Elm is a beginner friendly functional reactive programming language for building web applications. It contains a small but powerful set of language constructs, such as, static types, algebraic data types, immutability, and pure functions. Elm provides and requires the use of a specific architecture that’s well suited for sensible application construction. Elm’s type system and architecture may feel constraining at first, but they ultimately provide the programmer with some neat benefits including comprehensible code, and a much improved refactoring experience.

In this course you will learn the basic fundamentals of Elm so that you can start building applications today.

Start Using Elm to Build Web Applications

In this lesson, we learn how the `x-init` directive in Alpine JS lets us run a JavaScript expression once the component has initiated.

We see the nuances that allow us to trigger that code before Alpine performs initial DOM updates, or after these updates have been made.

Focus in input field on page load with `x-init` in Alpine JS

In this lesson, we define a "count" state value with the `x-data` directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.

We then display the "count" value in our HTML with the `x-text` directive, which updates an element's `innerText` value.

We also hook up buttons with click event listeners with `x-on:click`, which allows us to modify the count value as desired.

Update a count state value with the x-on event listener directive in Alpine JS

In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an `activeTab` state value with `x-data. We then wire up our buttons to change the value of `activeTab` on click, and use `x-show` to determine if the tab content should be visible or not, based on the value of `activeTab`.

We also take control of the `class` attribute with `x-bind`, and we conditionally output an "active" class based on, you guessed it, the value of `activeTab`.

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

In this lesson, we move the component definition to a function, defined in a script tag in the HTML document.

We then iterate through an Array of Objects with the `x-for` directive in Alpine JS. We use a `<template>` tag to wrap the HTML element we want to repeat for each item, and put the `x-for` directive on that template tag.

We also define a "computed" property by adding a method on our function, which checks if a given ID matched the currently active tab id. This computed property allows us to determine wether or not to apply the "active" classname to our tab buttons.

Iterate through data with the `x-for` attribute in Alpine JS

In this lesson, we smoothen the transitions between tabs by applying a `transition` modifier to our `x-show` directive.

We see how we can ignore the leaving elements, and focus the animation on the entering elements. We tweak the transition duration and origin by chaining additional modifiers to our `x-show` directive.

Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

In this lesson, we see how the `x-model` directive makes achieving "two-way data binding" effortless in Alpine JS.

We see what it would take to recreate the same functionality with an `x-bind` directive for the input value, as well as an `@input` event listener which, thanks to an access to the browser's native events via the `$event` magic property, sets the state value to `$event.target.value`.

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

In this lesson, we learn how to retrieve a DOM element via the `x-ref` directive in Alpine JS, which gives us a reference to the element it is applied on. In our case, an input field.

We can then use the `$refs` object, and reach for the ref we need to target.

This allows us to trigger the focus state of the input field, with the `.focus()` method.

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the `$watch` property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.

We also use the `debounce` modifier on the `x-model` property to avoid firing an API call on each keystroke.

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

This is the series intro video. Let's get started!

Series Intro - Beginner Level Alpine JS

We are going to go ahead and install globally create-elm-app (because it has the best DX so far) and show how would you typically start any production-ready Elm app, and also add elm-ui as a dependency and show the first elements with elm-ui.

Bootstrap an elm-ui Application with create-elm-app

To showcase the power of elm-ui, in this lesson we will show how incredibly easy it is to center an element both horizontally and vertically on a screen with elm-ui, since this is a typical problem while doing regular CSS.

Center an elm-ui Element Horizontally and Vertically

In this lesson we will start to get to know the row and column functions in elm-ui to help us layout our application. We will choose the mobile first approach in which we will display everything in one column, show how to handle two columns and explain that later when we do responsible we will be able to play a bit more with this. Since the concept of margin does not exist in elm-ui, in this lesson we learn how to solve it by using spacing and we will talk about padding in a future lesson.

Model a Layout with row, column and spacing with elm-ui

We will use the pink box element that we had from previous lessons while implementing our fancy dashboard and we will turn it into our Card "component", the piece of UI that we are going to repeat and that will have its own state later on the course. 

To do this, we'll first manipulate the background color and text color, then change the height and width of the card. We will want to change the title for each of the cards and to do so we will accept a title argument that will be passed down to our text element within the card to be displayed.

Use View Functions to Create Reusable Pieces of UI in Elm

Since we mentioned in a previous lesson that there is no concept of "margin" in elm-ui, we are goint to learn how to se `padding`, `paddingXY` and `paddingEach` to compensate for that, and a little trick defining a value edges that is going to be pretty useful.

Use padding, paddingXY and paddingEach with elm-ui

We will style the heading of `viewCards` to look more like a real heading. If you inspect the console right now, you'll find that the `el` element we are using for our text corresponds to a div in HTML. 

We will go further away than using only text to display our content and introduce the modules `Element.Font` and `Element.Region` to fix the headlines and other text of our dashboard, adding an additional "breakdown" heading that is going to serve as a divider between sections.

Style Text with elm-ui Headlines, Typographies, and Fonts

In this lesson, we will explain when you would need to reach for the `text` function, why it is different from `textColumn` and `paragraph` and when to use each one as they serve different purposes for displaying text in the UI. Basically, `el` and `text` elements **do not wrap text by default**, so we need to use `paragraph` when we want text to overflow and still be visible to read. We will add a new "subtitle" section below our Breakdown subheading

Choose between text, textColumn and paragraph with elm-ui

Now that we have our cards more or less looking good lets add a button and style it as well so that it serves as a starting point for our dropdown component, this lesson will also help us to learn how to use the `Element.Input` module from elm-ui.

Work with elm-ui Input Components

Since there is no select or dropdown component backed in into elm-ui, we will be adding another dependency to our project called `PaackEng/elm-ui-dropdown` and adding to it additional styles and settings so that it looks and behaves exactly as we want to.

To make this works, we need to make a few changes:
- We need to add a `dropdownState : Dropdown.State String` to our `Model`
- Add a couple of extra variants to our `Msg` type: `OptionPicked (Maybe String)`, to be dispatched by our dropdown whenever we click on any option, and `DropdownMsg (Dropdown.Msg String)` to update the internal state of the dropdown from the outside.
- Construct our hardcoded list of options of type `List String`.
- Define a `dropdownConfig : Dropdown.Config String Msg` that is going to contain all our customisation of our dropdown.
- Use `Dropdown.view` to display our custom dropdown wherever we need it.

Topics

Instructors

Content Type