DEV Community: Kilian Schulte

Introducing Jaspr - A complete web-framework written in Dart

Kilian Schulte — Fri, 03 Jun 2022 10:55:46 +0000

Hi fellow developers,

I'm really excited to finally share with you what I've been working on over the last few months:

Jaspr is a complete web-framework that is written in Dart. It takes inspiration from frameworks like React or Remix, but most importantly Flutter. While it renders normal HTML & CSS, it looks and feels very much like Flutter. So while you get all the benefits of an actual web app (fast page load, seo, server-side rendering, etc.) you get the familiar structure of stateless, stateful and inherited widgets.

There is so much to talk about, but here are some highlights:

💙 1. Familiar component model similar to Flutter widgets but adapted for the web

It was made to look and feel just like Flutter, while rendering normal HTML and CSS. It is therefore targeted mainly at Flutter developers that want to build websites but don't want to use Flutter Web (for various good reasons).

With Dart as its language, it also has some general advantages over JS (in my opinion) like type- and null-safety.

🖼 2. Server-side rendering out of the box!

A simple jaspr serve and you will have a running debug server with SSR and automatic reloads. You can still do SPAs but it's not that satisfying.

(And I'm also planning to support static site generation in the future)

📖 3. Good documentation is vital

So I made sure everything is well documented right from the start. Check out the wiki.

🛝 4. Online Playground inspired by DartPad

I love DartPad, the online code-editor for Dart. However it only supports selected packages, so I made my own version. It's called JasprPad and you can check it out here.

Like DartPad you can write and execute jaspr apps right in your browser. It also comes with a range of examples that you can check out, and I even made a tutorial to get you started.

As a bonus, JasprPad is not only for writing jaspr apps, but is written with jaspr itself, so it doubles as a real-world showcase.

🌊 5. Riverpod for Jaspr

State-Management will be the same for jaspr as it is for Flutter thanks to the shared widget structure. Riverpod is a popular state management package for Flutter and I added jaspr_riverpod, porting over flutter_riverpod to jaspr.

🧪 6. Testing

Yes, I even made a testing package for 'jaspr', out of the need to test the framework itself. Jaspr is already well test atm. with a coverage of around 70%, but I'm planning to improve this even more in the future.

The package itself jaspr_test takes inspiration from flutter_test but has some unique concepts because jaspr apps need to be both tested for the server and client.

This is just the initial release, so expect more awesome stuff coming soon. I'm very eager to get feedback on this since it was quite some while in the making.

Here again the most important links:

Jaspr on Github
Wiki
JasprPad

In the future I plan to write some more articles about its features, development or how it works, so if you are interested feel free to follow me here on DEV.

Useless Tips for Dart you probably never need. (Part 3)

Kilian Schulte — Thu, 13 Jan 2022 17:03:58 +0000

There exist a lot of great articles highlighting the most useful tips and tricks for Flutter and Dart. They provide great value for both beginners and advanced developers.

This article is not one of them.

This is about the useless tips, the weird quirks, the boring facts and not needed tricks. They are either so absurd you won't ever need them, or so abstruse you don't wish to need them. But they deserve some love, too.

NoSuchMethod

On our list of things we can use how they are definitely not intended, there is one more we haven't covered yet. In Dart there exists the special noSuchMethod(Invocation i) method that we can override in any custom class. As the name suggests, this method will be called when we try to access an instance member that does not exists.

For example take the class Person with only one method greet() and the overridden noSuchMethod(Invocation i). When we try to do person.hello() instead of throwing an error, our noSuchMethod(Invocation i) gets called with an Invocation object containing all information about the failed invocation, like name of the method or any parameters. It also supports getters and setters. Just note that the person variable has to have the type dynamic otherwise the compiler would complain.

JsObject

Here's my pitch: In Javascript you can access properties of any object either using object['myProp'] or directly via object.myProp. In Dart you can only do one at a time, either with a Map or a custom class that defines myProp as a field or getter/setter. You cannot however access an arbitrary property dynamically and extend an object at runtime.

Except with noSuchMethod we can. We would have a class that internally just wraps a Map, but externally uses noSuchMethod to catch any property access using getters and setters.

You probably know that there are several reasons why this is a very bad idea to do. For instance it is a poor way to completely disregard any type safety that comes with Dart. So let's do it anyways!

First we define our JsObject class. It just wraps a Map<String, dynamic> and overrides both noSuchMethod and toString.

class JsObject {
  final Map<String, dynamic> map = {};

  @override
  dynamic noSuchMethod(Invocation i) { 
    // TODO
  }  

  @override
  String toString() {
    return map.toString();
  }
}

We then fill in the implementation for noSuchMethod() which is actually pretty straight forward:

@override
dynamic noSuchMethod(Invocation i) { 
  if (i.isGetter) {
    return map[i.memberName.name];
  } else if (i.isSetter) {
    map[i.memberName.name] = i.positionalArguments.first;
  }
}

The .name is just an extension on Symbol to get the actual name. It also strips the tailing = that each setter invocation has. Lastly we need a helper function that creates a new instance of JsObject but returns dynamic to trick the compiler:

dynamic jsObject() => JsObject();

With that here is how to use it:

void main() {
  var o = jsObject();
  o.myProp = "Hello World";
  o.year = 2022;

  print(o.myProp); // prints "Hello World"
  print(o); // prints "{myProp: Hello World, year: 2022}"
}

See the full working code on dartpad.dev

Void Variables

Now on to the finale. All the above tips and tricks were language features designed with a specific purpose which we have crudely disregarded and defaced. But did you know there is actually a feature that is designed to be useless?

The following quote was taken directly from the depths of the Dart Language Specification:

It could be said that the type void is used to help developers maintain a certain self-imposed discipline about the fact that certain objects are not intended to be used.

What a nice way of saying something is useless, isn't it?

So what does that mean? You most certainly know void as the return type of functions that do not return anything. But you can also use void as a variable type. You can get such a variable by assigning any other variable to a new void variable and thereby making it completely unusable.

void main() {
  var myString = "Hello World";
  void myVoidVr = myString;
  // what to do with myVoidVar?
}

Here is what you cannot do with a void variable: You cannot print it. You cannot pass it as a dynamic parameter. You cannot do .toString() or .runtimeType on it. You cannot compare it with == or !=.
Here is what you can do: You can cast it back to its original type. That's effectively it. You can also return it from a void function or pass it as a void parameter, but that still leaves you with an unusable void variable.

So the only thing you can use a void variable for is to throw it away. As per the Language Specification:

The special type void is used to indicate that the value of an expression is meaningless and intended to be discarded.

So how can we this time completely ignore any good practices or misuse a certain language feature? A feature that is particularly designed to be meaningless and not be used? Well, we use it of course:

First let's define a normal void Function(). However instead of returning nothing, we return some value which we assign to void :

void getText() {
  String str = "Hello World";
  void result = str;
  return result;
}

We also define a function that accepts a value of type void and casts it back to String. This will of course throw if the value is not actually a String.

void printText(void text) {
 var str = text as String;
 print(str);
}

Finally we combine these two methods:

void main() {
 var text = getText();
 // text is void and cannot be used for anything
 printText(text);
}

Why would you do it? Maybe you want to torture your coworkers. Maybe you want to torture yourself. For everybody else:

Please never use it!

Do you know any more useless or abstruse tricks? Please leave a comment.

Also I wanted to experiment with something you won't read everyday in contrast to the thousands of 'Tips & Tricks' articles out there. So please show some love in case you liked it or give some feedback.

Useless Tips for Dart you probably never need. (Part 2)

Kilian Schulte — Thu, 13 Jan 2022 17:03:40 +0000

There exist a lot of great articles highlighting the most useful tips and tricks for Flutter and Dart. They provide great value for both beginners and advanced developers.

This article is not one of them.

Operator overloading

In Part 1 I already introduced you briefly to operator overloading in Dart. And by now you can probably imagine some pretty neat and useful stuff you can do with it. Stuff like vector math, custom maps, … but let's not get distracted. Let's have some fun with it.

Here are all operators available to overload:
+ - * / ^ % ~/ ~ < <= == >= > & | << >> >>> [] []=

Almost all of them must receive a single parameter of any type and return a value of any type. []= must declare two parameters and return void . == must receive an Object and return a bool.

Actual percentage

Let's start simple. Say you are just learning to code and you come across the % operator. When trying it out, it returns weird results that aren't really what you expected. Now, instead of learning about modulo and becoming a better programmer, let's just fix this obvious mistake:

class RealPercent {
  RealPercent(this.percent);

  final double percent;

  double operator %(double n) {
    return n * this.percent / 100;
  }
}

With this simple class, you can do your percentage calculations as you intend to:

// get 20 percent of 110
var myPercentage = RealPercent(20) % 110;
// myPercentage == 22

DartX

Now, here is a fun one that I absolutely did not spend waaaaay too much time on getting to work. I was asking my flatmate if he had any ideas for use(less)-cases and he was like:

"You can overload < and > right? Why not make HTML in Dart?"

Misusing one programming language to mimic the syntax of ~~another progr~~ a markup language? That sounds reasonable and also very much in the spirit of this article.

Before I besiege you with my struggles, how I got there and how it works, let the following sink in a little:

void main() {
  html <<#p>>'Hello World!'<<#p>>>'' | 'body';
}

This valid dart program will render a paragraph saying "Hello World!" to the body of an empty html page. Can it get any better?

Let's start at the beginning. Before we look at the implementation, we first have to lay out our syntax and define the grammar we use. The first thing you might notice that I am using << and >> instead of < and >. The issue is that Dart does not allow chaining comparison operators in a single expression. Even if we use custom classes and override those operators, something like a c will always make the compiler complain with "A comparison expression can't be an operand of another comparison expression". We could solve this by using parentheses like (a < b) > c, but that's not viable for us since this would break the illusion of writing html. So the next closest thing to use were the bit-shift operators. A nice side-effect is that dart also has the triple >>> operator, which we will use to indicate a closing tag.

So with that our html Hello World! becomes <>Hello World!<>> in Dart.

Next, we have to look at the tags (p) and the content (Hello World!). We obviously cannot just write them out since we still need valid Dart syntax. For the content we can just use a string and wrap this in quotes. For the tag we could do the same, but I think it is nicer and more readable to use the symbol literal (#p). Applied to our example this becomes: <<#p>>'Hello World!'<<#p>>>.

Now, remember that we are still dealing with operators, more specifically binary operators. So we always have to have expressions on either side of an operator. In our case, that is currently not true for the first << and last >>>. In the end we can just append an empty string to make this valid. For the beginning we could do the same, but considering the future implementation, we need an instance of a class that overloads the << operator for anything to actually work. So I decided on using a global html variable, which has the nice side-effect of being explicit about wanting to start some html statement.

Again with all that we look at our current html snippet: html <<#p>>'Hello World!'<<#p>>>''. For clarity let's also realize again that we are actually dealing with normal operators and value literals, we just moved some whitespaces around: html << #p >> 'Hello World!' << #p >>> ''.

Now let's dive into the implementation. I will surely skip some parts to keep it concise, but you can always look up the full implementation on the DartPad I linked below. To figure out our classes and what operators to overload, let's go through our final snipped step by step.

Say the html variable is of class A. A needs then to overload the << operator and accept a Symbol (html << #p). We also need to return a new instance of a new class, since we are in another state of our grammar (inside an open tag); let's call it class B. Class B then needs to overload >> to close the tag, and looking ahead it also needs to overload >>>. Both operators must accept a String for now (b >> 'Hello …'). We can also return an instance of A here, since the next step would again be to open a tag with <<.

What this system also needs to support is nested html tags. Luckily (or by clever design…) our current system already supports that with one slight catch. Because again we are dealing with binary operators, we cannot simply do <<#div>> <<#p>> ... because that would leave >> and << without any value in between. In those cases, we need to insert an empty string between the operators, which works because >> expects a string anyways.

See the full working code on dartpad.dev

There is a lot more that affected the final implementation, like operator precedence and associativity. But I will spare you with any more dry implementation details. Go look it up if you want, or stay for some more amazing features of this new language in a language.

First since we are still in normal Dart, instead of using string literals we can just put in a variable for the contents of a tag:

void main() {
  var title = 'Hello, World!';
  html <<#p>> title <<#p>>>'' | 'body';
}

Second, I took the time to also include attributes in the implementation. You can add attributes to a tag using the [] operator and providing a Map<Symbol, String>. This can again be either a literal or a variable and looks like this:

void main() {
  html <<#p[{ #id:'my_id' }]>> 'Hello World!' <<#p>>>'' | 'body';
}

Third, instead of only accepting Strings as the content of a tag, you can also provide an instance of a previous html statement. This makes this grammar able to handle components much like React:

void main() {
  var component = html <<#p>>'Hello World!<<#p>>>'';
  html <<#div>> component <<#div>>>'' | 'body';
}

Fourth, you can already provide multiple child elements like this:

void main() {
  html <<#div>>''
    <<#p>>'First'<<#p>>>''
    <<#p>>'Second'<<#p>>>''
  <<#div>>>'' | 'body';
}

To step it up even more, additionally to Strings and single components, the final implementation also accepts a List of components. This enables you to dynamically generate child elements:

void main() {
  var items = ['First', 'Second', 'Third'];
  html <<#ul>>[
    for (var i in items) html <<#li>> i <<#li>>>''
  ]<<#ul>>>'' | 'body';
}

Fifth, the resulting element has a render(String target) function, but of course there is also an operator for that: | inspired by the unix pipe operator.

Bringing it all together, let's pause for a second and admire the full beauty and abomination of our creation:

void main() {
  // some inputs
  var title = 'Hello, World!';
  var items = ['First', 'Second', 'Third'];

  var component = html <<#p>>'Let\'s html'<<#p>>>''; 

  // constructs and renders the html  
  html <<#div>>''
    <<#h1[{#id:'title'}]>> title <<#h1>>>
    component
    <<#ul>>[
      for (var i in items) html <<#li>>i<<#li>>>''
    ]<<#ul>>>''
  <<#div>>>'' | 'body';

  /* produced html (formatted):
    <div>
      <h1 id="title">Hello, World!</h1>
      <p>Let's html</p>
      <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
      </ul>
    </div>
  */
}

See the full working code on dartpad.dev

Useless Tips for Dart you probably never need. (Part 3)

Kilian Schulte ・・ 4 min read

#programming #flutter #dart #productivity

Do you know any more useless or abstruse tricks? Please leave a comment.

Useless Tips for Dart you probably never need. (Part 1)

Kilian Schulte — Thu, 13 Jan 2022 17:03:19 +0000

There exist a lot of great articles highlighting the most useful tips and tricks for Flutter and Dart. They provide great value for both beginners and advanced developers.

This article is not one of them.

Symbols

Symbols in Dart are a neat way to represent a name. You can create a Symbol using its constructor: var mySymbol = Symbol('someName');. They are great when normal strings are too mainstream for you.

When you want to flex in front of your coworkers, use the symbol literal. It is another way to construct Symbols without using the boring constructor. Just prefix your name with a hip hashtag (#) and you are good to go: var myFancySymbol = #someName;. You also can use the dot syntax (#some.name) or any standard operator like #+.

Since two Symbols with the same name are identical regardless of whether you used the constructor or literal syntax, they make for some fancy comparisons. So next time when you have some static String comparison, just use Symbols (or don't).

void fancySwitch(String value) {
  switch(Symbol(value)) {
    case #foo: print('Found foo');
    case #bar.baz: print('Found bar.baz');
  }
}

Never

Wanna know another useless tip? I would Never tell you!

Never in Dart is used as a function return type that safely tells the compiler, that this function will never return. It is most notably used in the exit() function from dart:io, which will just exit the program and therefore never returns. It is great when you want to just randomly quit your application and leave the user confused. It is also very effective when you want to reduce battery usage of your app.

Now you are probably like 'Woah, how awesome is that. How can I use this in my own method?'. And fear not, I got you covered. Two great ways to use Never is to either have an infinite loop that never returns or breaks in your method, or a method that just always throws.

Never roundRoundBaby() {
  while(true) {
    print('You spin me round round baby.');
    sleep(Duration(seconds: 1));
  }
}
Never thisIsFine() {
  print('This is fine.');
  throw '🔥🔥🔥 (╯°□°)╯︵ ┻━┻ 🔥🔥🔥';
}

Function.apply()

Do you know how you can call a function in Dart? Probably. But did you know there are more sophisticated ways you can achieve this?

And I'm not talking about the call() method, because that is actually very useful.

I'm talking about Function.apply(). Instead of boringly calling a function directly, you can use this handy helper to completely ignore any parameter constraints and backstab the compiler. It works by providing it a Function, a List of positional parameters, and a Map of named parameters:

// instead of
foo(1, 2, 3, f: 4, g: 5)
// do this
Function.apply(foo, [1, 2, 3], {#f: 4, #g: 5});

Notice how we use symbol literals for the named parameters. How ironic.

Now when you want to make absolutely sure that your function is properly applied (or you hate your coworkers), you can pass the whole invocation to Function.apply a second time. Then it would look like this:

Function.apply(Function.apply, [foo, [1, 2, 3], {#f: 4, #g: 5}]);

Next are two very interesting use-cases that I could come up with. They are particularly designed to solve quite common problems.

Currying (kind of)

Currying is a fancy functional programming term. With currying, instead of providing all parameters at once, we take it real slow and provide one argument after another. This gives you the time to get some coffee or reflect on your past life choices.

Say we have a simple function greet:

void greet(String name, String msg) {
  print('Hi $name, $msg');
}

We might want to call this function multiple times with the same name, but a different message. Instead of behaving like a normal person and just calling the function with the appropriate parameters, we can write ourselves an overcomplicated currying helper function. Also let's use an extension on Function just because we can.

Since we want to partially provide parameters, we need to keep track of the already provided parameters on each curry call. We then want to repeatedly provide a single parameter in each subsequent method call and add this to our list of provided parameters. To signal the end of parameters, we do another last call with no parameters. The resulting extension looks like this:

extension CurryFunction on Function {
  // starting point, empty parameters
  Function get curry => _curry([]);
  // creates the curry function
  Function _curry(List params) {
    // returns a function with one optional parameter p
    // when there is a next parameter (p != null), add to list
    // else invoke original function using Function.apply
    return ([p]) => p != null 
      ? _curry([...params, p]) 
      : Function.apply(this, params);
  }
}

We can now call our greet function like this:

void main() {

  // get the currying function
  var greetWho = greet.curry;

  // provide the first parameter
  // this will return another function
  var greetTom = greetWho('Tom');

  // provide the second parameter
  // and call again to terminate currying
  // prints 'Hi Tom, how are you?'
  greetTom('how are you?')();

  // provide a different second parameter
  // prints 'Hi Tom, want some curry?'
  greetTom('want some curry?')();

  // also works with more parameters
  // prints 'a-b-c-d'
  concat.curry('a')('b')('c')('d')();
}

// another function with more parameters
void concat(String p1, String p2, String p3, String p4) {
  print('$p1-$p2-$p3-$p4');
}

Double-Braces

Now the last example was all about increasing your usage of these shiny little emoji smiles ( and ) . But what if those keys are broken on your keyboard, or you just don't like parentheses. This seems like a reasonable problem we should look into.

When we discovered Function.apply a few sections back, we had this neat package of our function and parameters we could use: [foo, [1, 2, 3], {#f: 4, #g: 5}]. A great starting point, since there are no parentheses in sight. However we still needed them to pass this information to the apply method. So we need to come up with another way to pass some information to a method, without using ( or ).

We are rescued by operator overloading. Any Dart class can define custom methods that are called when we use simple operators like + or -. Another operator we can overload is [] used i.e. get or set values in a Map. We then just need to write a class that overloads the [] operator to receive a function and passes it to Function.apply:

class CallProxy {
  const CallProxy();

  // overload the [] operator to receive a function package
  // passes all data to Function.apply and returns the result
  dynamic operator [](List list) {
    return Function.apply(
      // the function
      list[0] as Function, 
      // positional parameters
      list[1] as List, 
      // named parameters, optional
      list.length == 3 ? list[2] as Map<Symbol, String> : null,
    );
  }
}

// a static instance of this class we can use later
const call = CallProxy();

Now we can simply call any function like this:

call[[foo, [1, 2, 3], {#f: 4, #g: 5}]];

The outer [] are from the operator overloading, and the inner [] are from the list literal.

With the new Dart 2.15 constructor tear-offs we can even call constructors with this syntax:

var bananas = call[[List.filled, [10, 'banana']]];

Lastly, the concat currying from above would look really edgy with all those brackets:

call[[call[[call[[call[[call[[concat.curry,['a']]],['b']]],['c']]],['d']]],[]]];

If you are paid by lines of code, this is for you!

Yes, this is actually works. Try it out here.

Article No Longer Available

Do you know any more useless or abstruse tricks? Please leave a comment.

DEV Community: Kilian Schulte

Introducing Jaspr - A complete web-framework written in Dart

💙 1. Familiar component model similar to Flutter widgets but adapted for the web

🖼 2. Server-side rendering out of the box!

📖 3. Good documentation is vital

🛝 4. Online Playground inspired by DartPad

🌊 5. Riverpod for Jaspr

🧪 6. Testing

Useless Tips for Dart you probably never need. (Part 3)

NoSuchMethod

JsObject

Void Variables

Please never use it!

Useless Tips for Dart you probably never need. (Part 2)

Operator overloading

Actual percentage

DartX

Useless Tips for Dart you probably never need. (Part 3)

Kilian Schulte ・ ・ 4 min read

Useless Tips for Dart you probably never need. (Part 1)

Symbols

Never

Function.apply()

Currying (kind of)

Double-Braces

Article No Longer Available

Kilian Schulte ・・ 4 min read