Learning Elm

I'd probably go with elm init IMO, as it suits my own learning style to learn from the ground up. elm init from what I remember is great, and'll pretty much set you up with a basic Elm app. There's none of the additional tooling (Webpack, Flow/Typescript, Babel, etc) that you get with JS-based projects, so it'll take you from 0 - 100 real quick

getUuid : String -> String
getUuid url =
    String.split "/" url |> List.reverse |> List.tail |> Maybe.withDefault [ "1" ] |> List.head |> Maybe.withDefault "1"

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)

viewBasePokemon : BasePokemon -> Html Msg
viewBasePokemon basePokemon =
    div
        [ style "border" "solid #ddd 1px"
        , style "margin" "4px"
        , style "padding" "8px"
        , style "display" "flex"
        , style "flex-direction" "column"
        ]
        [ span
            [ style "text-align" "center"
            , style "text-transform" "capitalize"
            ]
            [ text basePokemon.name ]
        , img
            [ src (pokemonSpriteUrl basePokemon.uuid)
            , style "align-self" "center"
            ]
            []
        ]

Task.map2 : (a -> b -> result) -> Task x a -> Task x b -> Task x result

Task.map2 :
    (a -> b -> result)  --- argument 1
    -> Task x a         --- argument 2
    -> Task x b         --- argument 3
    -> Task x result    --- return value

resolve successfully with an a value or unsuccessfully with and x value.

• - splitting code into separate files
• - moving reusable view html into "Component" files
• - split reused helper functions into some kind of helper library
• - sort out my file structure before I have a real mess on my hands

• - Line count doesn't matter in elm
• - Split files around data structures

  • - could evolution be a separate file as it seems to be a separate data structure?
• - only expose what is needed from a module as a public api

  • - "Reduce Public API: If implementation is hidden and if the public API works, the code works everywhere"
• - Don't overdo it

  • - "Wait until you have a problem in practice, and then solve that problem", eg "How do I make this sidebar reusable? Why do you need a reusable sidebar?"

• - split large views in to helper functions to organise them better, I've done this regularly with React while making components
• - rename modules to help organise your files and help them make more sense

• - solve one problem at a time
• - use the simplest api that works
• - reduce the types as much as possible

1. - Do you split out reused components (stateless functional ones) like in React? Where would you put them?
2. - When providing default/fallback data types is it better to use constructors or define the record? Is there a performance benefit to either?
3. - Where would you put reused helper functions?
4. - What kind of file structure would you use?

type alias Pokemon =
    { name : String
    , id : Int
    }

View.pokemon : Pokemon -> Html msg
View.pokemon pokemon =
    div []
        [ text (String.fromInt pokemon.id ++ ": " ++ pokemon.name) ]

View.pokemon : Int -> String -> Html msg
View.pokemon id name =
    div []
        [ text (String.fromInt id ++ ": " ++ name) ]

1. - Homepage/Pokedex/Pokemon Directory
2. - Pokemon Page
3. - Pokemon Types Directory
4. - Pokemon Type Page

fetchRouteData model route =
    case route of
        Route.Pokedex ->
            if RemoteData.isNotAsked model.pokedex then
                Pokedex.fetch |> Cmd.map PokedexFetchResponse

            else
                Cmd.none

pokemon : String -> Int -> Styled.Html msg
pokemon name id =
    Styled.a
        [ css
            [ display block
            , margin (px 8)
            , width (px 120)
            , height (px 160)
            , borderRadius (px 3)
            , boxShadow5 (px 0) (px 1) (px 3) (px 1) (rgba 60 64 67 0.16)
            , paddingTop (px 16)
            , textDecoration none
            , textTransform capitalize
            , color (hex "#000000")
            , textAlign center
            , backgroundImage (url (pokemonImageSrc id))
            , backgroundPosition center
            , backgroundRepeat noRepeat
            , hover
                [ boxShadow5 (px 0) (px 2) (px 8) (px 4) (rgba 60 64 67 0.1)
                , backgroundImage (url (shinyImageSrc id))
                ]
            , transition
                [ Css.Transitions.boxShadow3 135 0 (Css.Transitions.cubicBezier 0.4 0 0.2 1)
                , Css.Transitions.background3 135 0 (Css.Transitions.cubicBezier 0.4 0 0.2 1)
                ]
            ]
        , Route.styledHref (Route.Pokemon (String.fromInt id))
        ]
        [ Styled.span
            [ css
                [ display block
                , backgroundColor (hex "#f1f1f1")
                , padding2 (px 4) (px 0)
                ]
            ]
            [ Styled.text name ]
        ]

viewDamageRelation : String -> BaseTypes -> Styled.Html msg
viewDamageRelation sectionTitle pokemonTypes =
    case List.isEmpty pokemonTypes of
        True ->
            Styled.div [] []

        False ->
            Styled.div
                [ css
                    [ margin (px 4)
                    , width (px 250)
                    , padding3 (px 0) (px 20) (px 16)
                    , border3 (px 1) solid (hex "#dedede")
                    ]
                ]
                [ Styled.h4
                    [ css
                        [ textTransform capitalize
                        , textAlign center
                        ]
                    ]
                    [ Styled.text sectionTitle ]
                , Styled.div
                    [ css
                        [ displayFlex
                        , flexDirection column
                        , alignItems center
                        ]
                    ]
                    (List.map (\pokemonType -> View.pokemonType pokemonType.name) pokemonTypes)
                ]

init : a -> Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url navKey =
    let
        route =
            Route.fromUrl url

        model =
            { key = navKey
            , route = route
            , pokedex = RemoteData.Loading
            , pokemon = Pokemon.init
            , pokemonTypes = RemoteData.Loading
            , pokemonType = PokemonType.init
            , query = ""
            }

        cmd =
            Cmd.batch
                [ fetchRouteData model route
                , Pokedex.fetch |> Cmd.map PokedexFetchResponse
                ]
    in
    ( model, cmd )

type alias EvolutionChain =
    { name : String
    , id : Int
    , evolutionChain : Evolutions
    }


type Evolutions
    = Evolutions (List EvolutionChain)

-- exposing from the module
module Model exposing (EvolutionChain)

-- importing for use elsewhere
import Model exposing (EvolutionChain)

-- exposing from the module
module Model exposing (Evolutions(..))

-- importing for use elsewhere
import Model exposing (Evolutions(..))

type alias Base =
    { name : String
    , id : Int
    }