JS101 session 01 November 2016 - Code review, React-Redux

[katjad]

Oh dear, I first started a separate issue on the code review, but deleted some as not sure of it all, in any case it took me much too long!! ;) Anyway, below some points, which don't cover all that we said I think, perhaps others can add!

Thanks @TimHandy for presenting the app, and @wingedeel about React-Redux!

Codereview Football app
https://github.com/timhandy/football-manager

• Modules
  As mentioned, it might be good to move some of the functions into modules separate from the main app.js file. We were talking about the Module Pattern (there's also something called the 'revealing module pattern' which I quite liked when first came across it). But I'm thinking now that this pattern is probably superceded by the arrival of ES6 modules - and you are already using ES6 anyway.
• Related to that - re the question where should you keep functionality that goes with certain elements in the view -, the logic should normally rather be kept separate from manipulation of view
• JQuery
  Think this was not mentioned but occured to me, when I looked at the code now. You will probably know this already: DOM Manipulation is more expensive than pure JS operations, so it's good to for example create a whole array of elements as a list and then attach that, than repeatedly attach individual elements (not sure how much it matters if it's not a massive number!)
• Generic refactoring - remembered I found this quite useful http://javascriptplayground.com/the-refactoring-tales/refactoring-tales.html (Jack Franklin gave a talk about that for us once)
  Some more things we spoke about:
• Using the date as a unique identifier
• Returning undefined from a function: you can probably do that, but not sure I would; I'd check for something being undefined (e.g. variable not assigned yet), but not necessarily assign it? But this might be something I don't know.
• Reloading the page, is there a need for it? Or can all changes just be done with jQuery?

Interested in looking at the app some more and see it progress!

React-Redux
@wingedeel talked about an image swapping app she built. Interesting discussion about whether it is acceptable practice in a Redux application, to change just a component's state, or would it always go through the root reducer. Also, usefulness of using connect from react-redux to let components access the state of the application (rather than passing down through props or using context)

We also briefly had a look at project that @lauri3new has done. In general, Interesting question which frameworks/technologies good to use for projects. For smaller projects might be fine to just use jQuery, though can become a bit messy quite quickly.

Links
Good video series about React and Redux (thanks @lauri3new):
React Basics http://www.codechannels.com/video/mindspace/facebook/reactjs-basics-1-what-is-react/
React Redux http://www.codechannels.com/video/mindspace/facebook/reactjs-redux-tutorial-1-introduction/
Think there was agreement that Egghead series by Abramov better to be watched after more basic introduction, but then really useful
Something @TimHandy started: How to learn JavaScript - useful for people starting out! People could add to this https://github.com/CodeHubOrg/organisations-database/wiki/Learning-Roadmap

Plan for next session
Webpack and web dev tools (debugging), also @ben198 might talk about his React-redux project
I'll try looking at our app, making it more accessible, but as I mentioned, this might be rather in 4 weeks than 2! - Would be good if we managed to code a bit more again next time. Think it was good talking about all the things today, but it would be good to work on something, too.

Please add things that I missed - @wingedeel link to your talk, cartoon etc.? Also good luck with the internship! And welcome to the group, Nick and Laurence :)

@CodeHubOrg/js2016

[STRAYKR]

Thanks Katja, have bookmarked the refactoring book. :-)