DEV Community: Mats Pfeiffer

Develop Flutter in a VS Code devcontainer

Mats Pfeiffer — Sat, 22 Aug 2020 18:59:50 +0000

In the last post I wrote about a docker image which let you use Flutter without local installation.

Let docker flutter for you

Mats Pfeiffer ・ May 15 '20

In this post we want to get this idea further and use the VS Code remote extensions which let us open a local directory in a docker container.

All we have to do is to first install the extension. Create an empty directory or if you have an existing Flutter project add this file to your project. But be sure to use a Dart conform name like flutter_app not flutter-app:

.devcontainer/devcontainer.json



{
  "name": "Flutter",
  "image": "matspfeiffer/flutter:beta",
  "extensions": ["dart-code.dart-code", "dart-code.flutter"]
}

Now you have to reopen the currect directory in the container:

Doing this the first time could take a few minutes because docker is pulling the image in the background which depends on your connection speed. Once the container build and startup is finished your project is mounted in the container.
When you started with an empty project, we will now create a new Flutter project - you can use the VS Code Flutter extension or use the shell like I prefer. Therefore just open a new terminal and execute the following command:

To debug the app as web application you will need Chrome and this extension. After installing that please navigate to lib/main.dart and press F5. This will launch a new browser tab and you have to click the Dart debug plugin to finally open the app.

UPDATE:

If you want to use an android emulator device follow the VScode devcontainer advices in the README. Their is no real good and performant solution when you want to support all operating systems. Linux users have some advantages because they can forward the X11 system & KVM to the container. The best working solution for MacOS and Windows is to use an emulator devices running natively on the host.

If you have a better idea for a performant solution feel free to leave a comment or create an issue at Github.

Additional links

Let docker flutter for you

Mats Pfeiffer — Fri, 15 May 2020 20:21:11 +0000

After installing the Flutter and Android SDK several times on different machines I always ended up with a broken setup where some part of the puzzle was not working anymore.

I decided to improve this situation but wanted no limitations compared to a local installation. So the image must be able to execute Flutter in my current host directory, start an emulator and hot reload the app and let me test Flutter for Web.

This is what I've come up with:

matsp / docker-flutter

flutter docker image with full android sdk

and support the following features:

Use Flutter commandline tool
Start an emulator and hot reload the app on it (with hardware accerlation)
Serve Flutter app as Web app

On my machines I setup some aliases to transparently map a docker run command. Executing Flutter in the image feels just as executing it locally.

For me the best feature is a predictable behavior on all my machines with no traces. With two commands you will have the flutter example app up and running.



docker run --rm -e UID=$(id -u) -e GID=$(id -g) --workdir /project -v "$PWD":/project matspfeiffer/flutter create .

xhost local:$USER && docker run --rm -ti -e UID=$(id -u) -e GID=$(id -g) -p 42000:42000 --workdir /project --device /dev/kvm --device /dev/dri:/dev/dri -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY -v "$PWD":/project --entrypoint flutter-android-emulator  matspfeiffer/flutter

I agree - the commands are not looking very friendly - but mapped with an alias it's just like:



flutter create .
flutter-start-emulator

I am using Linux as my operating system which could mean that there are bugs for MacOS and Windows. Especially forwarding the X system and qemu accerlation could be an interesting task under Windows and MacOS. I already read that it is possible but I could need help with testing it. A

If your are interested feel free to test the image and issue bugs. I would really appreciate any support to make this image usable for everyone who want's to start with Flutter.

So hopefully we hear again in the comments or at Github!

UPDATE:

Checkout the README to read about solutions for Windows and MacOS users as well!

Composition in concave

Mats Pfeiffer — Wed, 19 Jun 2019 20:25:45 +0000

This is a cross-post from my blog.

Composition of components in concave is different to other component based frameworks or compilers. In concave you don't compose entire components you just compose render functions which will return HTML.

Example

I have created a simple Todo App to show you some code.

Both imports list and listItem are just functions that return HTML. Arrays will be automatically joined by the html function for less code in your template.

Pro and contra

I created concave to have a simple framework which isn't hiding complex tasks from me. What I want is to have simple and understandable code without "magic". With template composition I can concentrate on how I want to transform data and show it to my users. With other frameworks you have the ability to have e.g. child components and communicate with them, but this is getting more complex with more components you introduce.

On the other side it's harder to isolate common code in components e.g. lazy-loading of data. That's for sure easier with popular frameworks like React. It's not impossible to do it concave - did it on my portfolio - but it needs more experience to figure out how things are working in concave. At the end it's just JavaScript!

Conclusion

Components in concave are little bit different to other frameworks when you are familiar with the concept. In concave components are composing render functions and render them with props and state. In my opinion the reusability of render functions is a lot better than entire components because I don't need to think of the internals of this components. If you need component-to-component communication you can dispatch an action and react on that with an actionReducer in another component.

Spreading pipelines of components

Mats Pfeiffer — Wed, 15 May 2019 18:02:29 +0000

This post is a cross-post from my blog.

... to your browser like a concave lense will spread light rays. Keep this sentence in your mind and come back here after the post.

