Deploy Flutter Web Application to GitHub Pages using GitHub Actions.

Here we are going to take advantage of GitHub pages and GitHub actions to deploy a web version of a flutter application for free. If you have not installed Flutter yet, follow the instructions in their web.

First of all we need to create a new flutter project:

    flutter create flutter_to_ghpages_example

Onces the project is created:

    cd flutter_to_ghpages_example/
    flutter run -d chrome

With those commands we are going to run the example application on chrome (if you want to run it in a different browser you could execute: flutter devices to list all the available devices and choose one).

Now that we checked that everything works great on our computer is time for checking the source to git.

    git init
    git add .
    git commit -m "Initial Commit"
    git branch -M main
    git remote add origin git@github.com:[UserName]/[RepositoryName].git
    git push -u origin main

Our initial code should be in our GitHub repository.

Before creating our workflow we need to create an empty branch named gh-pages:

    git switch --orphan gh-pages
    git commit --allow-empty -m "Initial commit on orphan branch"
    git push origin gh-pages

With this branch pushed, and action will trigger to deploy our webpage:

But as we don't have any code, the web will have an error:

Lets deploy our initial web, for this we create a workflow that each time we push changes to main it will update one branch called gh-pages with the web build on it:

.github/workflows/CD-to-gh-pages.yml

name: CD to GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  cd:
    runs-on: ubuntu-20.04
    env:
      JAVA_VERSION: "11.0"
      FLUTTER_VERSION: "2.10.4"
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-java@v1
        with:
          java-version: ${{env.JAVA_VERSION}}
      - uses: subosito/flutter-action@v2
        with:
          flutter-version: ${{env.FLUTTER_VERSION}}
      - run: flutter pub get
      - run: flutter analyze
      - run: flutter test
      # Build the project on release web mode, also change the base-href to the repository name
      # because when you create a github page this is included on the url.
      - run: flutter build web --release --base-href="/${{ github.event.repository.name }}/"
      - run: |
          git config --global user.name '${{github.event.pusher.name}}'
          git config --global user.email '${{github.event.pusher.email}}'
          git add -f build/web
          git commit -m '[automated commit] releasing new web version.'
          git push origin `git subtree split --prefix build/web main`:gh-pages --force

This workflow will:

1. Checkout the main branch.
2. Install Java 11.0.
3. Install Flutter 2.10.4
4. Get the dependencies, analyze and test the code.
5. Build the project on release web mode. It is important to change the base-href because the default value is / and on GitHub pages, the base URL is your repository name.
6. Configure git with the credential of the person who made the push to main.
7. Even though build folder is excluded on .gitignore we need to add build/web so we force it.
8. A commit is created with the content on build/web.
9. We are only interested on the content of build/web folder, so we create a subtree and push it to gh-pages branch.

After committing and pushing this changes to Github, a new Action run should be triggered:

When the execution of the workflow finishes, a new GitHub Pages deployment action will be running.

Now our code should be shown on the web:

Apparently everything is working properly, but lets demonstrate making a small change to the web. Lets change the title on lib/main.dart line 27:

Add the changes, commit and push to main.

All the code is available on this repository.

Performance Dart vs Dart2JS vs JavaScript

After some time without having time for Dart I decided to do a little web project with Dart and MongoDB.
For doing that I have to go deeper in to the language.  I started reading "Dart in action" (I completely recommend this book for learning in Dart).

While I was reading the book, I read a chapter about the dart2js function. This function converts dart source code to JavaScript code. The author speaks about the hard work made by google to try to do the conversion between Dart and JavaScript as efficient as they can. After reading this I thought about writing an article about this topic.

What I am going to prove is the performance of Dart, JavaScript converted from Dart and JavaScript doing a easy task: Calculate the first 250.000 prime numbers.

There are thousand different forms to calculate if a number is prime or not. I am not trying to prove what is the most efficient one, what I am trying to prove what is the fastest combo (browser + "language") to calculate them using the same algorithm.

These are the source codes I have used.

performace_js.dart

import 'dart:html';
import 'dart:core';
import 'dart:async';

void main() {
  InputElement start = querySelector("#start");
  start.onClick.listen(prime_number);
}

