DEV Community: Novaloop Ltd

My first Flutter project as an long time Angular developer

Markus Huggler — Tue, 20 Sep 2022 08:32:09 +0000

I am a full stack software engineer with 10 years of experience with .Net (Core) and Angular (I have started with AngularJS).

We, at Novaloop needed an MVP (or rather a working prototype) and we decided to implement it in Flutter. We chose Flutter mainly because we wanted to be quick and we wanted the MVP to potentially run on all different platforms.

The search for a new community

As a long time user of the .Net Framework and Angular, I am very familiar with influential people in the community that create good content. This is definitely not the case for Flutter.

It's not easy coming from the outside into a new community and catching up for several years.

There is a very active Discord channel (https://discord.com/invite/N7Yshp4) and also a lot going on in the Subreddit (https://www.reddit.com/r/FlutterDev/). Many developers are also very active on Twitter.

I have put together a Twitter list: https://twitter.com/i/lists/1540588470950846466

And here are a few selected Twitter accounts.

Twitter Community

Hint: The Flutter community handles use the blue heart emoji extensively ;)

No particular order:

Twitter Handle	Description
@RydMike	Learn a lot about theming
@vandadnp	Flutter courses on YouTube
@RobertBrunhage	Great Flutter courses
@felangelov	Author of the Bloc library
@vgventures	Maintainer of the Bloc library
@remi_rousselet	Author of Provider and Riverpod
@biz84	Great Flutter courses
@ThomasBurkhartB	Author of get_it dependency injection
@mhadaily	Community leader and organizer
@verry_codes	Flutterista and community leader Flutter DACH
@letsgetwckd	Great Flutter courses (flutterly)
@resocoder	Great flutter courses
@devangelslondon	Community leader
@ASalvadorini	Flutter speaker
@roaakdm	Flutterista and Flutter Vikings speaker
@CFDevelop	Flutter Dev
@luke_pighetti	Flutter GDE (Genuinely Disturbed Engineer)

Learning Resources

Of course, and everyone will say this, the best resource is the official site and the respective documentation of the packages.

But on my way to the first Flutter project, the following materials helped me a lot.

Description	URL
Flutter documentation	https://docs.flutter.dev
Decoding Flutter	https://www.youtube.com/playlist?list=PLjxrf2q8roU1fRV40Ec8200rX6OuQkmnl
Flutter widget of the week	https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG
The Boring Show	https://www.youtube.com/playlist?list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl
Code with Andrea, very comprehensive Flutter courses	https://codewithandrea.com/
Flutter Community @ Reddit	https://www.reddit.com/r/FlutterDev/
Flutter Community @ Youtube	https://www.youtube.com/c/FlutterCommunityVideos
Flutter @ Youtube	https://www.youtube.com/c/flutterdev
Flutterfly @ Youtube	https://www.youtube.com/c/Flutterly
Majid Hajian @ Youtube	https://www.youtube.com/c/mhadaily
Reso Coder @ Youtube	https://www.youtube.com/c/ResoCoder
Vandad Nahavandipoor @ Youtube	https://www.youtube.com/c/VandadNP
Robert Brunhage @ Youtube	https://www.youtube.com/c/RobertBrunhage
Robert Brunhage Courses	https://robertbrunhage.com/
FilledStacks @ Youtube	https://www.youtube.com/c/FilledStacks/featured

And following Udemy courses I bought and watched individual chapters when needed during the development.

Description	URL
Dart & Flutter - Zero to Mastery [2022] + Clean Architecture (German)	https://www.udemy.com/course/dart-flutter-leicht-gemacht/
Flutter & Dart - The Complete Guide [2022 Edition]	https://www.udemy.com/course/learn-flutter-dart-to-build-ios-android-apps/
The Complete 2021 Flutter Development Bootcamp with Dart	https://www.udemy.com/course/flutter-bootcamp-with-dart/
Flutter - Intermediate	https://www.udemy.com/course/flutter-intermediate/
Dart and Flutter: The Complete Developer's Guide	https://www.udemy.com/course/dart-and-flutter-the-complete-developers-guide/

First steps

Dart

Coming from C# and Typescript, Dart wasn't too much of a hurdle. Long story short: I learned to love Dart.

Sure, compared to Typescript, certain tasks are more tedious, e.g. parsing JSON responses to objects. But the static analysis over the project works very well and is worth its weight in gold ;)

Everything is a Widget

At the beginning it takes a bit of getting used to, but with time it actually becomes very natural.

Flutter's declarative widget system has allowed us to quickly and easily implement specifications from UX designers. At a pace that I have never seen before.

Architecture and Code Organization

