Pretty Nice Framework is a pure functional, type-safe, full stack web development solution for Gren. It enables seamless integration of interactive client-side components with server-side code, eliminating concerns over loading states or data fetching errors. Dive into its documentation, examples, and community support to start building robust applications that just work.
The Pretty Nice Framework is a full-stack web framework for Gren. This framework emphasizes type safety and allows for interactive client-side components that are seamlessly initialized using server-side data, reducing complexity in application development, especially around loading states and data fetching errors.
Developers can explore the framework in detail via the following resources:
If you have node installed, you can initialize a new project like this:
mkdir mysite && cd mysite
npx prettynice init
This will start you off with a program to define your server and routing logic. Here’s an example:
-- server/src/Main.gren
module Main exposing (main)
import Node exposing (Environment)
import Prettynice
import Prettynice.Request exposing (Request)
import Prettynice.Response as Response exposing (Response)
import Task exposing (Task)
main : Prettynice.Program Model {}
main =
Prettynice.defineProgram
{ init = init
, router = router
}
type alias Model = {}
init : Environment -> Prettynice.Init Model {}
init env =
Prettynice.startProgram
{ env = env
, host = "127.0.0.1"
, port_ = 3000
, model = {}
}
router : Model -> Request -> Response msg -> Task Never (Response msg)
router model request response =
response
|> Response.asText "Hello!"
|> Task.succeed
and an example client-side component that follows The Elm Architecture:
-- client/src/Components/Counter.gren
module Components.Counter exposing (component, Model, Msg, Props)
import Prettynice.Component exposing (Component)
import Transmutable.Html exposing (..)
import Transmutable.Html.Events exposing (..)
component : Component Props Model Msg
component =
{ init = init
, update = update
, view = view
, subscriptions = subscriptions
}
-- Model holds component state
type alias Model =
{ count : Int }
-- Props define the arguments passed into your component
type alias Props =
{ start : Int }
-- This can be called server-side to initialize your component with Props from the server
init : Props -> { model : Model, command : Cmd Msg }
init props =
{ model = { count = props.start }
, command = Cmd.none
}
A helpful API is available for handling data from Forms. View an example to see how to collect user inputs and return responses.
The Pretty Nice Framework is compatible with various hosting environments that support Node.js, with recommendations for services like Fly.io and Render. Deployment is streamlined by generating production builds and running optimized applications with minimal setup.
For additional insights, features, and updates, connect via Discord or follow the development channel on #prettynice. Please check the project repo or official website for comprehensive information. You can also follow the author on mastodon.
No comments yet.
Sign in to be the first to comment.