Feature mongo async #16

Grubba27 · 2022-09-06T00:36:32Z

This PR is about updating the tutorial to start using the mongo API introduced in Meteor 2.8

This reverts commit eaa14bb.

This reverts commit b2c7380.

henriquealbert

Make sure to test with Cordova on iOS and Android. If all tests are okay, we are good with this one :)
Don't forget to bump the Meteor version too

tutorial/changelog.md

Grubba27 · 2022-09-08T12:21:43Z

Awesome! when next version is out I will bump & merge :)

zodern · 2022-09-09T17:46:44Z

src/simple-todos/step07/imports/ui/App.svelte

@@ -22,22 +21,19 @@
    const pendingOnlyFilter = { ...hideCompletedFilter, ...userFilter };


-    tasks = user
+    getTasks = user


I'm wondering if it is better to use the sync Mongo api in Svelte components. I am planning to do that in my projects. The async api adds a lot of complexity here, but doesn't seem to have any benefits. Meteor will not be able to remove the sync Mongo api from the client for a long time if ever since there are too many places it is used that only support sync code.

Yeah. I thought a bit about this, but I also liked using promises with Svelte. Guess I could show that it can be used both ways. Using promises feels like when we are creating UI in other places (Svelte /SvelteKit).
Don't know what to do when the release is launched. What is your opinion @zodern?

The async api seems unnecessary since the client isn't waiting for anything. It works the same as the sync api, but you now have to wait for the promise to resolve.

It isn't uncommon to run a query, and then use the results within the same or another reactive/tracker statement. With the async api it isn't easy to do. This is a larger problem because you can't use Tracker.autorun in all of the places svelte's normal dependency tracking works, so how you would normally handle this in svelte might not work with Meteor. I'm looking into how we can allow using Tracker.autorun with @const tags, which will partially help with this.

Another minor thing is using #await encourages creating a loading state, but it will never be shown since the promise should resolve before Svelte updates the DOM. If I am wrong and the loading state is briefly shown each time the promise is re-created then that could be a performance and UX problem.

I looked into it a little more, and it seems every time the promise is re-created, svelte removes all the DOM from the {:then} block, creates the DOM for the loading state, and then in the next micro task removes the DOM for the loading state and recreates the {:then} block.

I created an example in the svelte REPL to show this: https://svelte.dev/repl/c398061483f247b9a77bf767c6d3ab40?version=3.50.1
To make it easier to see what is happening, I added a fade transition to the loading and {:then} blocks.

Without a transition, I'm not able to find a way for the loading state to ever be visible. The browser should run all micro tasks before updating the UI, so it should be impossible for it to ever be visible.

I've seen it now. Not sure what to do. Perhaps In the tutorial use?

