Mireille  Von

Mireille Von

1661980200

Ashen: A Framework for Writing Terminal Applications in Swift

Ashen

A framework for writing terminal applications in Swift. Based on The Elm Architecture.

As a tutorial of Ashen, let's consider an application that fetches some todo items and renders them as a list.

Example

Old way

In a traditional controller/view pattern, views are created during initialization, and updated later as needed with your application data. Loading data from a server to load a list of views. Views are stored in instance variables and edited "in place", and the views/subviews are added/removed as events happen, so a lot of code is there to manage view state.

New way

What would this look like using Ashen or Elm or React? In these frameworks, rendering output is declarative; it is based the model, and you render all the views and their properties based on that state. Model goes in, View comes out.

func render(model: Model) -> View<Message> {
    guard
        let data = model.data
    else {
        // no data?  Show the spinner.
        return Spinner()
    }

    return Stack(.topToBottom, [
        Text("List of things"),
        ListView(dataList: data) { row in
            LabelView(text: row.title)
        }
        // πŸ‘† this view is similar to how UITableView renders cells - only
        // the rows that are visible will be rendered. rowHeight can also be
        // assigned a function, btw, to support dynamic heights.
        //
        // Also, this view is not done yet! Sorry - but it'll look something
        // like this.
    ])
}

So instead of mutating the isHidden property of views, or addSubview, we just render the views we need based on our model. SwiftUI has also adopted this model, so if you've been using it, Ashen will feel very familiar.

Commands and Messages

To fetch our data, we need to call out to the runtime to ask it to perform a background task, aka a Command, and then report the results back as a Message. Message is how your Components can tell your application about changes that might result in a change to your model. For instance, if someone types in a "name" text field you probably want to know about that so you can update the model's name property.

Sources of Messages include Views, Commands, and system event components (e.g. a KeyEvent message can be captured via the OnKeyPress component, which receives system-level events and maps those into an instance of your app's Message type).

Our application starts at the initial() method. We return our initial model and a command to run. We will return an Http command:

enum Message {
    case received(Result<(Int, Headers, Data), HttpError>)
}

func initial() -> Initial<Model, Message> {
    let url = URL(string: "http://example.com")!
    let cmd = Http.get(url) { result in
      Message.received(result)
    }

    return Initial(Model(), cmd)
}

When the Http request succeeds (or fails) the result will be turned into an instance of your application's Message type (usually an enum), and passed to the update() function that you provide.

To send multiple commands, group them with Command.list([cmd1, cmd2, ...])

Updating

In your application's update() function, you will instruct the runtime how the message affects your state. Your options are:

  • .noChange β€” ignore the message
  • .update(model, command) β€” return a model and a list of Commands to run
  • .quit β€” graceful exit (usually means exit with status 0)
  • .quitAnd({ ... })β€” graceful exit with a closure that runs just before the runtime is done cleaning up. You can also throw an error in that closure.

For convenience there are two helper "types":

  • .model(model) β€” return just updated model, no commands (shortcut for .update(model, Command.none()))
  • .error(error) β€” quit and raise an error.

Program

Here's a skeleton program template:

// This is usually an enum, but it can be any type.  Your app will respond
// to state changes by accepting a `Message` and returning a modified
// `Model`.
enum Message {
    case quit
}

// The entired state of you program will be stored here, so a struct is the
// most common type.
struct Model {
}

// Return your initial model and commands. if your app requires
// initialization from an API (i.eg. a loading spinner), use a
// `loading/loaded/error` enum to represent the initial state.  If you
// persist your application to the database you could load that here, either
// synchronously or via a `Command`.
func initial() -> Initial<Model, Message> {
    Initial(Model())
}

// Ashen will call this method with the current model, and a message that
// you use to update your model.  This will result in a screen refresh, but
// it also means that your program is very easy to test; pass a model to
// this method along with the message you want to test, and check the values
// of the model.
//
// The return value also includes a list of "commands".  Commands are
// another form of event emitters, like Components, but they talk with
// external services, either asynchronously or synchronously.
func update(model: Model, message: Message)
    -> State<Model, Message>
{
    switch message {
    case .quit:
        return .quit
    }
}

// Finally the render() method is given your model and you return
// an array of views. Why an array? I optimized for the common case: some key
// handlers, maybe some mouse events, and a "main" view.
func render(model: Model) -> [View<Message>] {
    [
        OnKeyPress(.enter, { Message.quit }),
        Frame(Spinner(), .alignment(.middleCenter)),
    ])
}

