Book Image

Elm Web Development

By : Ajdin Imsirovic
Book Image

Elm Web Development

By: Ajdin Imsirovic

Overview of this book

<p>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.</p> <p>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.</p>
Table of Contents (16 chapters)
Title Page
www.packtpub.com
Contributors
Preface
Free Chapter
1
Why is This a Great Time to Learn Elm?
Index

Preface

Elm is a wonderful functional programming language for frontend web development. There are a number of reasons why learning Elm will be a useful and enjoyable experience.

Why learn Elm?

Elm is easy to get started with. The learning curve is not too steep. Elm does not introduce an overwhelming amount of new concepts to understand and learn; actually, it is quite the opposite. Once you learn the Elm way of doing things, with the focus on some key concepts of functional programming, there is not a huge number of new topics to understand.

It can be a great way into the more advanced concepts of functional programming. It's probably among the easier ways to start thinking in terms of the functional programming paradigm.

Even though is it easy to learn, the return on investment is pretty high; imagine all the time you will save not having to do JavaScript-style debugging! In the long run, this ROI compounds. The way that Elm achieves this is by having no runtime errors. All the errors are caught at compile time (so you can forget about things like undefined is not a function on a live project). Compile time is very fast. Also, Elm has one of the friendliest and most helpful compilers around.

If you are a bit tired of JavaScript and want to look at alternatives, you will most likely love Elm. Along the same lines, if you have had trouble trying to make up your mind about whether you should learn Angular, or React, or Vue, or any other JS framework, Elm is a viable alternative.

If you are learning React, understanding the Elm architecture will help you wrap your mind around Redux. An interesting bit of trivia: Redux was inspired by the Elm architecture.

If you already have some experience with JavaScript, it will give you a new perspective on it, and actually make you a better JavaScript developer. You can even use Elm and JavaScript together! Elm interops with JavaScript so you can use both languages side by side in your projects.

Elm is declarative. Scaling your Elm apps is actually a pleasant experience. Elm has a great community and excellent documentation.

The goal of this book

This book was written with the goal of introducing a complete beginner to the Elm language with some of its basic concepts and taking those concepts and building simple web apps in Elm from the get-go.

This book does not cover all the features of the Elm language, but rather gives you a solid foundation that you can build from.

One of the goals of this book was to make it easy for those who read it understand more advanced Elm apps and topics. Another goal of this book was to give you enough knowledge that you can confidently build your own apps in Elm once you complete it.

Who this book is for

This book is intended for web developers of all levels of expertise to use to understand the Elm language and build simple and practical web applications in it.

The beauty of the Elm language, among other things, is in the fact that you don't need to worry too much about HTML and CSS when you write it. So in this book, the focus is mostly on the Elm language itself. 

Familiarity with HTML, CSS, and the DOM, as well as how the web works, would be helpful, but is not necessary. Also, some experience with the Bootstrap framework and Material Design Language is welcome, but not compulsory.

This book was written with the goal of finding a sweet spot between giving enough knowledge so that readers can be productive as soon as possible, and being overwhelming. 

The book was also written with the idea that someone who is brand new to web development should find it easy to understand. Therefore, the book doesn't assume knowledge of JavaScript, nor does it extensively compare JavaScript with Elm, or if it does, it tries to limit this comparison to the level of broad generalizations.

In a sentence, this book is aimed at beginners and experienced developers alike, regardless of their level of knowledge of JavaScript.

What this book covers

Chapter 1, Why Is This a Great Time to Learn Elm?, covers introductory topics: what is Elm, what is unique about it, how it compares to JavaScript, how to get started with it, and some very basic Elm concepts with simple code snippets.

Chapter 2, Building Your First Elm App, describes immutable data structures, the Elm architecture (model, view, and update), unidirectional data flows, using HTML functions in Elm, expressions in Elm (if-else and case expressions), Elm data structures, union types, and some operators.

Chapter 3, Creating Your Personal Portfolio with Elm, discusses type aliases, mapping and filtering values, adding Bootstrap 4 styles to your Elm apps, understanding function signatures, and modularizing your Elm apps.

Chapter 4, Preparing a Unit Conversion Website in Elm, looks at using the Result type as a way to handle errors, and reinforces concepts covered in the previous chapters in a fun project.

Chapter 5, Completing the Unit Conversion Website in Elm, explains using Html.map, working with complex views and multiple models, and shows how to improve the existing Unit Conversion website.

Chapter 6, Exploring Elm in Greater Detail, covers the topic of destructuring values in Elm, the ways in which Elm deals with randomness (through commands and subscriptions), understanding partial application, and working with Html.program.

Chapter 7, Making a Weather App in Elm, shows how to deal with errors using Result, how to deal with optional values and nothingness using Maybe, how to decode JSON strings, how to fetch remote data with the Http package, and how to work with third-party APIs.

Chapter 8, Adding More Features to the Weather App, shows how to make our Elm apps look nicer by adding elm-mdl and how to work with the Round module, and reinforces topics covered in previous chapters.

Chapter 9, Testing in Elm, covers Elm unit testing and the role of the describe, Expect.equals, and test functions; it also deals with some specific operators and ways to use them in Elm tests, how to write tests for decoding JSON, and introduces fuzz tests.

Chapter 10, Integrating Elm with a Web Framework, shows how to integrate Elm apps in Rails 5.1 using the Webpacker and Yarn, as well as set everything up in a web-based IDE using an Ubuntu container.

To get the most out of this book

  1. To get the most out of this book, you should be familiar with HTML, CSS, the way the web works, Bootstrap 4, and MDL.
  2. Elm installation and setup are covered in Chapter 1, Why is This a Great Time to Learn Elm?, and will be updated in the code that comes with the book in the case of any changes, updates, or errata.

Download the example code files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packtpub.com.
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. Enter the name of the book in the Search box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

  • WinRAR/7-Zip for Windows
  • Zipeg/iZip/UnRarX for Mac
  • 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/Elm-Web-Development. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "At this time, you might start to appreciate the work that elm-format does for us."

A block of code is set as follows:

main : HTML Never
main =
    view

Any command-line input or output is written as follows:

[3,6,9] : List Int

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Upon compilation, the Ellie app will show the words User Experience in the right-hand preview pane."

Note

Warnings or important notes appear like this.

Note

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.