O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Elm Web Development

Book Description

Explore why ELM is a great alternative to using pure JavaScript and other JS-based solutions by building complete apps and websites.

About This Book

  • Develop your own scalable and modular web applications with Elm to make web development less messy compared to your JavaScript apps
  • Create personal portfolio website, a weather application, and a unit conversion website, and integrate your Elm apps with Rails 5
  • Boost the performance of your application with no runtime exceptions and JavaScript interoperability

Who This Book Is For

This book is for frontend web developers who want to learn a simpler way of developing their applications. A knowledge of the basics of CSS and Bootstrap is required.

What You Will Learn

  • Programming with the Elm language, its syntax and core concepts
  • Using Elm for front end web development projects
  • Developing complete websites with Elm
  • Decoding JSON into Elm
  • Integrating Elm with the standard front end web development technologies
  • Integrating Elm with back-end frameworks
  • Testing your applications in Elm

In Detail

Web development with JavaScript usually involves dealing with performance and maintenance issues. JavaScript fatigue makes it difficult for many developers to keep up with the increasing complexity posed by the multitude of JavaScript frameworks with changing versions, and the need to use different tools such as task runners, module bundlers, compilers, testing suites, linting and debuggers. Elm is an easy-to-learn, functional programming language that simplifies web development by eliminating the complexity associated with using JavaScript for web development. Elm is a statically typed language and thus makes a front end web developer's life easier by preventing run-time errors.

You will begin by seeing the bigger picture of where Elm fits into the web development world and learning the basics of Elm programming. Firstly, you will get a taste for web development with Elm by developing a simple fizz-buzz app. Next you will get hands-on with advanced Elm concepts as you develop your own personal blogging website, a unit conversion app and a weather app with Elm. Finally, you will also learn how to integrate Elm with a Rails 5 app with the help of Webpack. By the end of the book you will have learned Elm programming, and its applications, and will appreciate how Elm simplifies web development for you.

Style and approach