Running your Program

To run your program, pass your initial, update, view, and unmount functions to Ashen.Program and run it with ashen(program). It will return .quit or .error, depending on how the program exited.

do {
    try ashen(Program(initial, update, view))
    exit(EX_OK)
} catch {
    exit(EX_IOERR)
}

Important note: ALL Ashen programs can be aborted using ctrl+c. It is recommended that you support ctrl+\ to gracefully exit your program.

Views

  • Text() - display text or attributed text.
Text("Some plain text")
Text("Some underlined text".underlined())
  • Input() - editable text, make sure to pass .isResponder(true) to the active Input.
enum Message {
    case textChanged(String)
}
Input("Editable text", Message.textChanged, .isResponder(true))
  • Box() - surround a view with a customizable border.
Box(view)
Box(view, .border(.double))
Box(view, .border(.double), .title("Welcome".bold()))
  • Flow() - arrange views using a flexbox like layout.
Flow(.leftToRight, [  // alias: .ltr
    (.fixed, Text(" ")),
    (.flex1, Text(Hi!).underlined()), // this view will stretch to fill the available space
    // .flex1 is a handy alias for .flex(1) - just like CSS flex: 1, you can use different flex
    // values to give more or less % of the available space to the subviews
    (.fixed, Text(" ")),
])
Flow(.bottomToTop, views)
  • Columns() - arrange views horizontally, equally sized and taking up all space.
Columns(views)
  • Rows() - arrange views vertically, equally sized and taking up all space.
Rows(views)
  • Stack() - arrange views according to their preferred (usually smallest) size.
Stack(.ltr, views)
  • Frame() - place a view inside a container that fills the available space, and supports alignment.
Frame(Text("Hi!"), .alignment(.middleCenter))
  • Spinner() - show a simple 1x1 spinner animation
Spinner()
  • Scroll(view, .offset(pt|x:|y:)) - Make a view scrollable. By default the scroll view does not respond to key or mouse events. To make the view scrollable via mouse, try this:
enum Message {
    case scroll(Int)  // update model.scrollY by this value
}
OnMouseWheel(
    Scroll(Stack(.down, [...]), .offset(model.scrollY)),
    Message.scroll
)
  • Also consider adding a "listener" for the onResizeContent: message, which will pass a LocalViewport (which has the size of the entire scrollable area and the visible: Rect)
  • Repeating(view) - Useful for background drawing. By itself it has preferredSize: .zero, but will draw the passed view to fill the available area.
// draw the text "Hi!" centered, then fill the rest of the background with red.
ZStack([Frame(Text("Hi!".background(.red)), .alignment(.middleCenter)), Repeating(Text(" ".background(.red)))])

View Modifiers

Views can be created in a fluent syntax (these will feel much like SwiftUI, though not nearly that level of complexity & sophistication).

  • .size(preferredSize), .minSize(preferredSize), .maxSize(preferredSize) - ensures the view is at least, exactly, or at most preferredSize. See also .width(w), .minWidth(w), .maxWidth(w), .height(h), .minHeight(h), .maxHeight(h) to control only the width or height.
Text("Hi!").width(5)
Stack(.ltr, [...]).maxSize(Size(width: 20, height: 5))
  • .matchContainer(), .matchContainer(dimension: .width|.height) - Ignores the view's preferred size in favor of the size provided by the containing view.
  • .matchSize(ofView: view), .matchSize(ofView: view, dimension: .width|.height) - Ignores the view's preferred size in favor of another view (usually a sibling view, in a ZStack).
  • .fitInContainer(.width|.height) - Make sure the width or height is equal to or less than the containing view's width or height.
  • .compact() - Usually the containing view's size is passed to the view's render function, even if it's much more than the preferred size. This method renders the view using the preferredSize instead.
  • .padding(left:,top:,right:,bottom:) or .padding(Insets) - Increases the preferred size to accommodate padding, and renders the view inside the padded area. If you are interested in peaking into some simple rendering/masking code, this is a good place to start.
  • .styled(Attr) - After drawing the view, the rendered area is modified to include the Attr. See also: underlined(), bottomLined(), reversed(), bold(), foreground(color:), background(color:), reset()
