Giter Club home page Giter Club logo

elm-tutorial's Introduction

This tutorial has not been updated to Elm 0.19. At the moment I have no plans to do so.

Logo

Elm Tutorial

A tutorial on developing single page web applications (SPAs) with Elm.

You can also download offline version here (PDF, ePub, Mobi).

Code

Code for the example application built in the second part of this tutorial can be found at https://github.com/sporto/elm-tutorial-app.

Contributing

Please open issues and send PRs at https://github.com/sporto/elm-tutorial.

Translations

  • French translation by Vincent Jousse @vjousse and Augustin Ragon @augustin82.
  • Japanese translation by UEHARA Junji @uehaj.
  • 中文(繁體) translation by Jih-Chi Lee @jihchi.
  • Korean translation by June Gil Seo @junegil.

Share on Twitter | Follow @sebasporto

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

© Sebastian Porto 2016

elm-tutorial's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

elm-tutorial's Issues

en vs en-v01

I began to translate your tutorial in Russian language.
Which version It is better suited for translate en or en-v01?

Change action -> msg

I find a handful of uses of the term action, sometime capitalized. It should be called msg instead.

[JP] Compilation error

The below line in View.elm causes compilation error (cycle dependency), so I think it should be removed 😃

File: elm-tutorial/jp/04-starting/07-multiple-modules.md

src / View.elm

import View exposing (view)

List of Maybe, not

I don't agree that using a List over Maybe is a good idea. A better approach is to use Maybe.map, like:

Like so:

import Html exposing (..)

findItem id items =
    List.filter (\item -> item.id == id) items
        |> List.head

main =
  Maybe.map .id (findItem 2 [{id = 1}, {id = 2}])
    |> toString
    |> text

RemoteData reference

Not sure if you want to explicitly tell people to put the RemoteData reference in, on book page Views under Fetching chapter, or whether by this point you want to start to expect people to work it out.

Tutorial code does not yet reflect a change to View.elm

Pull request #122 0.18 collapsed Html.App into Html so Html.App.map became Html.map.

This change is reflected in the code repo but not two places in the tutorial text for View.elm

page : Model -> Html Msg
page model =
    case model.route of
        PlayersRoute ->
            Html.App.map PlayersMsg (Players.List.view model.players)

        PlayerRoute id ->
            playerEditPage model id

        NotFoundRoute ->
            notFoundView

Cannot download pdf

When I try and download the PDF or EPUB documents, I get the following error:

500
Server Error
Cannot find module 'html'
GitBook.com Status • Documentation • Contact Support

Suggestion : Update Player Commands example to use Json.Decode.Pipeline