As with many things, Flutter is not very opiniated. It is up to the team to choose the appropriate architecture and also to determine the appropriate solution for the organization of the code.

Feature-first, layer-first - your choice

Configuration

I'm used to the framework already bringing solutions and making it easy for a developer to ship different environments. To my knowledge, there is no official solution.

Andrea has published a good article with a suggestion: https://codewithandrea.com/articles/flutter-api-keys-dart-define-env-files/

Hot Topics

State Management

https://docs.flutter.dev/development/data-and-backend/state-mgmt/options

Periodically, Mike Rydstrom (https://twitter.com/RydMik) publishes an overview of the State Management Solutions with the most LIKEs. https://twitter.com/RydMike/status/1528827017172504579

This is the hottest topic in the community. Hardly anyone doesn't have an opinion on it. As far as I understand, there is no official recommendation from Google. There is a discussion about whether there was once an official endorsement for Flutter BLoC. At IO '18, it seems that the BLoC architecture was presented and the package was then developed according to this architecture design. At the moment there seems to be a big momentum for Provider and for the next generation of it: Riverpod. These are maintained by Remi Rousselet (https://twitter.com/remi_rousselet). Soon there will be a new major release (2.0) of Riverpod and there seems to be a lot of changes and simplifications coming our way in the next few months. See also the talk of Remi at the Flutter Vikings conference https://youtu.be/C2Zp731g8Es?t=12762

The courses of Andrea Bizzotto are great when it comes to Riverpod and a possible architecture. Andrea proposes an architecture and calls it Riverpod Architecture https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/

To get a feel for both architectures, we developed our project with both state management solutions. To be fair, the first version was implemented with Riverpod and the second version with BLoC, so we had already learned a lot during the implementation of the second version. I know NgRx very well from Angular and therefore felt very quickly at home with the BLoC pattern. We also want to store a part of the state in local memory and reload it on restart. We have implemented this with Riverpod itself in the BLoC package there is already a solution hydrated_bloc. Also the possibility of global observers has helped us a lot in the development and has helped a bit over the lack of Redux tools (in the browser).

Detailed overview by @illiaromanenko: https://github.com/illia-romanenko/flutter_state_management_investigation/blob/main/readme.md

GetX

This seems to be the red rag in the community. In the world of Harry Potter, it would be compared to Voldemort. In the popularity rankings it is high up, if not on the first place when it comes to state management and dependency injection. But as far as I understand it is considered by the community as its own framework and not as an extension for Flutter. It uses completely different approaches and thus hides much of the Flutter DNA.

Dependency Injection

As a .NET and Angular developer, I am very familiar with Dependency Injection and use it extensively. So I was rather surprised that there is no solution in the framework out of the box. Again, there are many options and packages. Some even do without Dependency Injection and use singletons or instantiate classes directly. But new is glue and it makes it difficult to write tests.

Riverpod already brings a lot with Provider. For the rest and for BLoC we relied on get_it from Thomas Burkhart (https://twitter.com/ThomasBurkhartB).

Router

Not so long ago Flutter released a new Navigator 2.0. It offers a new declarative API and was received controversially by the community. It is said to be very complicated and hard to learn. (As far as I know you can use Navigator 1.0 together with Navigator 2.0).

There are several packages that aim to make the usage of the new Navigator 2.0 easier. We have decided on using the go_router package. There was a new major release just a few days ago: https://pub.dev/packages/go_router

We were missing the guard functionality of the Angular router. As a hint: most of the guard logic can be implemented in the redirect block of the go_router.

Flutter on the Web

What finally moved us to work with Flutter was the possibility to publish for the web as well. Unfortunately, the implementation is quite "unconventional". Unlike Angular or React, Flutter does not produce HTML and CSS, but uses the canvas. There are two different rendering options with their advantages and disadvantages.

Some background articles on this:

Testing Flutter Web Apps

This is what I missed the most from Angular. I am a big one of integration testing in the frontend. For this I prefer to use Cypress. Cypress is unfortunately not usable with Flutter, resp. only via detours and by far not as comfortable as Angular.
With the integration_test package similar results can be achieved and hot reload seems to be possible. Unfortunately I failed there. For the current project we have also set the BLoC package and for a certain part of the state we need the hydrated_bloc package. Unfortunately at the moment it seems that no integration tests can be realized: https://github.com/flutter/flutter/issues/96939

Conclusion

The next comments are strictly my personal opinion and refer only to the web version and not to the mobile development part of Flutter.

I love Flutter's declarative widget system. The speed at which prototypes and executable MVPs can be developed, for all platforms, is impressive.

I would not, as of today, implement a complex and long-lived web application with Flutter. For an executable prototype or a small MVP to test the market, Flutter is great.

Publish a localized Angular app with Scully

Markus Huggler — Tue, 10 Nov 2020 20:50:53 +0000

Making Scully work with our localized Angular App

In the first part of the series we have localized our Angular App using the official @angular/localize. Now we need to make Scully work with our setup.

First of all, install scully, we are using the Scully schematic for this task:

ng add @scullyio/init

The --localize option when building the Angular app does creates builds for each locale and changes the baseHref of the those index.html file. Unfortunately this does stop Scully from traversing the routes correctly. To bypass this issue we set the base path back to '/' before building the Scully app. Afterwards we need to set it back and correct the paths of the static assets. Fortunately there are plugins for both latter issues. You can find a discussion on the topic Github

The first Plugin is from Sander Elias: base-href-rewrite and can be installad via npm npm install -D @scullyio/scully-plugin-base-href-rewrite

The second plugin is from Alexander Spies and you can create it directly in your project. Create a scully/plugins/fixStaticLinks.js:

const {registerPlugin} = require('@scullyio/scully');

const FixStaticLinksPlugin = 'fixStaticLinks';

const fixStaticLinksPlugin = async (html) => {
    const regex = new RegExp('(<a[^>]* href="\/)([^"]*)"', 'gmi');
    html = html.replace(regex, `$1${process.env.LOCALE}/$2"`);

    return Promise.resolve(html);
};


registerPlugin('router', 'fixStaticLinks', fixStaticLinksPlugin);
exports.FixStaticLinksPlugin = FixStaticLinksPlugin;

Then we are ready to adapt the scully.localization.config.ts file:

import {baseHrefRewrite} from '@scullyio/scully-plugin-base-href-rewrite';
import {ScullyConfig, setPluginConfig} from '@scullyio/scully';

const {FixStaticLinks} = require('./scully/plugins/fixStaticLinks');

const defaultPostRenderers = [baseHrefRewrite, FixStaticLinks];
setPluginConfig(baseHrefRewrite, {href: `/${process.env.LOCALE}/`});

export const config: ScullyConfig = {
    projectRoot: './src',
    projectName: 'localization',
    distFolder: `./dist/localization/${process.env.LOCALE}`,
    outDir: `./dist/static/${process.env.LOCALE}`,
    puppeteerLaunchOptions: {args: ['--no-sandbox', '--disable-setuid-sandbox']},
    defaultPostRenderers,
    routes: {}
};

We have registered both renderer plugins in the config. We have also added the distFolder and we are using an Environment variable for constructing the file system paths.

Let's put everything together. Here is a Bash script that replaces the base href of the index.html files (/de/ -> /) and then runs Scully for both locales.

#!/bin/bash

languages=(en de)

for language in "${languages[@]}"
do
    index_file="dist/novaloop-ch/$language/index.html"
    echo "Replace base href for $language in $index_file"
    sed -i -e 's/"\/'$language'\/"/"\/"/g' $index_file
    echo "Build scully for $language"
    LOCALE=$language npm run scully
done

cp htaccess.file dist/static/.htaccess

The last line is only needed if you publish to an Apache server and want some redirect magic. The htaccess.file reads as follows:

RewriteEngine On

RewriteRule ^de$ /de/home/ [L]
RewriteRule ^en$ /en/home/ [L]
RewriteRule !^[a-z]{2}/ /de%{REQUEST_URI} [L,R=302]

The full source code of the sample project can be found on Gitlab

There is also a bash script (and a Docker file) for starting and testing the Scully build with an Apache server in Docker.

Localize an Angular App

Markus Huggler — Mon, 09 Nov 2020 22:25:34 +0000

Localize an Angular app and Publish it with Scully

We want to create a localized Angular App and then publish it with Scully. The first hurdle was the localization of the Angular App. In particular, we want to extract the translations and merge them with the already translated phrases.

xliffmerge comes in handy for this. You can install it with the ngx-i18nsupport package.

The first part of the series covers the localization of the Angular app.

There is an example repository.

Localize the Angular

Localize your Angular app using the offical Angular.io Docs:
https://angular.io/guide/i18n

ng add @angular/localize

Edit the angular.json file.

{
  ...
  "projects": {
    "<project-name>": {
      "i18n": {
        "sourceLocale": "de",
        "locales": {
          "en": "src/locales/messages.en.xlf"
        }
      }
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": { 
              ... 
              "localize": true,
              ...
            },
            "de": {
              "localize": ["de"]
            },
            "en": {
              "localize": ["en"]
            }
          }
        },
        "serve": {
          ...
          "configurations": {
            ...
            "de": {
              "browserTarget": "<package-name>:build:de"
            },
            "en": {
              "browserTarget": "<package-name>:build:en"
            }
          }
        }
      }
    }
  },
  ...
}