Text("Hi!".underlined()).background(color: .red)
Stack(.ltr, [...]).reversed()
  • .border(BoxBorder) - Surrounds the view in a border.
Text("Hi!").border(.single, .title("Message"))
  • .aligned(Alignment) - This is useful when you know a view will be rendered in an area much larger than the view's preferredSize. The Alignment options are topLeft, topCenter, topRight, middleLeft, middleCenter, middleRight, bottomLeft, bottomCenter, bottomRight.
Text("Hi!").aligned(.middleCenter)
  • See also .centered(), which is shorthand for .aligned(.topCenter), useful for centering text or a group of views.
  • .scrollable(offset: Point) - Wraps the view in Scroll(view, .offset(offset))

Events

  • OnKeyPress
  • OnTick
  • OnResize
  • OnNext
  • OnClick
  • OnMouseWheel
  • OnMouse
  • IgnoreMouse

Download Details:

Author:  colinta
Source code: https://github.com/colinta/Ashen


#swift 

What is GEEK

Buddha Community

Ashen: A Framework for Writing Terminal Applications in Swift

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.
This article will help you understand the various types of JavaScript Framework available in the market. When it comes to choosing the best platform for you, it’s not only the number of features you need to consider but also its functionality. The ease with which it fits within your project is also an essential factor. The next step is to choose the framework that best fits your company requirements or you can select the best from the list of top web development companies to develop your product based on your requirements.

#javascript frameworks for web applications #web applications development companies #progressive javascript framework #javascript frameworks #javascript #frameworks

Houston  Sipes

Houston Sipes

1600430400

10 Free Online Resources To Learn Swift Language

Swift is a fast and efficient general-purpose programming language that provides real-time feedback and can be seamlessly incorporated into existing Objective-C code. This is why developers are able to write safer, more reliable code while saving time. It aims to be the best language that can be used for various purposes ranging from systems programming to mobile as well as desktop apps and scaling up to cloud services.

Below here, we list down the 10 best online resources to learn Swift language.

(The list is in no particular order)

#developers corner #free online resources to learn swift language #learn swift #learn swift free #learn swift online free #resources to learn swift #swift language #swift programming

Top Swift Development Companies | Top Swift Developers - TopDevelopers.co

A thoroughly researched list of top Swift developers with ratings & reviews to help find the best Swift development companies around the world.

#swift development service providers #best swift development companies #top swift development companies #swift development solutions #top swift developers #swift

Hire Dedicated Swift Developers

Want to create a native iOS application for your Startup?

Hire Dedicated Swift Developers for end-to-end services like development, migration, upgrade, testing, and support & maintenance. Trust HourlyDeveloper.io our Swift development team for iOS device apps that are high on performance and security.

Consult with experts:- https://bit.ly/2C5M6cz

#hire dedicated swift developers #swift developers #swift development company #swift development services #swift development #swift

Mireille  Von

Mireille Von

1661980200

Ashen: A Framework for Writing Terminal Applications in Swift

Ashen

A framework for writing terminal applications in Swift. Based on The Elm Architecture.

As a tutorial of Ashen, let's consider an application that fetches some todo items and renders them as a list.

Example

Old way

In a traditional controller/view pattern, views are created during initialization, and updated later as needed with your application data. Loading data from a server to load a list of views. Views are stored in instance variables and edited "in place", and the views/subviews are added/removed as events happen, so a lot of code is there to manage view state.

New way

What would this look like using Ashen or Elm or React? In these frameworks, rendering output is declarative; it is based the model, and you render all the views and their properties based on that state. Model goes in, View comes out.

func render(model: Model) -> View<Message> {
    guard
        let data = model.data
    else {
        // no data?  Show the spinner.
        return Spinner()
    }

    return Stack(.topToBottom, [
        Text("List of things"),
        ListView(dataList: data) { row in
            LabelView(text: row.title)
        }
        // πŸ‘† this view is similar to how UITableView renders cells - only
        // the rows that are visible will be rendered. rowHeight can also be
        // assigned a function, btw, to support dynamic heights.
        //
        // Also, this view is not done yet! Sorry - but it'll look something
        // like this.
    ])
}

