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 notifications@github.com
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> .