Funksjonell programmering på web

Presentasjon om: "Funksjonell programmering på web"— Utskrift av presentasjonen:

1 Funksjonell programmering på web
Elm Funksjonell programmering på web

2 Bouvet Agder Uavhengige rådgivningstjenester – uten teknologileverandører på eiersiden 28 konsulenter som jobber med Virksomhetsarkitektur Informasjonsarkitektur Systemarkitektur Tjenestedesign BI og datavarehus løsninger Brukeropplevelser og interaksjonsdesign Systemutvikling Integrasjon/mellomvare løsninger IT Sikkerhet Anskaffelser Prosjekt- og testledelse

3 Elm Funksjonelt programmeringsspråk – ML familien – Haskell / F#
Kompilerer til Javascript Skapt av Evan Czaplicki

4 Elm Funksjonell programmering – Deklarativ programmering
Statisk typing – Dynamisk typing Kompilerer til Javascript «Rene» funksjoner Ingen «side» effekter Ingen «foranderlige» data Ingen kjøretids-feil Virtuell DOM Utrolig hjelpsom kompilator! Optimalisert for enkelthet, lett å komme i gang Bra ytelse

5 Funksjoner og typebeskrivelse
sub : number -> number -> number sub x y = x - y --Funksjoner i Elm tar bare ett argument! (Currying) beregnAlder = sub function> : number -> number beregnAlder : number

6 Funksjoner - komposisjon
Html.text (String.repeat 3 (String.toUpper «WebDev ! ") Html.text <| String.repeat 3 <| String.toUpper "WebDev ! " "WebDev !" |> String.toUpper |> String.repeat 3 |> Html.text

7 Data strukturer Tuples Records ("Ola", 1982)
fst ("Ola", 1982) -- "elm" snd ("Ola", 1982) -- 42 Records person = { navn = “Ola" , year = 1982 } { person | navn = "Petter" }

8 Data strukturer - Union types
Type Msg = | ClearFilters | Fetch | FetchSucceed (NDCVideoInfo) | FetchFail Http.Error Type Direction Left Right Left distanse Right distanse

9 Type aliases type alias Person = { name : String , year : Int } createPerson : String -> Int -> Person createPerson inputName inputYear = { name = inputName , year = inputYear

10 Maybe – Null eksisterer ikke
type Maybe a = Just a | Nothing x = Just “En streng”-- Just 0.0 : Maybe.Maybe String y = Nothing -- Nothing : Maybe.Maybe a

11 Data strukturer - lister
-- Alle elementer må være av samme type. ["the", "quick", "brown", "fox"] list = [1, 2, 3, 4] listFromRange = [1..4] listByAppending = [1, 2] ++ [3, 4] listByPrepending = 1 :: 2 :: 3 :: 4 :: [] -- Alle klassiske metoder er tilgjengelige List.map (\ n -> n + 1) list -- [2,3,4,5] List.filter (\ n -> n > 2) list --[3,4]

12 Lister – map – filter – reduce(fold)
sub x y = x - y beregnAlder = sub 2016 beregnAlder 1980 personer = [("Per", 1980), ("Ola", 1950), ("Nils", 1970), ("Kari", 1995)] personer |> List.map snd |> List.map beregnAlder |> List.filter (\alder -> alder > 35) |> List.sum

13 Conditionals If age > 20 then True else False gender = case model.gender of Just Male -> "Mann" Just Female -> "Kvinne" Nothing -> "Kjønn ikke valgt enda"

14 Hvorfor bør du begynne med Elm?

15 Historikk – websider med mye javascript / SPA
Jquery BackboneJS, KnockoutJS, AngularJS ++ React Problem: Håndtere endring av «state» React + Flux React + Redux

16 Redux All state lagres kun ett sted State kan kun leses
Endringer av state gjøres med «rene» funksjoner

17 Elm sin «verden» «Verden» utenfor Elm «Elm arkitektur»
Model View Messages Update «Elm arkitektur» Elm bruker virtual DOM, som i React Alle views er en funksjon av state State blir kun oppdatert i «Update» «Update» trigges kun av «Messages» «Verden» utenfor Elm Commands Tasks Ports Subscriptions

18 Lånt fra http://unsoundscapes
6. juli 2016 Bunntekst – endres/slettes med "Sett inn, Topptekst og bunntekst"

19 Elm platform - vertøy Editor plugins – VS Code, Atom, Sublime ++
Elm-make – kompilere til javascript Elm-reactor – Interaktiv utvikling Elm-package - REPL – kjør Elm i kommandolinje

20 Semantisk versjonering
Basert på typesystemet så klarer Elm å detektere «graden» av semantisk versjonering. Veldig nyttig for alle pakker/3.parts bibliotek

21 Fordeler og ulemper Fordeler Ulemper Mer solid enn javascript
Utrolig bra og hjelpsom kompilator Mye lettere og sikrere refactoring Hvis det kompilerer så «funker» det Færre feil (ingen kjøretidsfeil) Gøy med funksjonell programmering En veldig bra inngangsport til funksjonell programmering Ulemper Større økosystem innen javascript Javascript integrasjon kun via ports Relativt nytt, må være villig til å lage «byggeklosser» selv Kun for web – inntil videre

22 Elm-mdl Elm implementasjon av Material Design Lite – MDL
MDL = CSS + Javascript Elm-mdl = CSS + Elm

23 Alternativer PureScript (Haskell) Bucklescript (Reason/Ocaml)
Fable (F#) Javascript – med Immutable.js, Rambda.js

24 Finne ut mer? http://elm-lang.org http://elm-lang.org/try
- Beste ressurs for å forstå FP konsepter - Elm Slack Interessert i å lære mer om Elm? Ta kontakt @hakonrossebo