So instead of mutating the isHidden property of views, or addSubview, we just render the views we need based on our model. SwiftUI has also adopted this model, so if you've been using it, Ashen will feel very familiar.

Commands and Messages

To fetch our data, we need to call out to the runtime to ask it to perform a background task, aka a Command, and then report the results back as a Message. Message is how your Components can tell your application about changes that might result in a change to your model. For instance, if someone types in a "name" text field you probably want to know about that so you can update the model's name property.

Sources of Messages include Views, Commands, and system event components (e.g. a KeyEvent message can be captured via the OnKeyPress component, which receives system-level events and maps those into an instance of your app's Message type).

Our application starts at the initial() method. We return our initial model and a command to run. We will return an Http command:

enum Message {
    case received(Result<(Int, Headers, Data), HttpError>)
}

func initial() -> Initial<Model, Message> {
    let url = URL(string: "http://example.com")!
    let cmd = Http.get(url) { result in
      Message.received(result)
    }

    return Initial(Model(), cmd)
}

When the Http request succeeds (or fails) the result will be turned into an instance of your application's Message type (usually an enum), and passed to the update() function that you provide.

To send multiple commands, group them with Command.list([cmd1, cmd2, ...])

Updating

In your application's update() function, you will instruct the runtime how the message affects your state. Your options are:

  • .noChange β€” ignore the message
  • .update(model, command) β€” return a model and a list of Commands to run
  • .quit β€” graceful exit (usually means exit with status 0)
  • .quitAnd({ ... })β€” graceful exit with a closure that runs just before the runtime is done cleaning up. You can also throw an error in that closure.

For convenience there are two helper "types":

  • .model(model) β€” return just updated model, no commands (shortcut for .update(model, Command.none()))
  • .error(error) β€” quit and raise an error.

Program

Here's a skeleton program template:

// This is usually an enum, but it can be any type.  Your app will respond
// to state changes by accepting a `Message` and returning a modified
// `Model`.
enum Message {
    case quit
}

// The entired state of you program will be stored here, so a struct is the
// most common type.
struct Model {
}

// Return your initial model and commands. if your app requires
// initialization from an API (i.eg. a loading spinner), use a
// `loading/loaded/error` enum to represent the initial state.  If you
// persist your application to the database you could load that here, either
// synchronously or via a `Command`.
func initial() -> Initial<Model, Message> {
    Initial(Model())
}

// Ashen will call this method with the current model, and a message that
// you use to update your model.  This will result in a screen refresh, but
// it also means that your program is very easy to test; pass a model to
// this method along with the message you want to test, and check the values
// of the model.
//
// The return value also includes a list of "commands".  Commands are
// another form of event emitters, like Components, but they talk with
// external services, either asynchronously or synchronously.
func update(model: Model, message: Message)
    -> State<Model, Message>
{
    switch message {
    case .quit:
        return .quit
    }
}

// Finally the render() method is given your model and you return
// an array of views. Why an array? I optimized for the common case: some key
// handlers, maybe some mouse events, and a "main" view.
func render(model: Model) -> [View<Message>] {
    [
        OnKeyPress(.enter, { Message.quit }),
        Frame(Spinner(), .alignment(.middleCenter)),
    ])
}

Running your Program

To run your program, pass your initial, update, view, and unmount functions to Ashen.Program and run it with ashen(program). It will return .quit or .error, depending on how the program exited.

do {
    try ashen(Program(initial, update, view))
    exit(EX_OK)
} catch {
    exit(EX_IOERR)
}

Important note: ALL Ashen programs can be aborted using ctrl+c. It is recommended that you support ctrl+\ to gracefully exit your program.

Views

  • Text() - display text or attributed text.
Text("Some plain text")
Text("Some underlined text".underlined())
  • Input() - editable text, make sure to pass .isResponder(true) to the active Input.
enum Message {
    case textChanged(String)
}
Input("Editable text", Message.textChanged, .isResponder(true))
  • Box() - surround a view with a customizable border.
Box(view)
Box(view, .border(.double))
Box(view, .border(.double), .title("Welcome".bold()))
  • Flow() - arrange views using a flexbox like layout.