void prime_number(Event e){
  for(int w=0;w<10;w++){
    int numberOfPrimes =0;
    var start = new DateTime.now();
    for (int i=0;i<=250000;i++){
      if (isPrime(i)) numberOfPrimes++;
    }
    var end = new DateTime.now();
    var timeElasped= end.difference(start);
    print(timeElasped);
  }
}

bool isPrime(int number){
 
  for(int i=2;i<number;i++) {
    if(number%i==0)
      return false;
  }
  return true;
}

performace_js.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Performace JS</title>
<link rel="stylesheet" href="performace_js.css">
</head>
<body>
  <h1>Performace JS</h1>

  <div id="sample_container_id">
    <input type="button" id="start" value="Click_me" />
  </div>

  <script type="application/dart" src="performace_js.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>

performace_js2.html (HTML+JAVASCRIPT)

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Performace JS</title>
<link rel="stylesheet" href="performace_js.css">
<script>
     function isPrime(num) {
        if(num < 2) return false;
        for (var i = 2; i < num; i++) {
           if(num%i==0)
               return false;
        }
      return true;
  }
     
     function prime_number(){
       for (var w=0;w<10;w++){
            var numberOfPrimes=0;
            var start = new Date().getTime();
          for (var j=0;j<=250000;j++){
            if(isPrime(j)==true){
              numberOfPrimes++; 
            }
          }
          var end = new Date().getTime();
          var time = end - start;
          console.log('Execution time: ' + time + ' aaaaa '+ numberOfPrimes);
       }
     }
</script>
</head>
</head>
<body>
  <h1>Performace JS</h1>
  <div id="sample_container_id">
    <input type="button" id="start" value="Click_me" onclick="prime_number()" />
  </div>
</body>
</html>

With this code we get an easy web page :

After testing the Dart, JavaScript converted from Dart and the JavaScript code the results are these:

Run/Browser	Dartium	Chrome dart2js	Firefox dart2js	IE dart2js	Chromium JS	Chrome JS	Firefox JS	IE  JS
1	10,90	13,67	22,94	34,78	10,81	10,81	12,34	20,74
2	10,86	13,11	22,90	34,88	10,86	10,78	11,57	20,57
3	10,89	13,10	22,89	34,65	10,79	10,76	11,57	20,58
4	10,90	13,09	22,89	34,70	10,77	10,84	11,58	20,56
5	10,89	13,11	22,87	34,65	10,75	10,77	11,53	20,65
6	10,84	13,09	22,87	34,68	10,81	10,80	11,55	20,63
7	10,80	13,15	22,88	34,68	10,83	10,80	11,53	20,66
8	10,85	13,13	22,89	34,67	10,89	10,78	11,55	20,69
9	10,84	13,20	22,89	34,65	10,78	10,80	11,55	20,89
10	10,94	13,25	22,91	34,68	10,77	10,82	11,56	20,62
Average	10,8716	13,189	22,893	34,7034	10,8056	10,7955	11,6317	20,6599

From this research we can get several conclusions:

• Dart is close to be as fast as JavaScript.
• The conversion from dart to JavaScript is close to 2 seconds slower than pure JavaScript.
• The JavaScript engine of Internet Explorer (version 11.0.96) is shit.
• Firefox doesn't like working with JavaScript generated by dart2js.

This are the conclusions I can get. This week I will do another research about how they manage the DOM and I will write a post like this to try to explain what I find out.

P.S.: The number of prime number between 0 and 250.000 are 22044.

How to start in Dart (I)

One of the hardest things of learning a new language (programming or speaking) is know where to start. Luckily the Dart web page gives us a great point of start. https://www.dartlang.org/ .

In the web you can get all the information you need about Dart. I recommend to start with the tutorial section. https://www.dartlang.org/docs/tutorials/

The tutorial assumes that you already know another programming language. (If you don't know anything about programming, learning Dart isn't a good starting point. Try Java, C++,C# or python). It  is built with examples. You can read the examples and go on but I prefer to try doing them  by my self .

I have spent my last 2 days doing it. When I have finished I will start with https://www.dartlang.org/codelabs/darrrt/ . This resource let you build your own Dart program. After finishing  I will post my solution and how I have done.