This book teaches the Elm language in a learning-by-doing approach through the implementation of five different web development projects.

Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Elm Web Development
  3. www.packtpub.com
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewers
    3. Packt is searching for authors like you
  5. Preface
    1. Why learn Elm?
    2. The goal of this book
    3. Who this book is for
    4. What this book covers
    5. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    6. Get in touch
      1. Reviews
  6. Why is This a Great Time to Learn Elm?
    1. What is Elm?
      1. Why is it worth learning Elm?
        1. Blazing-fast virtual DOM
        2. Friendly compile-time errors
        3. Zero runtime exceptions
        4. Constraints as guarantees
        5. Piped syntax
        6. Easy refactoring
        7. Helpful type system
        8. Increased productivity
      2. Getting started with writing Elm code
      3. Getting started fast with Ellie-app
        1. Adding type annotations
      4. Getting started fast with create-elm-app
      5. Getting started with Elm on Windows 10
        1. Installing apm (Atom Package Manager)
    2. Summary
  7. Building Your First Elm App
    1. Let's build an app
      1. Immutable data structures
      2. The Elm architecture
        1. The Model
        2. The View
        3. The Message
        4. The Update
      3. Unidirectional data flows
      4. Our app requirements
      5. Building the Fruit Counter app
        1. Exposing everything we need
        2. The Model
        3. The View
        4. The Message
        5. The Update
        6. Adding the beginnerProgram function
        7. Views, buttons, and events
        8. Constraining the Decrement message
    2. Values, expressions, data structures, and types in Elm
      1. Primitive types in Elm
        1. Char and String types
        2. The number type
        3. Booleans
      2. Data structures: lists, tuples, records, sets, arrays, and dictionaries
        1. Lists
        2. Tuples
        3. Records
        4. Sets
        5. Arrays
        6. Dictionaries
      3. Functions, if expressions, and types
      4. Revisiting Elm messages
      5. Functions, pattern matching, and case expressions
      6. Improving the Fruit Counter app
    3. Building a simple FizzBuzz app in Elm
    4. Summary
  8. Creating Your Personal Portfolio with Elm
    1. Creating our portfolio with elm-make-app
    2. Building a static single-page portfolio
      1. HTML for Elm
        1. Function signatures for HTML elements
        2. Function signature for text function
      2. Adding our view function
      3. Calling the view function from another file
      4. Adding some style
      5. Splitting the view into multiple files
      6. Completing our Writer's portfolio
      7. Rendering sections of our page using case expressions
    3. Improving our messages
    4. Adding the type alias of Model
    5. Working with List.map and List.filter
    6. Revisiting the FizzBuzz app
      1. Implementing FizzBuzz with List.map
    7. Summary
  9. Preparing a Unit Conversion Website in Elm
    1. What are we going to build?
    2. Building our Unit Conversion app
      1. Updating the init function
        1. Type annotations and type aliases
      2. Updating the view and update functions
      3. Adding the conversion logic
        1. Improving the input function
        2. The stumbling block
        3. Dealing with the Result.Result error
        4. Using the Result type to fix our app
        5. Calculating the conversion
        6. Refactoring our app using a let expression
      4. Making our app look nicer
        1. Adding Bootstrap styles
    3. Revisiting the FizzBuzz app
      1. Giving our FizzBuzz app some logic
    4. Summary
  10. Completing the Unit Conversion Website in Elm
    1. Improving the Unit Converter app
      1. Separating UnitConverter into a different module
    2. Adding type alias Model, initModel, and Main
      1. Updating the Main.view function
        1. Understanding Html.map
      2. Updating the Main.update function
      3. Learning from compiler error messages
    3. A Bootstrap-based HTML layout for our app
    4. Converting an HTML layout into an Elm view
    5. Adding the improved view to our functioning app
    6. Summary
  11. Exploring Elm in Greater Detail
    1. Destructuring values in Elm
      1. Destructuring tuples in Elm using let-in expressions
      2. Destructuring tuples in Elm using case-of expressions
      3. Building a FizzBuzz app using tuple destructuring inside of a case-of expression
      4. Destructuring nested tuples using let-in expressions
      5. Destructuring records in Elm using let-in expressions
      6. Destructuring records on the fly
    2. Dealing with randomness in Elm
      1. Commands in Elm
      2. Subscriptions in Elm
      3. Improving the Elm architecture by adding effects
    3. Understanding partial application
    4. Summary
  12. Making a Weather App in Elm
    1. Obtaining the weather data from a third-party API
    2. What are we going to build?
    3. Building our weather app
    4. Installing the HTTP package
    5. Adding all the imports
    6. Conceptualizing the model
    7. Setting up Msg union type
      1. Result and Maybe
        1. Working with Result
        2. Working with Maybe
        3. Result and Maybe with Defaults
    8. Updating the update function
      1. Decoders and encoders
        1. Decoding primitive values
        2. Decoding a JSON string returned from the API
        3. Decoding nested objects
      2. Adding getTemperature and decodeTemperatureInfo
    9. Updating the view
    10. Summary
  13. Adding More Features to the Weather App
    1. Importing Material and Round modules
    2. Adding elm-mdl to our Model
    3. Updating the init function
    4. Updating the Msg union type and the update function
    5. Updating the view function
      1. Understanding the Textfield function
      2. Understanding the Button function
      3. Understanding the Card function
        1. Understanding the use of Card.view
        2. Rendering the Card.title content block
        3. Understanding the Card.actions code
    6. Adding color schemes
    7. Updating decodeTemperatureInfo
    8. Summary
  14. Testing in Elm
    1. Introduction to Elm testing
      1. Understanding how testing works in Elm
        1. The describe function 
        2. The test and Expect functions
    2. Writing unit tests in Elm
      1. Using let-in expressions in our tests
      2. Decoding JSON in our tests
      3. Building custom expectations while decoding JSON
    3. Writing fuzz tests in Elm
      1. Working with more than one fuzzer
    4. Summary
  15. Integrating Elm with Rails
    1. Setting up a basic Rails 5.1.5 app using Codeanywhere
    2. Installing Ruby 2.5.0 and Rails 5.1.5 on Codeanywhere
    3. Creating a brand new Rails project
    4. Integrating Elm with Rails 5.1.5
    5. Adding our Elm weather app to our Rails app
    6. Summary
      1. Visit elmcasts.com
  16. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think