Hi! I'm currently going through this tutorial! Thanks it's amazing! :)
I would have a suggestion to update the players command section to use the Json.Decode.Pipeline library instead of Decode.map3. (http://package.elm-lang.org/packages/NoRedInk/elm-decode-pipeline/latest)

I also found the import Json.Decode as Decode a bit confusing in the type declarations afterwards e.g. Decode.Decoder (List Player)

I find it more straightfowared to do something like import Json.Decode exposing (Decoder) and then Decoder (List Player)

I could submit a PR for these changes if you agree!

Again thanks for the awesome tutorial!

More on Signal.forwardTo

First of all, I'd just like to say that elm-tutorial is an absolutely amazing resource for learning Elm. Haven't found any other tutorials that come close to it!

On section 3.8 Composing, I think a little more should be added about Signal.forwardTo (there's currently only one sentence). Seems there have been a few of people confused about forwardTo so I think it should be expanded on. Max Goldstein says "You're not alone. Signal.forwardTo is, in my opinion, the hardest function to understand in the entire standard library".

https://groups.google.com/d/msg/elm-discuss/qCs0_7ZsIsE/0h8gR8vKDAAJ

https://www.reddit.com/r/elm/comments/3ntbiq/how_does_signalforwardto_work/

Msgs causes compile fail

on the page - Multiple modules

lines like
import Messages exposing (Msg)

need to be updated to
import Msgs exposing (Msg)

for those of cutting and pasting from the page to be able to build

Awesome

You're tutorial is awesome. Straight to the point, clear and accessible.

Thanks a lot for making it!

Incorrect description in 1.5: Union Types/ Type variables?

In the Type variables section of the Union Types page, you say:

In here we are saying the the a stand-in should be of type String.


shouldn't this be:

In here we are saying the a stand-in should be of type Int.

Or, change the signature of respond to:

respond: Answer String -> String

Elaboration on Mailboxes use of address

I was following along on the Mailbox example and understand much of what is explained, except when you describe the final code sample.

You did not get into much detail about the usage of mb. Specifically, I am confused on accessing mb.address and mb.signal. I am trying to break the mind frame of OOD, but this looks vaguely similar.

Could you elaborate on the main and view section? It combines many different concepts into one quiet quickly.

Thanks for the tutorial. Very helpful so far.

Elm-tutorial for offline reading

It would be great and handy for elm-tutorial to be able to clone elm-tutorial and run locally for offline reading. Is this possible?

Section 11.5 - Can't compile when actions are not account for in Players Update

Seciotn 11.5 - Can't compile when :
| DeletePlayer PlayerId
| DeletePlayerDone PlayerId (Result Http.Error ())
is not accounted for in the Players Update.

I just commented them out to get it to work, but maybe introduce them later when they are needed.

The tutorial is great and simple until it gets to Tasks and Effects, then it is way too complicated. I had to spend sometime in other resources to get more up to speed on it. But now I understand them enough to get through the tutorial.

I still don't have a handle on it without StartApp, loving those diagrams that show the flow though.
I'm going to go back and look at that scenario and see if I can figure it out.

If you could flesh out the beginner sections and maybe rearrange some of the explanations (since some of them happen after the first time we see it, by then I either got stuck or understood it already), it would be great!

Thanks for the tutorial!

Missing syntax highlighting

I have notice that some code blocks doesn't have the syntax highlighting feature, is this intentional or do you think it should be resolve?

Example: 05-union-types.md

I can help you with that if you want me to.

Hop v4.0

Hello and thank you so much for the tutorial!

Can you update the code to use Hop version 4 (I see the current version is 4.0.3)?

I am trying to use it through the tutorial and since it requires to pass Config to navigateTo, I had moved the routerConfig into separate file along with type Route and PathMatchers declarations, so I would not have circular imports.

Thank you.

Routing chapter does not compile

In the View section,

the function page causes a type mismatch

page : Model -> Html Msg
page model =
    case model.route of
        Models.PlayersRoute ->
            Players.List.view model.players

        Models.PlayerRoute id ->
            playerEditPage model id

        Models.NotFoundRoute ->
            notFoundView

where model.players is webData (List Player)

but Players.List.view expects List Player as its argument.

Clarify union types

I'm not sure if I'm missing something obvious, but the section on Union types starts mentioning Yes and No, and keeps dragging it through all examples without ever explaining what this could be.

Having never written anything in Elm myself and this being my first time going though the tutorial, I cannot imagine what would type Yes and No be.

I understand the basic idea about union types, but the concrete example looks like it could use some improving.

The font in .pdf version

Can you increase the font size in the .pdf version? Now it's too small, uncomfortable to read.

1

Needs License

Would be nice if this book specified a license, for example, one of the Creative Commons licenses.

how to pass Message from child module to parent module in Elm architecture?

Hi folks, i don't know whether it's the right place, but i'll take the chance because you talk about the Elm Architecture.
So, it's all in the title. To illustrate my case, i'll use a case study.
Imagine you've got a child module whose UI is a text input, enriched with various things. As I enter text its model is updated. This child's model is held into the parent model.
you might tell me that from the parent's perspective, you just have to listen to the child's model and get anything you need out. Ok, but now, let's say you want a "enter" key stroke to notify that this word must be "sent" to its parent ... ok, you might suggest adding a bool knowing when i can use the proper input from the parent's perspective...
But now, the concept of Message (passing) is being replaced by data + bools ... not good at all.
So, here is the question : how to pass message from Child module to Parent module?
does the Elm architecture fit that way of building softwares ?

Thanks for your answer

Introducing `Cmd` explicitly

Hi, thanks for the Tutorial, very useful.
For calibrating this "issue": I'm new to Elm with a strong Haskell background.

One thing I found disturbing is that Cmd felt magical. Elm seems very explicit about imports and Cmd is in scope without import. I suggest to add a short paragraph about what Cmd is and how it comes into scope in 02-elm-arch/02-structure.html -- right when Cmd is used. Presently, Cmd.none is given out w/o much explanation (or I missed a section). Maybe the application flow diagram could be usefully brought at this point. Another way to address this is to stress what consumes the Cmd when commenting the type of update : Msg -> Model -> ( Model, Cmd Msg ) .

In "More on functions" section type variable case?

I'm new to Elm, but I think that type variables are denoted by any lowercase identifier in the function signature. If this is the case, I think it should be mentioned in that section. If it's not true, then what is the syntax for specifying a type variable?

hello world compiles with warning

With Elm 0.17.1 on Windows 10 using Brackets the hello world program in the tutorial compiles with the warning:

`missing type annotation
Top-level value 'main' does not have a type annotation.
I inferred the type annotation so you can copy it into your code:

main: Html.Html a

Successfully generated index.html`

It's just a warning though. The message "Hello" can be seen in the browser.

Tips and Tricks chapter heading is not clickable

context elm tutorial 2016-11-17 12-00-03

The rest of the chapter headings are clickable to jump straight to them. Additionally, "Improvements" does not have an arrow on the right side of the screen to jump to the next section. I suspect the "Tips and Tricks" needs an intro page of its own. I'll poke at this later if you'll accept a PR.

Add section on types

The Foundations: Functions section makes a lot of references to types and assumptions about the reader's knowledge of types. A short section before this point would be appropriate to introduce types and the types available within elm.

Could not find command `package`

On the first step of the first page in which I'm supposed to type stuff in from,
https://www.elm-tutorial.org/en/01-foundations/01-hello.html
the first thing I type fails:

elm package install elm-lang/html

This gives me this error message:

Could not find command `package`. Maybe there is a typo?

Default commands include:

  make      Compile an Elm file or project into JS or HTML
  package   Manage packages from <http://package.elm-lang.org>
  reactor   Develop with compile-on-refresh and time-travel debugging
  repl      A REPL for running individual expressions

When you try to run the command `package` we actually search for an
  executable named elm-package. Are you able to run elm-package?
  Is it on your PATH?

There is no explanation for what to do when I get such an error. Should I continue learning?

[clarification] about topic

in this topic I can't understand the following:

these functions:

updatePlayer : Player -> List Player -> List Player
updatePlayer updatedPlayer =
    let
        select existingPlayer =
            if existingPlayer.id == updatedPlayer.id then
                updatedPlayer
            else
                existingPlayer
    in
        List.map select

and

changeLevelCommands : PlayerId -> Int -> List Player -> List (Cmd Msg)
changeLevelCommands playerId howMuch =
    let
        cmdForPlayer existingPlayer =
            if existingPlayer.id == playerId then
                save { existingPlayer | level = existingPlayer.level + howMuch }
            else
                Cmd.none
    in
        List.map cmdForPlayer

we've got annotations for them

updatePlayer : Player -> List Player -> List Player
changeLevelCommands : PlayerId -> Int -> List Player -> List (Cmd Msg)

but they receives

updatePlayer updatedPlayer = ...
changeLevelCommands playerId howMuch = ...

Where List Player comes from?

Missing package install instructions

After spending last night reading through the tutorial and playing with the online editor, I finally took the plunge and installed elm-platform and started playing around. I was pretty stumped when my Hello.elm crashed with a missing package error.

The Hello world example mentions the Html module being a part of core, which doesn't seem to be the case. Rather it is a separate package that needs to be installed using elm-package.

(The assets repo has an elm-package.json with a few deps listed, including elm-html.)

Did I make a mistake or is indeed the mishap in the tutorial? I'll be happy to send a patch to the Hello world -and other parts- as I garner valuable experience going through while actually doing the exercises, as long as it's not just another PEBKAC.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.