Feedback: Your First App

[timwis]

I'd like to leave this issue here for readers to post feedback about the "Your First App" tutorial. I'm particularly interested in the things that you have to re-read 3 times because it didn't make sense the first two times, or concepts that may have been taken for granted.

Let me know if there's a preferred venue for this kind of feedback than a GH issue.

[perguth]

Maybe also of interest: Those two passages gave me additional insight over the official documentation.

Effects are similar to reducers except instead of modifying the state they cause side effects by interacting servers, databases, DOM APIs, etc.

When you call send(), it looks for both reducers and effects with the name of the action.

Both from Your first app.

[MelissaKaulfuss]

Hi 👋 Firstly, thanks for taking the time to do this! I haven't yet used choo but I want tooooo. I'm a noob who also has a new computer – so, I run the npm init command and nothing. I mean I know I have to go and download npm or something I guess, but I was wondering how n00b are you expecting people to be? If you'd like to walk them through all the steps perhaps I can help by submitting a pull request with the things I had to do?

[timwis]

Hi @MelissaKaulfuss, thanks for the feedback! You've raised a good question, and I'm not 100% sure if the answer. Perhaps we could link to the npm docs, or a separate mini article (like an appendix) or perhaps we should decide our target reader may not have npm installed.

I'd certainly welcome help on any of the above. In the meantime, I usually point people to c9.io, a website that gives you a full Linux VM in the cloud with a code editor on it. It comes with node and npm installed. Alternaticely the nodejs docs probably have the best info on installing.

Another alternative is to use the bundled version of choo, which is just a script tag, no node required, though then we'd have to pull in extend too.

[hugozap]

I just read the tutorial. The only thing that was not clear to me was finding the 'onload' event on a div tag here

Next we'll trigger the getTodos effect when our view is first loaded by adding an onload attribute in our DOM tree.

<div onload=${() => send('getTodos')}>

I'm not sure if that makes reference to a DOM event (not familiar with using onload on divs) , or a choo lifecycle event. Maybe adding a note with some clarification helps.

[mickeyvip]

Reading through the tutorial.

The tagged template literals was a new thing for me - pretty cool!

I have a small refactoring suggestion for addTodo() method, more es2015/6-ish:

current:

addTodo: (data, state) => {
  const newTodos = state.todos.slice()
  newTodos.push(data)
  return { todos: newTodos }
}

suggested:

addTodo: (data, state) => 
  ({ todos: [...state.todos, data] })

making it a one-liner.

Thank you

[mickeyvip]

Is removing of Todo left out intentionally to encourage the reader to try to implement it her/him-self?

(It was very easy to add).

[mickeyvip]

We could get away without xtend, but using Object.assign.

const newTodo = extend(oldTodo, data.updates);

const newTodo = Object.assign({}, oldTodo, data.updates);

[hugozap]

@mickeyvip Not sure if adding more dependencies to ES6 features is a good idea for the handbook. In the choo docs they state that the only ES6 things needed are const, fat arrows and templated-strings which can be backported with ES2020. Using additional ES6 constructs may confuse beginners who think that ES2020 is enough.

[mickeyvip]

@hugozap , ES6 is used in the book, so I figured one might use more of its features.

If I understand correctly, budo uses babelify so the code is transpiled to ES5(?).

With that I totally understand the decision to stick to more ES5 compliant code.

Thank you.

[timwis]

Hey folks just wanted to say thanks so much for your feedback! I've just added a link to npm in the docs, and I called out the onload attribute a little more clearly. Regarding the ES6 syntax, believe it or not I used the spread operator and Object.assign initially, as that's what I use personally, but @yoshuawuyts made a good point that for those who aren't familiar with those new features, it can be a bit overwhelming - the tutorial should only try to teach them choo, not choo + a bunch of new JS concepts, which I'd agree with. But thanks for the suggestion - I'd certainly welcome any more!

[markbrown4]

Really enjoyed both chapters of the handbook so far, keep it up!

A couple of typos:

• completed: false }
• by interacting with servers

[malonehedges]

I was able to follow the tutorial but didn't realize that the updateTodo reducer was removed before the end. Spent a fair amount of time trying to figure out what was going wrong. Otherwise, super easy to follow! 👍

[yoshuawuyts]

Heya, thanks for the feedback! - Could you perhaps create a PR for this? -
heaps thanks ✨

On Fri, Nov 18, 2016 at 5:27 AM Malone Hedges [email protected]
wrote:

I was able to follow the tutorial but didn't realize that the updateTodo
reducer was removed before the end. Spent a fair amount of time trying to
figure out what was going wrong. Otherwise, super easy to follow! 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#12 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACWleth25JjtCF8z8i_FJv6jtnkPipwpks5q_SkegaJpZM4JEW7Q
.

