SurviveJS - Webpack and React - v1.8.0

We have once more new chapters in the book. I'm going to try a new model with these. For now the full versions of the testing and typing chapters will be available through Leanpub only. The community version will contain TLDR;s for these so you still get the core points. Of course the project source is public for examination.

By doing this I want to give my supporters a small edge. As a result they'll get the access to the new material first. If it looks like this works, I don't mind developing more content and opening old as new chapters get developed. Consider it as a poor man's Kickstarter. We can even agree on goals if that works better.

Pricing-wise I've bumped the minimum price of the book to $20 as I believe that reflects its current value. I may do another bump later on as I understand how the situation develops.

Book Improvements - v1.8.0#

In total 137 commits went to v1.8.0. To make it easier to follow what happened and where, I've split up the changes below.

You can see GitHub for all changes.

General Fixes#

• Grammar was improved overall. Big thanks Steve!
• app/main.js[x] was renamed as app/index.js[x]. This simplifies Webpack entry configuration as you can point directly to app. This resolves to the index file within the directory and saves some hassle.

Webpack and React#

• Mentioned Visual Studio Code. This free editor has grown fast. It gained JSX support in v0.8.0.
• Fixed basic JSX example. A React component should return a single node.
• Linked to a blog post about JSX shock. It goes more detail about the experience.
• Updated Webpack example to use eval-source-map instead of eval. This is consistent with the earlier chapter. In our case we can avoid eval. Even though it's faster we can afford to go for quality.
• Explained resolve.extensions in detail. Simply put this Webpack property allows us to control the way it matches against files (is it ok to skip extension or not).
• Moved Babel to use .babelrc. This will become even more important in the future as react-transform Babel plugin will replace the current hot loader.
• Documented how to control .babelrc based on env easily. This is important when you want to perform branching based on your build target.
• Mentioned about React Developer Tools. They give you a better idea of what's going on at your code. Available for both Chrome and Firefox.

Implementing a Basic Note Application#

• Noted that hot loading won't pick up changes made to a constructor. It simply replaces method contents so these get missed. It would be nice to find a good alternative to those bind statements that is performant and works with hot loading.
• Explained what super() actually does. Simply put it invokes the same method of the parent class.
• Mentioned that using a context might be a viable option for dealing with onEdit. It is currently and undocumented feature. Dmitry Kudryavtsev goes into a good detail at his article The land of undocumented react.js: The Context. React 0.14 will introduce a stable context API and it's worth discussing then.
• Caught possible alt.bootstrap related exception. It can fail if it receives data it cannot interpret. Better to deal with that than to blow up.
• Linked to Sebastian Markbåge's expanded explanation of JSX spread attributes.
• Made get(ids) more tolerant against missing data. Now it doesn't return possible empty (undefined or such) results. Of course getting that sort of data at localStorage isn't a good idea in the first place but sometimes it's a good idea to be a little defensive.

Implementing Drag and Drop#

• Pushed ItemTypes below app/constants/itemTypes.js. Given they are constants that feels like the right place for those. I noticed this while implementing the Redux version of the Kanban.
• Expanded explanations. I tend to go somewhat terse on my first pass of content. Now I've expanded on possibly clear parts so it's easier to see what's going on and why.
• Passed id instead of data to Note. This change simplified move logic somewhat and it goes according to the law of Demeter.

Building Kanban#

• Dropped redundant references to TARGET. Now we can avoid setting TARGET at package.json as we deduce the target based on npm lifecycle information.
• Noted that peeking at the warnings Uglify.js, the minifier, provides can be beneficial.
• Expanded on splitting app and vendor bundles. Now it's easier to see what's going on and, most importantly, why.
• Noted ExtractTextPlugin related gotchas. It won't work through loader form. Instead you have to use loaders: [ExtractTextPlugin.extract('style', 'css!autoprefixer')] or such. If you need to use multiple loaders with it, note the syntax! You should use the ! form in the second parameter to add more if needed.
• Noted that chunkhash seems to be broken at the moment. For now I would suggest generating hashes of your own but I understand it's a heavy solution. Hopefully this one gets fixed soon.

Testing React#

This is a new chapter! The chapter can likely use some work still. I'll probably cover techniques such as mocking in the future but the basic setup inspired by Cesar Andreu's web-app is there. We also get some tests done so that's good.

Typing with React#

This is another new chapter. In the chapter I show how to annotate our project using propTypes. This is one of those steps you should take to solidify your project.

There is a basic introduction to Flow. Unfortunately the current version is missing some functionality our project would need. I have to get back to this later as the tool develops further.

TypeScript will receive JSX support in 1.6. That's another tool I want to cover once it gets out.

Linting in Webpack#

• Rewrote introduction to be easier to approach.
• Mentioned about ESLint autofixing. This is a feature that allows you to fix certain linting errors automatically. As it's new, not a lot of rules are supported yet.
• Explained ESLint env configuration detail. That's important to know especially when you are dealing with multiple environments and testing tools.
• Added EditorConfig. This tool allows you to maintain project-wide coding style. There's a good level of editor/IDE support. It's a valuable tool in a team environment.

Authoring Libraries#

• Expanded on npm adduser and mentioned npm login alias to clear up confusion.

Styling React#

• Mentioned Stylus.
• Added "resources" sidebar to the site. I'll be setting similar ones for other chapters. I'll likely push this to a separate repository so it's easier to contribute.

What Next?#

Given there's a release candidate of React 0.14 out there, it likely doesn't take that long for a final version to appear. This will lead to some important changes in the book. Most importantly it will allow me to default to function syntax for components. In addition I can dig into features such as context.

Once I'm convinced that babel-plugin-react-transform is stable enough and that it works well with the project, I'll change my recommendation to it. It's already worth a look.

I'll also develop the content based on your feedback. The site may receive some small updates. I would love to do something about the highlighting of the code examples and improve the way the are laid out (show added/removed lines better).

I'll write at least one more chapter for my Leanpub readers. The way the situation develops determines the rest.

Conclusion#

I hope you enjoy this release. As usual feedback and pull requests are welcome.

I'm still a little conflicted about Amazon and dead tree versions. One option is that I'll do a snapshot (v2.0.0) that will be published. Leanpub version would then continue from there. Amazon buyers would obviously receive a heavy discount on Leanpub. It's more about reaching more people with the work than anything else.

Remember that you can support my work by purchasing the book at Leanpub. Every little bit counts and allows me to keep it up.