Article: How to JSON with Flutter by roughike · Pull Request #773 · flutter/website

roughike · 2018-01-04T15:41:21Z

kevmoo · 2018-01-08T19:07:27Z

+
+Next,  define some build actions.
+
+#### Defining the build actions


FYI – this has been simplified a lot.

See https://github.com/dart-lang/json_serializable/tree/master/example

Great! I'll look into it and update this section.

I tried to take a quick look into it, and ran into the exact same issue that this reddit user describes in this comment.

This is reproducible on the latest Flutter version, and happens by simply following these steps:

create a new Flutter project

add the dependencies listed on the json_serializable example README you just linked

attempt to get the packages -> a long error message which states that a version ^0.7.0 for build_runner was not found.

Should I create a more detailed issue report, or is this some common issue that can be resolved easily?

We're in dependency lock, I'm pretty sure.

I think I have a path to untangle the knot (at least a bit). Follow here: google/json_serializable.dart#95

sethladd · 2018-01-08T20:36:52Z

      <li><a href="/platform-channels/">Platform-specific code</a></li>
      <li><a href="/reading-writing-files/">Read and write files</a></li>
      <li><a href="/networking/">Network and HTTP</a></li>
+      <li><a href="/json">Serializing JSON objects</a></li>


maybe more simply: "JSON and serialization"

sethladd · 2018-01-08T20:37:06Z

+permalink: /json/
+---
+
+It is hard to think of a mobile app that doesn't need to communicate with a web server at some point. When making network-connected apps, chances are that we need to consume some good old JSON, sooner or later.


global: please line break at 80 chars

sethladd · 2018-01-08T20:37:23Z

+
+It is hard to think of a mobile app that doesn't need to communicate with a web server at some point. When making network-connected apps, chances are that we need to consume some good old JSON, sooner or later.
+
+In this tutorial, we look into ways of doing JSON with Flutter. We will go over what JSON solution to use in different scenarios and why.


s/doing/using

sethladd · 2018-01-08T20:38:38Z

+
+Where the manual serialization does not perform well is when your project becomes bigger. Writing the serialization logic by hand can become hard to manage and error-prone. If you have a typo when accessing an unexisting JSON field, your code throws an error during runtime.
+
+If you do not have many JSON models in your project and are looking to test a concept quickly, manual serialization might be the way you want to start.


link down to the example section. For example: "To learn more, and to see an example, jump to ___________"

(global comment, link to each example from these intro paragraphs)

sethladd · 2018-01-08T20:39:09Z

+You might want to use generated code for JSON serialization when you have a medium or a larger project.
+
+## Is there a GSON/Jackson/Moshi equivalent in Flutter?
+


Answer the question immediately, and then provide the background :)

it's hard to tell: yes, or no

sethladd · 2018-01-08T20:40:26Z