We add German as the default language (messages.xlf) and English as the second translated language (messages.en.xlf). Don't forget to add the localize flag to the production configuration. Otherwise you will have to specify the flag on each build.

Extract and subsequent merge of messages file

npm install ngx-i18nsupport

Add the following scripts to package.json

{
   ...
   "scripts": {
     ...
     "extract-i18n": "ng xi18n <project-name> --output-path src/locales && xliffmerge",
     "xliffmerge": "./node_modules/ngx-i18nsupport/dist/xliffmerge"
   },
   "xliffmergeOptions": {
        "srcDir": "src/locales",
        "genDir": "src/locales",
        "defaultLanguage": "de",
        "languages": [
            "en"
        ]
    },
   ...
}

Extract and translate the strings

You can now extract the strings with npm run extract-i18n.
It will generate two files using the above configuration:

src/locales/messages.xlf
src/locales/messages.en.xlf

We are using poedit to edit our strings and therefore added a npm script:

"translate-en": "poedit src/locales/messages.en.xlf",

Run the Angular App in English

ng serve --configuration=en

Build the Angular App

ng build --prod

Builds the app for both languages dist/<project-name>/<language>

What's next

We want to use Scully to build the website statically for both languages. It was not easy but I think we did it. This will be the next part of the series.

Complex Configuration in Cypress.io