If you are now wondering what the hell I am talking about, you are absolute right. With this sentence I want to explain the main concept of my idea of building a Single Page Application with concave - a tiny JavaScript UI framework.

Another JavaScript UI framework?

Yes... feel free to leave this post before even reading it, because this is the main pattern in nowadays tech arguments. Everything nowadays must be build with one of the top leading UI frameworks / libraries. There is a lot of hype around the major ones and it's clear why: Generating money with complexity. There are courses, videos, tutorials, workshops, conferences, podcasts, youtube channels and so on. People earn money to explain the concepts behind because there are some times so many that not every employee can follow up. It's okay for me that this industry exists, but I'm not okay with blindly following or advertising one golden approach which will lead to complexity in the wrong field. What I'm seeing a lot on the web platform is that people first choose the tool and afterwards adapting the problem they are facing to fit it.

My motivation

I'm a person that is really into performance optimization and tries to get the most out of something. The funny thing is, that I ingored that deep motivation in me and was really surprised by the result at the end. I wanted to create something simple with just a few easy understandable concepts. The framework should be shipped with batteries, so that developers only need one dependency. It should be directly usable in modern browsers to allow prototyping in sandboxes. And the most important point was to just use the platform and keep a potential bundler build process as simple as possible.

"Okay okay... all this already exists!" Maybe yes, maybe not. What I wanted to build is a framework that has no dependencies and is implemented in modern vanilla JavaScript. It should have everything that I need to build a functional SPA - this means it need at least a router (builtin), eventually a store to manage you application state (builtin) and some architectural guide to structure the code in components.

I told you that I have a heart for performance on the web, so I set myself a goal to reach this in 1 KiB.

SPOILER: I missed the goal, but it's not far away.

Sometimes it's good to have an unrealistic goal because it forces you to think different and walk other ways. And isn't that exactly what I wanted to reach in the first place: Explorer new ideas to face a set of problems instead of blindly follow the mainstream.

The framework: concave

Here are some key facts about concave

Declarative - Components are powered by a ES6 template tag function to easily define templates
Reactive - Components will be updated & re-rendered automatically by state changes
Batteries included - State management & router are builtin without any dependencies
Minimal - < 1.5 KiB minimized & gzipped dependency free ESM module

Let's start with a boring Hello World:

If you want a pure browser experience try out this CodeSandbox which uses just the native ES module.

Concept

The main concept consists of a pipeline of functions which will be controlled with actions (plain JavaScript objects). If you are familiar with functional programming concepts, then you will recognize that a pipeline in concave is mostly the same as the result of a pipe function in FP.

There are the following predefined factory functions which will return ready to use pipeline functions:

createStore >> creates a store pipeline function
createRouter >> creates a router pipeline function
createRenderer >> creates a renderer pipeline function
createComponent >> creates a component pipeline function

They will be composed with createPipeline which returns a pipeline of functions. You can also compose pipelines with createPipeline if you want. This could be interesting if you want to compose different parts of your application.

With runPipeline you start your pipeline and the first action (state) will flow through the functions.

Through all of these composed functions, actions will be passed to control your application.

E.g. the state action - when a component receive this action, it will check if it need to update itself and will trigger a render action on the pipeline if neccessary.

This simple concept results in:

Unidirectional action flow >> time traveling & easy debugging
Pure components >> predictive rendering results
Single source of truth store >> only a state reducer can modify the state

Internals

Concave uses a really naive rendering approach internally. If a component uses a property that is stored in the state and this prop changes, then your whole component will be replaced by the new one. This sounds like a terrible idea doesn't it? The truth is for every example I build so far this was no problem, but I'm not a fool: This rendering approach will not scale well for real big applications with a lot of data exchange. This is okay because it's not build for that case. It's build for really fast boot up and small footprints on your asset budgets. Keep in mind that you don't have to think about why, why not, when and when not your UI will update. It's always the same behavior - naive, simple and working.

When to use concave?

Valid use cases to try out concave:

small to medium sized SPAs
static SPAs (e.g. portfolios, blogs, side projects)
Progressive Web Applications (PWAs)
bootstraping a bigger sized web application
small teams that can figure out their own architecture

Don't use concave:

SPAs with a lot of reactive data
applications with a lot of animations (re-rendering will trigger them eventually)

What's next

This post was a quick intro to concave. If you are interested in more details checkout the GitHub repository of concave where your find more information about internals.

I just started to build a portfolio of mine with concave, so feel free to check it out. I will fill more data soon, to have an idea of performance with concave.

For updates, follow-up posts or sarcastic Tweets follow me on Twitter!

Thanks for all who read the whole post till the end! It's my first post on dev.to so I will appreciate any feedback or comments :)

DEV Community: Mats Pfeiffer

Develop Flutter in a VS Code devcontainer

Let docker flutter for you

Mats Pfeiffer ・ May 15 '20

Additional links

Let docker flutter for you

matsp / docker-flutter

flutter docker image with full android sdk

Composition in concave

Example

Pro and contra

Conclusion

Links

Spreading pipelines of components

Another JavaScript UI framework?

My motivation

The framework: concave

Concept

Internals

When to use concave?

What's next

Links