rad 1.0.0-rc.2

A zero-dependency frontend framework for creating web apps using Dart. Inspired from Flutter.

Rad

Rad is a frontend framework for creating fast and interactive web apps using Dart. It's inspired from Flutter and shares same programming paradigm. It has all the best bits of Flutter(StatefulWidgets, Builders) and allows you to use web technologies(HTML and CSS) in your app.

Quick links

• Getting started
• Package @ pub.dev
• API reference @ pub.dev
• Repository @ github.com
• Benchmarks @ github.com

Let's start

Below is a hello world in Rad:

void main() {
  runApp(
    app: Text('hello world'),
    appTargetId: 'output',
  );
}

Let's see another example,

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

void main() {
  runApp(
    app: HomePage(),
    appTargetId: 'output',
  );
}

If you're familiar with Flutter it don't even need an explanation. Internally, Rad has some differences that might not be apparent from the examples above so let's discuss them first.

Differences

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 the way you describe them.

2. Second, you can use use CSS for adding animations without ever thinking about how browsers carries them out.

3. And lastly, for layouts, you've to use HTML. And guess what? there are widgets for that.

   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'),
     ],
   );
   

Flutter widgets

Following widgets in Rad are inspired from Flutter:

• InheritedWidget, StatelessWidget, StatefulWidget.
• FutureBuilder, StreamBuilder and ValueListenableBuilder.

These widgets has same syntax as their Flutter's counterparts. Not just syntax, they also works exactly same as if they would in Flutter. Which means you don't have to learn anything new to be able to use them.

HTML widgets

Let's take a look at another markup example:

<div>
  <p>Hey there!</p>
</div>

Here's how we'll write this using widgets:

Division(
  children: [
    Paragraph(innerText: 'Hey there!'),  
  ]
)

There's also an alternative syntax for HTML widgets:

div(
  children: [
    p(innerText: 'Hey there!'),
  ]
)

Apart from syntax/names, HTML widgets are composable and has same semantics in the sense that they can be composed and mixed together with other widgets. For example,

Span(
  child: ListView(
    children: [
      SomeStatefulWidget(),
      Span(),
      ...
    ]
  ),
);

In above example, a Span widget is containing a ListView widget. Further, that ListView is containing a StatefulWidget and a Span widget. The point we're trying to make is that HTML widgets won't restrict you to 'just HTML'.

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 tagged according to their similarity level. Please note that these taggings are based solely on my understanding of Flutter widgets/src. If you happen to find any big differences, do let me know.

Similarity tags:

• exact: Exact syntax, similar semantics.
• same: Exact syntax with few exceptions, similar semantics.
• different: Different syntax, different semantics.
• experimental: --

Abstract

• InheritedWidget [exact]
• StatelessWidget [exact]
• StatefulWidget [exact]

Navigator/Routing

• Navigator [different]
• Route [different]
• AsyncRoute

Builders

• FutureBuilder [exact]
• StreamBuilder [exact]
• ValueListenableBuilder [exact]
• ListView.builder [same]

Misc

• RadApp
• RawMarkUp
• Text [different]
• ListView [same]
• EventDetector
• GestureDetector [experimental]

HTML Widgets

Abbreviation , Anchor , Article , BlockQuote , BreakLine , Button , Canvas , Caption , Code , Division , FieldSet , Footer , Form , Header , Heading(1-6) , HorizontalRule , IFrame , Idiomatic , Image , Input , InputCheckBox , InputFile , InputRadio , InputSubmit , InputText , Label , Legend , ListItem , Menu , Navigation , Option , Paragraph , Progress , Select , Small , Span , StrikeThrough , Strong , SubScript , SuperScript , Table , TableBody , TableColumn , TableColumnGroup , TableDataCell , TableFoot , TableHead , TableHeaderCell , TableRow , TextArea , UnOrderedList

Contributing

For reporting bugs/queries, feel free to open issue. Read contributing guide for more.