[nlopin]

Hi! Thanks for nice handbook. I've just played with it on my Mac and choo 4.0.1 and have faced with some obstacles.

I had to replace suggested code for router:

app.router((route) => [
  route('/', view)
])

to

app.router([
  '/', mainView
])

since the suggested one failed with error "AssertionError: sheet-router: tree must be an array

Then I have had to replace reducer functions arguments order from (data, state) to (state, data).

If this changes were correct, I'll be glad to make an update to the documentation.

[yoshuawuyts]

Heya, yeah this changed in choo v4 - I'm sure the guide should be updated, a PR would definitely be welcome! :D

…

On Fri, Dec 16, 2016, 21:36 Nikolai Lopin ***@***.***> wrote: Hi! Thanks for nice handbook. I've just played with it on my Mac and choo 4.0.1 and have faced with some obstacles. I had to replace suggested code for router: app.router((route) => [ route('/', view) ]) to app.router([ '/', mainView ]) since the suggested one failed with error "AssertionError: sheet-router: tree must be an array Then I have had to replace reducer functions arguments order from (data, state) to (state, data). If this changes were correct, I'll be glad to make an update to the documentation. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWleqZ1G2Dz0DvkNFHUSfTC2IvDb-zMks5rIvZmgaJpZM4JEW7Q> .

[timwis]

The v4 changes should all be in there now, but please let us know if we've missed anything else, thanks!

[yoshuawuyts]

Nice, thanks Tim 🙏🎉

…

On Tue, Dec 20, 2016, 12:33 Tim Wisniewski ***@***.***> wrote: The v4 changes should all be in there now, but please let us know if we've missed anything else, thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWleh0CxiVjyIKgnmTGu6ELa6tts8qIks5rJ70XgaJpZM4JEW7Q> .

[JRJurman]

Hi, loving choo already, but your guide switches it's parameters order around in the guide!
In the first section of "Effects", getTodos is written like this:

getTodos: (state, data, send, done) => {

But then it switches around after the localStorage code:

getTodos: (data, state, send, done) => {

[JRJurman]

Actually, looking deeper now, the parameters are all over the place... There's even a line that looks like this:

getTodos: (state, state, send, done) => {

[timwis]

Hm, it looks like those have all been fixed in the code, but not reflected in the gitbook. @yoshuawuyts, does this repo have automated deploys working?

[yoshuawuyts]

Those might have stopped working - think I got ahead of myself with setting up handbook.choo.io hah

…

On Tue, Jan 17, 2017, 11:54 Tim Wisniewski ***@***.***> wrote: Hm, it looks like those have all been fixed in the code, but not reflected in the gitbook. @yoshuawuyts <https://github.com/yoshuawuyts>, does this repo have automated deploys working? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWlej-NwwU9U6EHB7NV7wEiflFgKgAVks5rTJ3NgaJpZM4JEW7Q> .

[rbiggs]

I dunno. To me this makes no sense. You never describe how to set up a project: package.json? npm install? What are the dependencies? How do you build it? etc.

[JRJurman]

@rbiggs in the boilerplate section, there's an npm init --yes which creates a package.json, and then npm install --save choo which adds the dependency.

The build step is listed in the end of the rendering data section. What details were you expecting in the tutorial?

[idkjs]

Does the order of the params matter? Seems like they are ordered differently at the top before the refactor and work fine. Then at then end, if you keep that order, app stops showing the names in the DOM. when I switched data, state, to state data, the app functioned correctly. Is there something about the refactor that makes it so we have to change the order of the params in the reducers?

Thank you.

[JRJurman]

@idkjs it's a known issue. If you look at the source, you can see what it should look like.
https://github.com/yoshuawuyts/choo-handbook/blob/master/content/core-your-first-app.md

[idkjs]

@JRJurman I had it working already. Just wondering what was going on with that. You said its known issue? What is the known issue? Is there an issue feed I can read?

Thanks!

[JRJurman]

@idkjs if you look at the messages above, it's something I brought up a few weeks ago. #12 (comment)

I don't know what progress has been made since then...

[jjenzz]

Really enjoying playing with choo!

Something I noted while following the handbook was that it might be worth mentioning that void elements must be self-closed and the reasoning behind it. I was following along but had:

    <input type="checkbox" ${todo.completed ? 'checked' : ''}> ${todo.title}

This became <input type="checkbox">foo</input> so my title wasn't rendering and took me a moment to realise why.

[yoshuawuyts]

@jjenzz thanks for the feedback! - we'll probably be redoing a bunch of these tutorials for the upcoming choo v5 (yay, wayyy less things to learn!) and we should totes also mention the self-closing element gotcha. Thank you! :D