Indeed, I am functional frontend code, one might say, functional frontend code as it should've been

eeue56

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th>Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
</table>

(print "Hello, World!")

(lambda (arg) (+ arg 1))

(defun foo (a b c d) (+ a b c d))

public class HelloWorld {
	public static void main(string[] args) {
		System.out.println("I can see why people preferred Javascript");
	}
}

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

<html ng-app="phonecatApp">
<head>
  ...
  <script src="lib/angular/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="PhoneListController">

  <ul>
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
    </li>
  </ul>

</body>
</html>

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
  $scope.phones = [
    {
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.'
    }, {
      name: 'Motorola XOOM™ with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    }, {
      name: 'MOTOROLA XOOM™',
      snippet: 'The Next, Next Generation tablet.'
    }
  ];
});

import React from 'react';
import ReactDOM from 'react-dom/client';

const Greeting = () => {
    return (
        <div className="hello-world">
            <h1>Hello, world!</h1>
        </div>
    );
};

const App = () => {
    return <Greeting />;
};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

square = rect 130 130 (70,70)
circle = oval 110 110 (70,70)
pentagon = ngon 5 45 (70,70)
main = collage 140 140
  [ filled green pentagon
  , outlined black square
  , customOutline [8,4] blue circle
  ]

update key index =
    case key of { Just ‘f’ -> index + 1
    ; Just ‘b’ -> index - 1
    ; _ -> index }
    
index = foldp update 0 Keyboard.keyPress

pics = [ "church.jpg", "godel.jpg", "turing.jpg" ]

display i = image $ ith (i `mod` length pics) pics

main = lift display index

type alias Model =
	{ count: Int }

initialModel: Model 
initialModel =
	{ count: 0 }
    
type Msg = Increment | Decrement

update: Msg -> Model -> Model
update msg model =
	case msg of 
            Increment -> { model | count = model.count + 1 }
            Decrement -> { model | count = model.count - 1 }
        
view: Model -> Html Msg
view model = 
	div 
            []
            [ button [ onClick Decrement ] [ text "-" ]
            , text model.count 
            , button [ onClick Increment ] [ text "+" ]
            ]
        
main: Program Msg Model
main =
	program { initialModel = initialModel, update = update, view = view }

function getName(user) {
 return `${user.title} ${user.firstName} ${user.lastName}`;
}

update : Action -> Model -> (Model, Effects Action)

routeIncoming : Connection -> Model -> (Model, Effects Action)

{-| route each request/response pair and write a response
-}
routeIncoming : Connection -> Model -> ( Model, Effects Action )
routeIncoming ( req, res ) model =
    case req.method of
        GET ->
            routeGet ( req, res ) model

        POST ->
            routePost ( req, res ) model

        NOOP ->
            model => Effects.none

        _ ->
            model
                => (writeJson (Json.string "unknown method!") res
                        |> runRoute
                   )

type alias Operation a b =
    a -> Client -> Task String b


type alias UpdateOperation a b =
    a -> b -> Client -> Task String ()
    
{-| Get users from the database
-}
getUsers : Operation a (List User)
getUsers user database =
    Database.find user database
    
{-| Update a user
-}
updateUser : Database.UpdateOperation a User
updateUser oldUser newUser database =
    Database.update oldUser newUser database

module Bootstrapper exposing (..)

{-|
  This is a very naughty module indeed.
  Swap out the two arguments to bootstrap with the name of your module
  and the name of the output file.
  That output file will then be ran whenever you call this script.
  This script is also self-bootstrapping, simply run node on it and it will
  handle the rest.
-}

import Native.Bootstrapper

bootstrap : String -> String -> ()
bootstrap =
    Native.Bootstrapper.bootstrap

port run : ()
port run =
    bootstrap "instance/server/Main" "instance/server/main.js"

{-| Load a config from a json file
This will die at compile time if the file is missing
-}
myConfig : SiteConfig
myConfig =
    loadConfig "./config/config.json"


{-| Grab properties from ENV for use in our model
-}
envToModel : Env -> Model
envToModel env =
    { key =
        Dict.get myConfig.accessKey env ? ""
    , secret =
        Dict.get myConfig.secret env ? ""
    , bucket =
        Dict.get myConfig.bucket env ? ""
    , baseUrl =
        Dict.get myConfig.baseUrl env ? ""
    }

module Client.Admin.Styles (..) where

import Client.Styles exposing (..)
import Css exposing (..)
import Css.Elements exposing (ul)