{#await promise then value} <p>the value is {value}</p> {/await}

At some point, those Database methods will be async (if I understood correctly here).
what would you say is the best way to handle this matter then?

That would be a less verbose way of doing it. Another option is to do something like:

let tasks = []; $m: { Tasks.find().fetchAsync().then(value => tasks = value); }

This would be significantly more efficient compared to #await when the data frequently changes, and allow you to use the data in other reactive or tracker statements.

At some point, those Database methods will be async (if I understood correctly meteor/meteor#12028).
what would you say is the best way to handle this matter then?

The sync api will stop working on the server when Fibers are unavailable, but the plan is to keep it on the client, possibly forever, since there are too many places that can only use the sync api including Blaze helpers and Tracker.autorun.

zodern · 2022-09-09T17:50:58Z

src/simple-todos/step12/imports/ui/App.svelte

+      getTasks = user
+        ? TasksCollection.find(
+          hideCompleted ? pendingOnlyFilter : userFilter,
+          { sort: { createdAt: -1 } }
+        ).fetchAsync()
+        : [];

-        incompleteCount = TasksCollection.find(pendingOnlyFilter).count();
-
-        pendingTasksTitle = `${
-          incompleteCount ? ` (${incompleteCount})` : ''
-        }`;
+      getCount = user
+        ? TasksCollection.find(pendingOnlyFilter).countAsync()
+        : 0;


These two ternaries are unnecessary since it checked if there is a user on line 22

zodern · 2022-09-09T18:00:00Z

tutorial/simple-todos/02-collections.md

@@ -62,13 +64,15 @@ Now comes the fun part, you will render the tasks saved in our database. With Sv

 On your file `App.svelte`, import the `TasksCollection` file and, instead of returning a static array, return the tasks saved in the database. Let's use an extension of the Svelte's [$ reactive statements](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive) feature, to maintain your tasks, called [$m](https://github.com/zodern/melte#tracker-statements):

+Because it is an asynchronous function, we need to use the `#await` keyword to wait for the data to be fetched from the database. More information about how Svelte handles asynchronous values can be found [here](https://svelte.dev/docs#template-syntax-await).


It is easy to misunderstand this as meaning it waits for the data to be fetched by the server. Instead, fetchAsync will almost immediately resolve with whatever data the client currently has, and when the data changes a new promise will be created that resolves with the new data.

So this paragraph is misleading? I thought that this could be a good way to show how to handle these cases

It is a good explanation. It maybe just needs to clarify what is meant by wait and the database. When I first read it, I thought it was saying it was waiting for the complete set of data to be retrieved from the server. Part of the confusion might also be from that is what promises are usually used for, and what the promise is for here is different (fetchAsync isn't waiting for anything to happen. The only reason it returns a promise is to be consistent with the server).

zodern · 2022-09-09T18:04:28Z

tutorial/simple-todos/03-forms-and-events.md

@@ -111,7 +111,8 @@ All that is left now is to make one final change: we need to show the newest tas
 ```html
 <script>
  ..
-  $m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch()
+  let getTasks;


This line isn't needed. Svelte (or in this case, zodern:melte since it is a tracker statement) will inject the variable declaration for you when compiling the file (https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive)

zodern · 2022-09-09T18:04:52Z

tutorial/simple-todos/04-update-and-remove.md

-      $set: { isChecked: !task.isChecked }
-    });
+  const toggleChecked = async () => {
+      // Set the checked property to the opposite of its current value


this should be isChecked instead of checked

Grubba27 added 14 commits September 5, 2022 21:28

chore: updated step02

466b078

chore: updated step03

c4239b8

chore: updated step04

62fdfda

chore: updated step05

ae03ef7

chore: updated step06

b41c21c

chore: updated step07

5598742

chore: updated step08

accd5da

chore: updated step09

fc56dbd

chore: updated step10

bf8a4b6

chore: updated step11

b34b926

chore: updated step12

c43c525

chore: updated change log featuring new Mongo API

eaa14bb

Revert "chore: updated change log featuring new Mongo API"

b2c7380

This reverts commit eaa14bb.

Revert "Revert "chore: updated change log featuring new Mongo API""

f2ad5a0

This reverts commit b2c7380.

Grubba27 requested review from henriquealbert and denihs September 6, 2022 00:38

henriquealbert approved these changes Sep 7, 2022

View reviewed changes

tutorial/changelog.md Outdated Show resolved Hide resolved

fix: adressed comments

2a4cfa8

zodern reviewed Sep 9, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature mongo async #16

Feature mongo async #16

Grubba27 commented Sep 6, 2022

henriquealbert left a comment

Grubba27 commented Sep 8, 2022

zodern Sep 9, 2022

Grubba27 Sep 9, 2022

zodern Sep 9, 2022

zodern Sep 10, 2022

Grubba27 Sep 12, 2022

zodern Sep 12, 2022

zodern Sep 9, 2022

zodern Sep 9, 2022

Grubba27 Sep 12, 2022

zodern Sep 12, 2022

zodern Sep 9, 2022 •

edited

Loading

zodern Sep 9, 2022

		@@ -62,13 +64,15 @@ Now comes the fun part, you will render the tasks saved in our database. With Sv

		On your file `App.svelte`, import the `TasksCollection` file and, instead of returning a static array, return the tasks saved in the database. Let's use an extension of the Svelte's [$ reactive statements](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive) feature, to maintain your tasks, called [$m](https://github.com/zodern/melte#tracker-statements):

		Because it is an asynchronous function, we need to use the `#await` keyword to wait for the data to be fetched from the database. More information about how Svelte handles asynchronous values can be found [here](https://svelte.dev/docs#template-syntax-await).

Feature mongo async #16

Are you sure you want to change the base?

Feature mongo async #16

Conversation

Grubba27 commented Sep 6, 2022

henriquealbert left a comment

Choose a reason for hiding this comment

Grubba27 commented Sep 8, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zodern Sep 9, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zodern Sep 9, 2022 •

edited

Loading