Markus Huggler — Tue, 14 May 2019 18:15:55 +0000

In our setup, multiple sites are deployed with the same code base. So it would make sense to reuse a lot of the testing code for all sites.

To achieve this we decided to reuse the same Docker container and provide the needed configuration variables via the entrypoint script.

We have a config Folder in the cypress Folder and are building the final configuration file together from all the pieces.

To do so we use the index.js file in the pluginsfolder:
(we also installed the merge-json npm package)

const fs = require('fs-extra');
const mergeJSON = require('merge-json');
const path = require('path');


async function getConfigurationByFile(division, environment, locale) {


    let defaultConfig = {
        "env": {"localePrefix": locale}
    };

    const filePaths = [
        path.resolve(`cypress/config/${division}`, 'defaults.json'),
        path.resolve(`cypress/config/${division}`, 'pages.json'),
        path.resolve(`cypress/config/${division}`, 'seo.json'),
        path.resolve(`cypress/config/${division}`, `env-${environment}.json`)
    ];

    for (let filePath of filePaths) {
        const config = await fs.readJson(filePath);
        if (config.env) {
            Object.keys(config.env).forEach((key) => {
                config.env[key] = JSON.stringify(config.env[key]);
            });
            defaultConfig = mergeJSON.merge(defaultConfig, config);
        }
    }

    return new Promise((resolve, reject) => {
        resolve(
            defaultConfig
        );
    })
}

module.exports = (on, config) => {
    const division = config.env.division;
    const environment = config.env.environment;
    const locale = config.env.locale;

    return getConfigurationByFile(division, environment, locale);
};

Cypress does only allow to store key / value pairs env of the config. Therefore we apply JSON.stringify() on them and later on in the spec file we parse them back to JSON objects JSON.parse(Cypress.env('<env_key>'))

We have configured our Cypress.io Test Suite with Gitlab CI/CD. The pipeline can be triggered manually for the production and for the staging environemnt and is run automatically once a day.

Need more details?

Please let us know if you are interested in more details!

One Docker Image to Rule them All

Markus Huggler — Tue, 14 May 2019 16:35:18 +0000

We have a website with multiple divisions. We want to reuse the same docker image for all the divisions.

First approach was to load the configuration dynamically from a server (depending on the ENV variables in the image). This would mean that every client will have to send the request and that the configuration server's uptime is crucial.

We are now using variables in the environment.ts file, eg:

export const environment = {
  ...
  url: 'https://__DOMAIN__',
  ...
}

We then have an entrypoint.sh script for the docker which can be called with arguments and replaces the strings in the application.

#!/bin/bash

DOMAIN="$1"

for filename in dist/**/*.js; do
    if [[ $filename =~ "main" ]]; then
        sed -i -e 's/__DOMAIN__/'$DOMAIN'/g' $filename
    fi
done

...

pm2-runtime start pm2.json --web

The image is used in a Kubernetes deployment:

...
  spec:
    containers:
      - image: <image-repo>
        args: ["www.ecologic.ch"]  
...

envsubst would also be a possibility. You would then use ENV variables in the environmentfiles and use envsubst in the entrypoint script. In the kubernetes deployment you would then add env vars instead of args.

Need more details?

Please let us know if you are interested in more details!