Flow(.leftToRight, [  // alias: .ltr
    (.fixed, Text(" ")),
    (.flex1, Text(Hi!).underlined()), // this view will stretch to fill the available space
    // .flex1 is a handy alias for .flex(1) - just like CSS flex: 1, you can use different flex
    // values to give more or less % of the available space to the subviews
    (.fixed, Text(" ")),
])
Flow(.bottomToTop, views)
  • Columns() - arrange views horizontally, equally sized and taking up all space.
Columns(views)
  • Rows() - arrange views vertically, equally sized and taking up all space.
Rows(views)
  • Stack() - arrange views according to their preferred (usually smallest) size.
Stack(.ltr, views)
  • Frame() - place a view inside a container that fills the available space, and supports alignment.
Frame(Text("Hi!"), .alignment(.middleCenter))
  • Spinner() - show a simple 1x1 spinner animation
Spinner()
  • Scroll(view, .offset(pt|x:|y:)) - Make a view scrollable. By default the scroll view does not respond to key or mouse events. To make the view scrollable via mouse, try this:
enum Message {
    case scroll(Int)  // update model.scrollY by this value
}
OnMouseWheel(
    Scroll(Stack(.down, [...]), .offset(model.scrollY)),
    Message.scroll
)
  • Also consider adding a "listener" for the onResizeContent: message, which will pass a LocalViewport (which has the size of the entire scrollable area and the visible: Rect)
  • Repeating(view) - Useful for background drawing. By itself it has preferredSize: .zero, but will draw the passed view to fill the available area.
// draw the text "Hi!" centered, then fill the rest of the background with red.
ZStack([Frame(Text("Hi!".background(.red)), .alignment(.middleCenter)), Repeating(Text(" ".background(.red)))])

View Modifiers

Views can be created in a fluent syntax (these will feel much like SwiftUI, though not nearly that level of complexity & sophistication).

  • .size(preferredSize), .minSize(preferredSize), .maxSize(preferredSize) - ensures the view is at least, exactly, or at most preferredSize. See also .width(w), .minWidth(w), .maxWidth(w), .height(h), .minHeight(h), .maxHeight(h) to control only the width or height.
Text("Hi!").width(5)
Stack(.ltr, [...]).maxSize(Size(width: 20, height: 5))
  • .matchContainer(), .matchContainer(dimension: .width|.height) - Ignores the view's preferred size in favor of the size provided by the containing view.
  • .matchSize(ofView: view), .matchSize(ofView: view, dimension: .width|.height) - Ignores the view's preferred size in favor of another view (usually a sibling view, in a ZStack).
  • .fitInContainer(.width|.height) - Make sure the width or height is equal to or less than the containing view's width or height.
  • .compact() - Usually the containing view's size is passed to the view's render function, even if it's much more than the preferred size. This method renders the view using the preferredSize instead.
  • .padding(left:,top:,right:,bottom:) or .padding(Insets) - Increases the preferred size to accommodate padding, and renders the view inside the padded area. If you are interested in peaking into some simple rendering/masking code, this is a good place to start.
  • .styled(Attr) - After drawing the view, the rendered area is modified to include the Attr. See also: underlined(), bottomLined(), reversed(), bold(), foreground(color:), background(color:), reset()
Text("Hi!".underlined()).background(color: .red)
Stack(.ltr, [...]).reversed()
  • .border(BoxBorder) - Surrounds the view in a border.
Text("Hi!").border(.single, .title("Message"))
  • .aligned(Alignment) - This is useful when you know a view will be rendered in an area much larger than the view's preferredSize. The Alignment options are topLeft, topCenter, topRight, middleLeft, middleCenter, middleRight, bottomLeft, bottomCenter, bottomRight.
Text("Hi!").aligned(.middleCenter)
  • See also .centered(), which is shorthand for .aligned(.topCenter), useful for centering text or a group of views.
  • .scrollable(offset: Point) - Wraps the view in Scroll(view, .offset(offset))

Events

  • OnKeyPress
  • OnTick
  • OnResize
  • OnNext
  • OnClick
  • OnMouseWheel
  • OnMouse
  • IgnoreMouse

Download Details:

Author:  colinta
Source code: https://github.com/colinta/Ashen


#swift