rad 1.4.0

A zero-dependency frontend framework for creating high-performant web apps using Dart.

Rad

Rad is a frontend framework for creating fast and interactive web apps using Dart. It has all the best bits of Flutter(StatefulWidgets, Builders) and React(Hooks, Performance), 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

Example

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

Function runApp will finds a element having id=output in your HTML page, create a Rad app with it, and then displays "hello world" inside of it. As you might have guessed it, Text('hello world') is a widget, a special purpose widget provided by the framework that we're using to display desired text on the screen. Rad provides number of widgets that you can use and best thing about widgets is that you can compose them together to create more widgets and build complex layouts.

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.

React hooks

Similar to React, we have number of hooks that you can use to power-up your widget functions.

Let's see a basic example with useState:

Widget widgetFunction() => HookScope(() {
  // create a stateful value
  var state = useState(0);

  return Span(
    child: Text('You clicked me ${state.value} time!'),
    onClick: (_) => state.value++, // will cause a re-render
  ); 
});

runApp(app: widgetFunction(), ...);

While using hooks please keep in mind following things,

1. Avoid calling Hooks inside loops, conditions, or nested functions.
2. Always wrap body of your Widget-functions with a HookScope widget.
3. Always use Hooks at the top level of your functions, before any widget/or early return.

HTML widgets

Similar to JSX, you can write HTML in your Dart code. Dart's syntax is much more safe than JSX and doesn't force you to go through a separate build step but writing plain HTML using Dart is not very ideal so Rad provides you with more than 100 widgets that are dedicated to help you write HTML within your Dart code as easily as possible.

Let's look at this markup example:

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

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

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

There's also an alternative syntax for all 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'.

Reference

Below is the list of available widgets and hooks in Rad. Some widgets are named after Flutter widgets because they either works exactly same or can be used to achieve same things but in a different way(more or less). All those widgets are tagged accordingly.

Tags:

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

Abstract

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

Navigator/Routing

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

Builders

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

Functional

• RadApp
• Text [different]
• ListView [same]
• HookScope
• EventDetector
• GestureDetector [same]

Misc

• RawMarkUp
• RawEventDetector

Hooks

useContext , useNavigator , useRef , useState , useMemo , useCallback , useEffect , useLayoutEffect

HTML Widgets (additional)

InputButton , InputCheckBox , InputColor , InputDateTimeLocal , InputDate , InputEmail , InputFile , InputImage , InputMonth , InputNumber , InputPassword , InputRadio , InputRange , InputReset , InputSearch , InputSubmit , InputTelephone , InputText , InputTime , InputUrl , InputWeek

HTML Widgets (short-syntax)

a , abbr , address , area , article , aside , audio , bdi , bdo , blockquote , br , button , canvas , caption , cite , code , col , colgroup , data , datalist , dd , del , details , dfn , dialog , div , dl , dt , em , embed , fieldset , figcaption , figure , footer , form , h1 , h2 , h3 , h4 , h5 , h6 , header , hr , i , iframe , img , input , ins , kbd , label , legend , li , map , mark , menu , meter , nav , ol , optgroup , option , output , p , picture , portal , pre , progress , q , rp , rt , ruby , s , samp , select , small , source , span , strong , sub , summary , sup , table , tbody , td , textarea , tfoot , th , thead , time , tr , track , ul , vartag , video , wbr

HTML Widgets (full-syntax)

Anchor , Abbreviation , Address , ImageMapArea , Article , Aside , Audio , BidirectionalIsolate , BidirectionalTextOverride , BlockQuote , LineBreak , Button , Canvas , TableCaption , Citation , InlineCode , TableColumn , TableColumnGroup , Data , DataList , DescriptionDetails , DeletedText , Details , Definition , Dialog , Division , DescriptionList , DescriptionTerm , Emphasis , EmbedExternal , FieldSet , FigureCaption , Figure , Footer , Form , Heading1 , Heading2 , Heading3 , Heading4 , Heading5 , Heading6 , Header , HorizontalRule , Idiomatic , IFrame , Image , Input , InsertedText , KeyboardInput , Label , Legend , ListItem , ImageMap , MarkText , Menu , Meter , Navigation , OrderedList , OptionGroup , Option , Output , Paragraph , Picture , Portal , PreformattedText , Progress , InlineQuotation , RubyFallbackParenthesis , RubyText , RubyAnnotation , StrikeThrough , SampleOutput , Select , Small , MediaSource , Span , Strong , SubScript , Summary , SuperScript , Table , TableBody , TableDataCell , TextArea , TableFoot , TableHeaderCell , TableHead , Time , TableRow , EmbedTextTrack , UnOrderedList , Variable , Video , LineBreakOpportunity

Contributing

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