+
+Dart has supported _tree shaking_ for quite a long time. With tree shaking, we can “shake off” unused code from our release builds. Tree shaking allows us to optimize the size of our applications significantly.
+
+While Dart users might have gotten used to [dartson](https://pub.dartlang.org/packages/dartson) to (de)serialize their JSON, it does not work with Flutter. The reason behind this is that `dartson`, like [GSON](https://github.com/google/gson) in Java, uses _runtime reflection_. In Flutter, reflection (also known as `dart:mirrors`) is disabled.


I might make this paragraph more of an aside. It's probably not relevant to most users. Can you make it an aside, and get to one sentence? e.g. "What about dartson? ____________"

sethladd · 2018-01-08T20:40:45Z

+
+## Serializing JSON manually using dart:convert
+
+Basic JSON serialization in Flutter is very simple. Dart comes with the `dart:convert` library built in, and using the JSON decoder API is straightforward.


"comes with" and "built in" are redundant

maybe: "Flutter has a built-in 'dart:convert' library, which includes a straightforward JSON encoder and decoder."

sethladd · 2018-01-08T20:42:01Z

+
+Basic JSON serialization in Flutter is very simple. Dart comes with the `dart:convert` library built in, and using the JSON decoder API is straightforward.
+
+Let's say we need to deserialize a JSON representing a user object. For sample purposes, we have a real simple JSON model.


"Here is an example JSON for a simple user." to replace the second paragraph

sethladd · 2018-01-08T20:42:53Z

+  String name;
+  String email;
+
+  User.fromJson(Map<String, dynamic> json)


should we not put the constructors together?

sethladd · 2018-01-08T20:43:00Z

+class User {
+  User(this.name, this.email);
+
+  String name;


let's make these final

sethladd · 2018-01-08T20:43:32Z

+
+```dart
+Map map = JSON.decode(json);
+User user = new User.fromJson(map);


s/User user/var user (since it's obvious

sethladd · 2018-01-08T20:43:44Z

+Now the calling code does not have to care about the serialization logic. With this new approach, we can deserialize a user quite easily.
+
+```dart
+Map map = JSON.decode(json);


is there a better variable name for map ?

sethladd · 2018-01-08T20:44:11Z

+String json = JSON.encode(user.toJson());
+```
+
+While with this new approach the calling code does not have to worry about JSON serialization at all, the model class still definitely has. In a production app, we would want to be sure that the serialization works. In practice, this means that the `User.fromJson` and `User.toJson` both need to have unit tests in place to verify correct behavior.


this first sentence was hard to parse.

sethladd · 2018-01-08T20:44:54Z

+
+The `json_serializable` package is an automated source code generator that can generate the JSON serializing boilerplate for us. 
+
+Since the serialization code is not handwritten and maintained by us anymore, we minimize the risk of having JSON serialization exceptions at runtime. If the sources are generated, and the app compiles, we should be fine.


I think this second sentence is redundant.

sethladd · 2018-01-08T20:45:31Z

Fantastic! Thank you so much.

roughike · 2018-01-09T00:03:45Z

Incorporated the first feedback round.

Waiting for @kevmoo to resolve google/json_serializable.dart#95. Once I can test the simplified way of using json_serializable, I'll update the article and ping @kevmoo for a review :)

…would degrade in readability if fixed.

sethladd · 2018-01-09T18:13:09Z

+}
+```
+
+We can run the watcher by doing `dart tool/watch.dart` in our project's root


s/doing/running

As @kevmoo said in this comment, seems like these sections are going away completely. With the new simplified version of json_serializable, there's no need for manually configuring build actions, watchers and build files. Correct me if I'm wrong.

So, should I:

wait until Fix workflow w/ flutter and json_serializable v0.3.1 google/json_serializable.dart#95 gets resolved and replace these old instructions with new ones, or:

fix these issues now, publish this article with the old instructions, then update with new json_serializable section once Fix workflow w/ flutter and json_serializable v0.3.1 google/json_serializable.dart#95 is resolved?

It's your call @sethladd. I'm fine with either way!

if google/json_serializable.dart#95 is less than a week away, then let's wait.

If it's more than a week, let's publish this article now, as long as you're OK with updating it "soon".

@kevmoo what's the ETA?

As of Flutter latest, everything seems to work – flutter/flutter@6e38b42

It's all about the very tight dependency constraints on packages in flutter & flutter_test

Pretty sure we'll want to delay the new documentation until that change is rolled to the alpha branch, which most people are using by default?

(BTW, I have not abandoned this. I would love to do as many feedback rounds as it takes to publish the article, but I'm very busy this week.)

sethladd · 2018-01-09T18:13:46Z

+```
+
+We can run the watcher by doing `dart tool/watch.dart` in our project's root
+folder. It is safe to start the watcher once and leave it running in the


please provide an example of how to run this. (it's not obvious how to use the command-line Dart VM that is bundled with Flutter.)

sethladd · 2018-01-09T18:14:21Z

+```
+
+Now we can generate all the necessary JSON serialization source files by running
+`dart tool/build.dart` in our project's root folder. While the build file is all


this assumes you have the Dart SDK installed separately from Flutter. Instead, please show how to run the command-line Dart VM that is shipped with the flutter SDK.

Here's how to do it: https://groups.google.com/forum/#!topic/flutter-dev/xoS0WSUax8Q

Hixie · 2018-01-19T22:59:12Z

Just for my own purposes (to make it easier to see what's going on when I go through all the open PRs):

This is waiting for Fix a couple of strong mode issues. flutter#14070 to roll into dev
@roughike is going to make some additional changes as well

BTW, thanks for your contributions @roughike ! Much appreciated.

Hixie · 2018-01-30T06:49:25Z

This should be unblocked now, we just rolled dev.

roughike · 2018-01-30T16:00:46Z

Great! I'm getting back to Finland in 12hours or so, I'll finish the changes once I wake up and recover from the jet lag. I'll do the "what if I decode lots of JSON and the UI lags" part as well.

kevmoo · 2018-01-30T16:19:47Z

Can confirm. With Flutter 0.0.21, you can get all of the latest/greatest build tools

…

On Tue, Jan 30, 2018 at 8:00 AM, Iiro Krankka ***@***.***> wrote: Great! I'm getting back to Finland in 12hours or so, I'll finish the changes once I wake up and recover from the jet lag. I'll do the "what if I decode lots of JSON and the UI lags" part as well. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#773 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABCimZWt1HwoVbkbsJTjXEmkU8vjNeVks5tPzyxgaJpZM4RTLlz> .

…rts of the article.

roughike · 2018-02-01T19:19:42Z

Here's what I found about the "avoiding blocking the UI when decoding lots of JSON" that we discussed in the afterparty:

a huge amount of JSON objects (really!) is required to produce any noticeable UI lag
when lifting the deserialization to an Isolate spawned by the compute function, UI doesn't lag. But this takes noticeably longer.

I guess the culprit could be passing a huge string (raw JSON) to the Isolate spawned by the compute() function, combined with the overhead of spawning a new Isolate.

See the sample project here.

roughike · 2018-02-01T19:21:55Z

I'm pretty sure no one would request 15 000 objects from a backend API at once, but they would implement paging instead.

Given my findings, should we still do the section about the "not blocking UI when deserializing"? I'm completely fine either way :)

sethladd · 2018-02-06T22:48:26Z

+---
+
+It is hard to think of a mobile app that doesn't need to communicate with a web
+server at some point. When making network-connected apps, the chances are that


server, or easily store structured data, at some point

sethladd · 2018-02-06T22:49:46Z

+
+## Which JSON serialization method is right for me?
+
+There isn't a one size fits all JSON solution for every project. 


Add a short paragraph here:

This article covers two general strategies for working with JSON:

Manual serialization and deserialization

Automated serialization and deserialization via code generation

sethladd · 2018-02-06T22:51:27Z

+us. Luckily, there is!
+
+<a name="code-generation"></a>
+## Serializing JSON using json_serializable


mention: code generation here (as we talk about it above as "code generation" and that's more what people are looking for. They don't know what json_serializable is , at this point)

For example: serializing JSON using code generation

sethladd

Overall, looks great!

A couple of small comments.

Lets address the small comments, merge this article. And then lets add a new section called "working with JSON on another thread"

Thoughts?

sethladd · 2018-02-06T22:52:47Z

cc @kevmoo to double-check the json_serializable bits of the article. we're about to commit.

roughike · 2018-02-07T14:58:45Z

Latest feedback addressed.

let's address the small comments, merge this article. And then let's add a new section called "working with JSON on another thread"

Agreed.

I was thinking of including that new section with this PR, but let's ship this as soon as this is ready. This has already been sitting one month, sorry about that :)

I'll write about that "working with JSON on another thread" in a separate PR.

roughike · 2018-02-07T20:53:38Z

Hey @sethladd and @kevmoo, would it make sense to ship a live template with the Flutter / Dart plugin to make using json_serializable even easier?

Something like this:

An even crazier idea would be having a squiggly red line under the class name saying "Code not generated yet". By pressing Alt-Enter, an option saying "Generate code for json_serializable model" would appear.

By hitting enter, the following steps would be done:

Check if the json_serializable package is declared in pubspec file. If not, add it automatically and refresh the dependencies.
Run flutter packages pub run build_runner build for the user to build the generated code.

From the user point of view, all they had to do was write "json", press enter, press Alt-Enter and now they have working json_serializable setup in their model class.

sethladd · 2018-02-07T21:09:39Z

@roughike that's really cool! I encourage you to open a new issue for that feature request. That way, we can think about how to do it for both VS Code and Android Studio.

sethladd · 2018-02-07T21:10:49Z

Other than that, thank you! LGTM from me.

Pending LGTM from @kevmoo

roughike · 2018-02-07T21:13:35Z

@sethladd What's the correct repo to open that issue? flutter-intellij would be my first guess, but don't know if it's related to Dart analysis server and just disabled on plain Dart projects. :)

kevmoo

Small tweaks, but otherwise LGTM

kevmoo · 2018-02-07T21:15:08Z

+
+<!-- skip -->
+```dart
+String json = JSON.encode(user.toJson());


toJson is not needed here. JSON.encode calls toJson for you!

kevmoo · 2018-02-07T21:15:12Z

+      : name = json['name'],
+        email = json['email'];
+
+  Map<String, dynamic> toJson() {


Would probably use => notation here.

Map<String, dynamic> toJson() => { 'name' ...

I can definitely change it, but the original reasoning for me going the long route was that dartfmt always formats it like this:

Map<String, dynamic> toJson() => { 'name': name, 'email': email, };

Which in my eyes didn't look as pretty.

kevmoo · 2018-02-07T21:15:47Z

+## Serializing JSON using code generation libraries
+
+Although there are other libraries available, in this tutorial, we use the
+[json_serializable package](https://github.com/dart-lang/json_serializable). It


Link to the package site - https://pub.dartlang.org/packages/json_serializable

kevmoo · 2018-02-07T21:17:29Z

+
+<!-- skip -->
+```dart
+String json = JSON.encode(user.toJson());


ditto about not needing .toJson() here

…zable link to be a Pub one.

kevmoo · 2018-02-07T21:35:26Z

Not a biggy either way...

…

On Wed, Feb 7, 2018 at 1:31 PM, Iiro Krankka ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In json.md <#773 (comment)>: > + +**user.dart** + + +```dart +class User { + final String name; + final String email; + + User(this.name, this.email); + + User.fromJson(Map<String, dynamic> json) + : name = json['name'], + email = json['email']; + + Map<String, dynamic> toJson() { I can definitely change it, but the original reasoning for me going the long route was that dartfmt always formats it like this: Map<String, dynamic> toJson() => { 'name': name, 'email': email, }; Which in my eyes didn't look as pretty. :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#773 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABCissPH5r5QY0bL8728uMbY-nfRclVks5tShYZgaJpZM4RTLlz> .

sethladd · 2018-02-07T22:25:31Z

@roughike please open the issue here (flutter/flutter/issues) as it is a general request that spans many parts of the system.

Are we ready to merge? Anything else to add , @roughike ?

roughike · 2018-02-07T22:33:28Z

I'm ready to merge. I'll create the issue tomorrow and open a new PR about "serializing JSON on a separate thread" when I can!

sethladd · 2018-02-07T22:45:01Z

Nice, thanks!

Initial draft for the JSON article.

d7f048d

googlebot added the cla: yes Contributor has signed the Contributor License Agreement label Jan 4, 2018

roughike mentioned this pull request Jan 4, 2018

Request for a "How to JSON with Flutter?" article flutter/flutter#13520

Closed

kevmoo reviewed Jan 8, 2018

View reviewed changes

sethladd reviewed Jan 8, 2018

View reviewed changes

Comment thread json.md Outdated

class User {

User(this.name, this.email);

String name;

Copy link
Copy Markdown

Contributor

sethladd Jan 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's make these final

sethladd reviewed Jan 8, 2018

View reviewed changes

Iiro Krankka added 2 commits January 9, 2018 01:49

First feedback iteration & small fixes that came up.

cfa4f0f

Proper line breaks.

c1cb821

Iiro Krankka added 2 commits January 9, 2018 02:15

Skipping validations for code samples that need extra dependencies / …

e125878

…would degrade in readability if fixed.

Yet another attempt of fixing a failing Travis build.

1df3fb3

roughike changed the title ~~[WIP][General review only] - Article: How to JSON with Flutter~~ [WIP] - Article: How to JSON with Flutter Jan 9, 2018

sethladd reviewed Jan 9, 2018

View reviewed changes

Simplified json_serializable section & minor improvements to other pa…

eb05678

…rts of the article.

Formatting.

492720b

roughike changed the title ~~[WIP] - Article: How to JSON with Flutter~~ Article: How to JSON with Flutter Feb 2, 2018

sethladd reviewed Feb 6, 2018

View reviewed changes

Incorporate latest feedback

9bb581a

Added a mention about the JSON tutorial in the FAQ.

becf677

kevmoo approved these changes Feb 7, 2018

View reviewed changes

Removed redundant toJson() instructions and switched the json_seriali…

ac3d560

…zable link to be a Pub one.

Switched to arrow notation for more compact toJson() method.

fd48345

sethladd merged commit d853586 into flutter:master Feb 7, 2018

roughike deleted the json-tutorial branch March 5, 2018 11:46


		Next, define some build actions.

		#### Defining the build actions


		It is hard to think of a mobile app that doesn't need to communicate with a web server at some point. When making network-connected apps, chances are that we need to consume some good old JSON, sooner or later.

		In this tutorial, we look into ways of doing JSON with Flutter. We will go over what JSON solution to use in different scenarios and why.


		Where the manual serialization does not perform well is when your project becomes bigger. Writing the serialization logic by hand can become hard to manage and error-prone. If you have a typo when accessing an unexisting JSON field, your code throws an error during runtime.

		If you do not have many JSON models in your project and are looking to test a concept quickly, manual serialization might be the way you want to start.

		You might want to use generated code for JSON serialization when you have a medium or a larger project.

		## Is there a GSON/Jackson/Moshi equivalent in Flutter?


		Dart has supported _tree shaking_ for quite a long time. With tree shaking, we can “shake off” unused code from our release builds. Tree shaking allows us to optimize the size of our applications significantly.

		While Dart users might have gotten used to [dartson](https://pub.dartlang.org/packages/dartson) to (de)serialize their JSON, it does not work with Flutter. The reason behind this is that `dartson`, like [GSON](https://github.com/google/gson) in Java, uses _runtime reflection_. In Flutter, reflection (also known as `dart:mirrors`) is disabled.


		## Serializing JSON manually using dart:convert

		Basic JSON serialization in Flutter is very simple. Dart comes with the `dart:convert` library built in, and using the JSON decoder API is straightforward.


		Basic JSON serialization in Flutter is very simple. Dart comes with the `dart:convert` library built in, and using the JSON decoder API is straightforward.

		Let's say we need to deserialize a JSON representing a user object. For sample purposes, we have a real simple JSON model.


		The `json_serializable` package is an automated source code generator that can generate the JSON serializing boilerplate for us.

		Since the serialization code is not handwritten and maintained by us anymore, we minimize the risk of having JSON serialization exceptions at runtime. If the sources are generated, and the app compiles, we should be fine.


		## Which JSON serialization method is right for me?

		There isn't a one size fits all JSON solution for every project.

Conversation

roughike commented Jan 4, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

roughike Jan 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sethladd commented Jan 8, 2018

Uh oh!

roughike commented Jan 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hixie commented Jan 19, 2018

Uh oh!

Hixie commented Jan 30, 2018

Uh oh!

roughike commented Jan 30, 2018

Uh oh!

kevmoo commented Jan 30, 2018 via email

Uh oh!

roughike commented Feb 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

roughike commented Jan 4, 2018 •

edited

Loading

roughike Jan 8, 2018 •

edited

Loading

roughike commented Jan 9, 2018 •

edited

Loading

roughike commented Feb 1, 2018 •

edited

Loading

roughike commented Feb 1, 2018 •

edited

Loading

roughike commented Feb 7, 2018 •

edited

Loading

roughike commented Feb 7, 2018 •

edited

Loading