Elixir and Elm Tutorial (The Book, Single Copy License)
Elixir and Elm Tutorial
About the Book
- Want to create fun new projects?
- Want to learn functional programming?
- Want to get a job working with a better tech stack?
- Want to make your dream ideas become a reality?
While most programming books focus on theory, we'll take a practical approach and build an application together with Elixir and Elm. In the process, we'll use functional programming techniques as we learn how to create fun, scalable, and maintainable web applications.
What Are We Building?
The application we'll be building is a small game platform for the web. We'll use Elixir and the Phoenix web framework to power the back-end, where our users can log in and keep track of their scores. And then we'll use Elm on the front-end to create fun mini-games. We'll tie everything together so we can pass data back and forth between the back-end and front-end by syncing player scores in real-time. We'll focus on building things with a strong foundation, so that we can use these same concepts to create different web applications as well.
Testimonials
- "To be clear, this is already one of the best resources I've found!" John
- "Really great so far. And everything works when you follow along. Very rare." Anonymous Survey Response
- "I already know the basics, but I like the way you're explaining everything. Solid book." Andrew
- "I want to thank you for bringing these two languages together, as this is exactly the stack I wanted to learn." Max
- "I'm just happy that this book exists!" Russell
- "I liked a lot the fact that you provided all the steps to run and deploy a complete Phoenix/Elm application all in one place. It's possible to find resources to learn Elm, Elixir and Phoenix relatively easily on the web, but your book is the first I found detailing how to combine them in a step-by-step way." Florian
Frequently Asked Questions
Why cover two programming languages in a single book?
There are plenty of great technical books available, but the Elixir and Elm Tutorial takes a bit of a different approach. Rather than covering a single language, we take a more holistic approach to building a full application. In doing so, we'll see a lot of familiar patterns that functional languages share. Not only will we be able to cover a lot more ground, but we'll have the added benefit of seeing similar concepts implemented in two separate languages.
Why Elixir and Elm?
Have you ever had a great idea for an application you wanted to build? Did it get increasingly difficult to implement as you worked on it? Have you considered that perhaps the tools you were using were making things really hard on you? Elixir and Elm are user-friendly languages that are built on top of very strong foundations. These languages make it considerably easier for us to craft scalable and maintainable applications that remain fun to work with as we continually add new features.
Should I use these languages for my next big project, or are they too young?
Although Elixir and Elm are young languages, they are also languages that solve real problems. If you're planning to build the "next big thing," you should seriously consider a strong tech stack with a solid foundation. While other startups are struggling to deploy new features because "undefined is not a function", your project will continue to be maintainable, fast, and easy to refactor.
The material for this book was also written intentionally so that readers could adapt it to their needs. Although we use examples with "players" and "games", they could easily be adapted to work with "users" and "products" and the concepts remain the same.
Which versions does this book cover?
• Elixir 1.7
• Phoenix 1.4
• Elm 0.19
Is source code available to accompany the material?
Yes. The demo application is still being actively developed, but feel free to check out the source code on GitHub and feel free to send me an email if you have ideas or suggestions.
Why LeanPub? Will the book be kept up to date?
LeanPub is amazing. It's especially important for a project like this one, because these languages are fairly new and evolving. Both Phoenix and Elm underwent big changes during the writing of this book, and LeanPub made it easy to continually update the content and push new releases. The intention is that the material will be kept up to date with the latest versions of Elixir, Phoenix, and Elm. New features for the demo application will also be added, and rewrites will help to continually improve the way the concepts are covered as well.
Any plans for future releases?
Yes. The content for this book has been completely rewritten and revised as major changes to Phoenix and Elm have been released. The book contains over 300 pages of content and also contains a "What's Next?" chapter with ideas for readers to consider or potentially feature in future iterations.
About the Author
Table of Contents
-
Introduction
- What We’re Building
- Acknowledgements
- Who Is This Book For?
- Prerequisites
- Why Elixir and Elm?
- Technology Stack
- Functional Programming
- Summary
-
Diving In
- Installation
- Creating the Platform
- Configuring the Database
- Running the Server
- Our First Resource
- Routing
- Running a Migration
- Creating Players
- Updating our Home Page
- Writing Elixir Code
- Summary
-
Elixir Introduction
- Creating an Elixir Project
- Elixir Testing
- Elixir Compilation
- Elixir Modules and Functions
- Functions, Tests, and Documentation
- Writing Tests
- IEx
- The Pipe Operator
- More Piping
- Function Arity
- Shorthand Function Syntax
- Pattern Matching
- Guards
- Summary
-
Phoenix Testing and Deployment
- Running Phoenix Tests
- Git and GitHub
- Heroku
- Heroku Setup
- Heroku Configuration
- Production Deploy
- Static Asset Compilation
- Deployment
- Up and Running
- Running Migrations
- Summary
-
Phoenix Sign Up
- Extending Player Account Features
- Player Fields
- Adding Fields
- Updating the Player Schema
- Player Changeset
- Generating a Migration
- Running the Migration
- Updating Our Application
- Working with Forms
- Show Player Page
- Edit Player Page
- Shared Form
- Saving Our Progress
- Summary
-
Phoenix Authentication
- Fetching Dependencies
- Player Changesets
- Using Our New Changeset
- Accounts Tests and Module Attributes
- Fixtures, Maps, and Structs
- Player Controller Tests
- Speeding Up Tests
- Authentication Plug
- Router
- Authenticate Function
- Manual Testing
- Fixing Our Tests
- Signing In
- Sessions
- Player Sign In View and Template
- Session Routing
- Signing In and Out
- Trying Things Out
- Displaying the Player Status
- Summary
-
Phoenix API and Ecto Relationships
- Generating the JSON API
- API Routing
- Establishing Relationships
- Creating Gameplays
- Our New Gameplay Schema
- Running Our Migration
- Trying Out our JSON API
- Creating a Game
- Player API
- Summary
-
Elm Introduction
- Introduction
- Hello.elm
- Elm Syntax
- Modules, Functions, and Types
- Main Function
- elm-format
- Comments and Type Signatures
- Summary
-
Elm Setup
- Configuring Elm within Phoenix
- Elm Folder
- Updating .gitignore
- elm init
- Main.elm
- Webpack Configuration
- Displaying Our Elm Application
- Working Elm application
- Live Reload
- Summary
-
Elm Application
- Getting Acquainted
- elm-format
- Main.elm
- Elm View
- Creating a List of Games
- Breaking Up the View
- Extracting Our Data
- Passing Data to the View
- Elm Maybe
- Maybe.withDefault
- Why Maybe?
- Iterating Through the List
- Tying It All Together
- Summary
-
Elm Architecture
- Adapting Our Existing Elm Application
- Removing the Original Main Function
- Starting with the Model
- Update
- Update Messages
- Changing the Model
- Performing the Update
- Subscriptions
- Updating the View
- The Browser Module
- Displaying Our List of Games
- Handling Events
- Summary
-
Elm and API Data
- Where Were We?
- Updating Our Initial Model
- Changing the Update
- Changing the View
- Importing Packages
- Fetching Games
- JSON Decoding
- FetchGamesList
- Performing the Fetch
- Decoding the Remaining Game Data
- Rendering Our List of Players
- Decoding Player Data
- Refactoring Our View
- Performing Another Fetch
- Sorting Results
- Summary
-
Design and Usability
- Pages
- Phoenix Layout
- Styling and Classes
- Writing New Styles
- Featured Section
- Featured Game Data
- Authentication Section
- User Deletion
- Authorization
- Fixing Our Tests
- List of Games
- List of Players
- Summary
-
Game Setup
- Creating a Games Folder and a New Game
- Configuring Webpack
- Updating app.js
- Extending Our GameController
- Adding a Route
- Creating a Template
- Working with Slugs
- Updating the Schema
- Running the Migration and Adding a Slug
- Fixing the Tests
- Using Our New Slug Field
- Pretty URLs
- Working Links
- Decoding Slug Data in Elm
- Featured Game Link
- Summary
-
Our First Game
- Base Application for Our Game
- Creating a Game Canvas
- Setting Up a Game Window
- Adding the Sky and the Ground
- Creating Our Character
- Importing Our Character
- Changing the Character Position
- Updating the Model
- Adding an Item
- Summary
-
Adding Interaction
- Subscriptions
- Subscribing to Keyboard Input
- Tracking Key Presses
- Setting the Correct Keys
- Changing Direction
- Character Direction
- Collecting Items
- Spawning Items
- Working with Randomness
- Summary
-
Displaying Game Data
- Scoring with Item Collection
- Rendering Text Data
- Displaying Items Collected
- Displaying Time
- Updating the Player Score
- Implementing a Countdown Timer
- Incorporating Time
- Summary
-
Handling Game States
- Game State
- Custom Types
- Adjusting the View
- Starting Screen
- Space Bar to Start
- Clean Starting State
- Success State
- Restarting
- Game Over State
- Summary
-
Phoenix Channels and Elm Ports
- A Brief Warning
- Introduction to Channels
- Socket Connections
- Score Channel
- Joining the Channel
- Introduction to Elm Ports
- Configuring Elm Ports
- Triggering the Port in the Update
- Triggering the Port to Send Data
- Seeing the Results with JavaScript
- Initializing the Socket and Joining the Channel
- Pushing Data Over the Socket
- Summary
-
Syncing Score Data
- Gameplays
- Displaying Gameplays
- Receiving Score Data from Phoenix
- Decoding JSON and Storing Gameplays in the Model
- Using JavaScript to Pull Data from Phoenix into Elm
- Summary
-
Socket Authentication
- Phoenix.Token
- User Tokens
- Passing the Token to JavaScript
- Verifying the Token
- Working with the userToken
- Extending Gameplay Data with the Payload
- Finding the Game ID
- Refactoring with Pattern Matching
- Updating the receiveScoreFromPhoenix Port
- Displaying New Player Score Data
- Cleaning Up the View
- Summary
-
Saving Score Data
- Saving Scores with Our ScoreChannel
- Saving Prerequisites
- Saving Gameplays
- Triggering SaveScore on the Front-end
- Setting Up the saveScore Port
- Saving Scores
- Adjusting the SaveScore Button
- Working with Flags
- Hiding the Button for Anonymous Players
- Summary
-
Finishing Touches
- Fetching Gameplays
- Decoding the Gameplay JSON Data
- Performing the Gameplays Fetch
- Fetching Players
- Creating the HTTP Request and Decoders
- Using FetchPlayersList in the Update
- Showing Player Names in the View
- Creating Helper Functions
- Refactoring the viewGameplayItem Function
- Updating the Leaderboard
- Summary
-
What’s Next?
- Additional Platformer Features
- More Minigames
- Multiplayer
- Flexible Game Creation
- Chat
- OTP Content
- Summary
- Outline
-
Appendix
- Quick Install
- Working with Versions
- Recommended Tools
-
Contact
- Congrats
- Feedback
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $14 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