css : String
css =
    getCss
        [ ul
            [ backgroundColor colors.white
            , boxSizing borderBox
            , padding (px 12)
            ]
        , (.) TestInProgress
            [ backgroundColor colors.turquoise
            ]
        , (.) TestFinishedInTime
            [ backgroundColor colors.green
            ]
        , (.) TestFinishedLate
            [ backgroundColor colors.purple
            ]
        , (.) TestNotTaken
            [ backgroundColor colors.white
            ]
        ]

{-| Route any `GET` requests
-}
routeGet : Connection -> Model -> ( Model, Effects Action )
routeGet ( req, res ) model =
    let
        runRouteWithErrorHandler =
            (handleError res) >> runRoute

        url =
            req.url
    in
        if url == routes.index then
            model
                => (writeNode (signUpForTakeHomeView model.testConfig) res
                        |> runRouteWithErrorHandler
                   )
        else
        	...

module Shared.User exposing (..)

type alias User =
    { token : String
    , name : String
    , email : String
    , applicationId : Int
    , candidateId : Int
    , role : String
    , jobTitle : String
    , startTime : Maybe Moment
    , endTime : Maybe Moment
    , submissionLocation : Maybe String
    , test : Maybe TestEntry
    }
    
hasFinishedTest : User -> Bool
hasFinishedTest user =
    case user.endTime of
        Nothing ->
            False

        _ ->
            True

config: Model
config =
    loadObject "TelateProps"
        |> Maybe.withDefault
            { user = emptyUser
            , test = emptyTestEntry
            , currentTime = Moment.getCurrent ()
            }

app : App Model Action
app =
    start
        { init = ( config, Effects.none )
        , update = update
        , inputs = [ eachSecond ]
        }

Introducing: Derw

import "./String" as String

type alias Person = {
    name: string,
    age: number
}

sayHi: Person -> string
sayHi person =
    "Hello, " + person.name

type Animal =
    Dog { name: string }
    | Cat { lives: number }

sayHiToAnimal: Animal -> string
sayHiToAnimal animal =
    case animal of
        Dog { name } -> "Who is a good boy? " + name + " is!"
        Cat { lives } -> "You have " + (String.fromNumber lives) + " lives remaining"

type alias Model = {
    count: number
}

initialModel: Model
initialModel =
    { count: 0 }

type Msg =
    Increment
    | Decrement

update: Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            { ...model, count: model.count + 1 }

        Decrement ->
            { ...model, count: model.count - 1 }

view: Model -> HtmlNode Msg
view model =
    div [ ] [ ] [
        button [ onClick (\_ -> Decrement) ] [ ] [ text "-" ],
        text model.count,
        button [ onClick (\_ -> Increment) ] [ ] [ text "+" ]
    ]

root: any
root =
    document.getElementById "root"

main: RunningProgram Msg Model
main =
    program {
        root: root,
        initialModel: initialModel,
        update: update,
        view: view
    }

type Animal =
    Dog
    | Cat

sayHi is a function with the arguments:
    animalName with the type string
sayHi returns a value of the type Animal
sayHi is defined as: 
    if animalName is equal to "Rufus" then
        Dog
    else
        Cat

type Animal = Dog | Cat

sayHi: string -> Animal
sayHi animalName =
    if animalName == "Rufus" then 
        Dog
    else     
        Cat

type Dog = {
    kind: "Dog";
};

function Dog(args: {}): Dog {
    return {
        kind: "Dog",
        ...args,
    };
}

type Cat = {
    kind: "Cat";
};

function Cat(args: {}): Cat {
    return {
        kind: "Cat",
        ...args,
    };
}

type Animal = Dog | Cat;

function sayHi(animalName: string): Animal {
    if (animalName === "Rufus") {
        return Dog({});
    } else {
        return Cat({});
    }
}

type Animal = Dog | Cat

sayHi: string -> Animal
sayHi animalName =
    if animalName == "Rufus" then 
        Dog
    else     
        Cat

derw format

derw test

derw install

derw bundle

derw init && derw template

derw compile

How do I format code?

How do I run tests ?

How do I install packages?

How do I produce bundles?

How do I start a project?

How do I compile code without bundling?

Gzipped size: 3.49kb

The future

- Non v-dom based library for smaller bundle sizes

- Self bootstrapping (50% done)

- Larger standard library

- Custom server-side wrapper

- Monadic effects

Links

https://twitter.com/derwlang

https://github.com/eeue56/derw

https://twitter.com/derwlang

https://aftenposten.substack.com/

https://derw.substack.com/

Indeed, I am functional frontend code, one might say, functional frontend code as it should've been

By Noah Hall

Indeed, I am functional frontend code, one might say, functional frontend code as it should've been

Indeed, I am functional frontend code, one might say, functional frontend code as it should've been

Indeed, I am functional frontend code, one might say, functional frontend code as it should've been

More from Noah Hall