rad 0.5.1

A zero-dependency frontend framework for writing web apps in plain Dart. Inspired from Flutter.

Rad

Rad is a frontend framework for Dart. It's inspired from Flutter and shares same programming paradigm. In Rad, applications are created using widgets. A widget can describe static as well as dynamic part of user interface. Widgets can be composed together to build more widgets and complex layouts.

Quick links

• Getting started
• API reference

Example

Let's take a look at an example written using Rad:

class HomePage extends StatelessWidget
{
  @override
  build(context) {
    return Text("hello world");
  }
}

How about that? if you're familiar with Flutter it don't even need an explanation.

Talking about differences, well there are number of them,

1. First off, we don't use a rendering engine to render a widget or anything like that. Widgets are mapped to HTML tags and composed together they way you describe them. This means every widget has a corresponding HTML tag in DOM, and your application has complete access to document(DOM).

2. To make things manageble, there are widgets for commonly used HTML tags.

   Let's take this HTML snippet:

   <span class="heading big">
     <strong>
       hellow
     </strong>
   </span>
   

   Here's how its equivalent will be written using widgets:

   Span(
     classAttribute: "heading big",
     children: [
       Strong(innerText: "hellow"),
     ],
   );
   

   Note: Since class is a reserved word in Dart we're using suffix "Attribute" with it. There are a few more attributes that are reserved, and those can be used with the same suffix "Attribute".

3. Lastly, there are no layout/style specific widgets for example in Flutter we've Container, Stack etc. Just think about it for a sec? we don't really need them as most of things can be done using HTML tags and CSS.

   Just for sake of example, let's say you want a Stack widget,

   1. Create a Stack entry:

      Widget StackEntry(Widget widget)
      {
        return Division( 
            style: "position:absolute;top:0;left:0;",
            children: [widget],
          );
      
        // Division = HTML's div
      }
      

   2. Create a Stack container

      Widget Stack({required List<Widget> children})
      {
        return Division(
            style: "position:relative;",
            children: entries,
          );
      }
      

   3. Well done! Here's our newly created Stack widget

      Stack(
        children: [
          StackEntry(Text("hellow 1")),
          StackEntry(Text("hellow 2")),
        ]
      )
      

      You can compose widgets the way you want and style them according to your liking.

Components

Let's make it short. This is a utility that allows dynamic loading of CSS/JS assets.

App(

  // in your app widget,

  additionalComponents: Components(

    // CSS files (method 1)

    stylesheets: [
      "https://some..css",
      "https://another..css",
      ...
    ],

    // JS files
    
    scripts: [
      "https://some..js",
      "https://another..js",
      ...
    ],

    // CSS (method 2)
    // To be used for external packages.

    styleComponents: [

      SomePackageComponent(),
      
      AnotherPackageComponent(),

    ]
  )
)

Widgets Index

Below is the list of available widgets in this framework.

Some widgets are named after Flutter widgets because they either works exactly same or can be used to acheive same things but in a differnet way(more or less). All those widgets are marked according to their similarity level.

Markings:

• exact: Works exactly same.
• same: Works nearly the same way.
• differ: Works different.

Main

• App

Navigator/Routing

• Navigator [differ]
• Route

Abstract

• StatelessWidget [same]
• StatefulWidget [same]
• StatelessProvider

Builders

• FutureBuilder [exact]
• StreamBuilder [exact]
• ValueListenableBuilder [exact]

Elements

• Text [differ]
• RawMarkUp
• GestureDetector

HTML

• Header

• Footer

• Navigation

• Span

• Small

• Strong

• Idiomatic

• SubScript

• SuperScript

• Division

• Anchor

• Blockquote

• HorizontalRule

• Label

• IFrame

• BreakLine

• Image

• Paragraph

• UnOrderedList

• ListItem

• Button

• Select

• Option

• Progress

• TextArea

• Form

• FieldSet

• Legend

• InputText

• InputCheckBox

• InputRadio

• InputFile

• InputSubmit

• Heading(1-6)

Why Dart?

I actually tried writing this in TypeScript before. While we can do awesome things with types in TS, it also inherits craziness from JS (has to bind 'this', use arrow fun, and more things like that). Later I decided to give Dart a try and I quickly realized that Dart is a very underrated language. You don't have to trust me on that. I had wrote a lot of Dart code with Flutter, but the fact that I choosed TS at first place really shows how underrated Dart actually is. I am thankful to all the people who helped create Dart and/or contributing to it, one way or the other.

Contribution

Rad is a hobby project. Core(src/core) of this framework is extremely small and straightforward. Having just the basic knowledge of DOM & Dart is enough to implement widgets(src/widgets).