This is an todo list example. I have choose to write this example because there are plenty todolist example so people are familiar with its logic. What's new in this example is the tool combination used to develop it.
I have found few example using this tools combination:
- TypeScript a beautiful meta language
- Infernojs a great react like framework
- Redux a predictable state container for JavaScript apps to make more easy store and state manage on application component
- inferno-redux an inferno library to pass context.store to each component and more
- Hyperscript an alternative to JSX way
- inferno-hyperscript Hyperscript syntax for Inferno templates
- Hyperscript helper useful way to take benefit by Hyperscript
- W3CSS a modern CSS framework with built-in responsiveness
- Webpack to put all together
- Reselect optimization calculate state selection
Is useful in many way: you can use class, interface, enum, ... And at last using it's interface you can make useful control on parameter typechecking, presence etc. Avoiding the need to use PropTypes.
Is capable to providing the greatest React functionality but in minor size. Inferno bring lifecycle events on functional Component too.
On Inferno and on all React like framework it's tedious encapsulate state in upper component and share it down from the root component to leaves component that need it. It's complex too. So are born framework like Flux but the multiple state existence and multiple store component make it too complex to my experience. See Flux concepts and Flux overview.
Redux to my opinion take the Flux way but is more simplex: one plain object is the single application state. Action are plain object that encapsulate data that will update the state. The state will update only if an action will be generated. To make this change on state a function reducer take the actions, the last state and calculate the new state.
In Redux there is only one Store that bound together State, Actions, Reducer. The library inferno-redux by Provider component take this Store to all application components making easy to use it.
I like Hyperscript, is one of the reason why I have write this example. I find few not trivial example to use it so I write one. I prefer it over JSX because is vanilla javascript and you haven't to compile it before use. It is nothing to learn: is very simple. It's syntax is very concise specially if use together Hyperscript-helper.
A fantastic way to write responsive html code using a small css and no javascript.
Is an useful tool binding together several functionally you can have only if you use many building framework.
Is a convenient tool to avoid state selection recalculation. Usually if you connect a component using inferno-redux. If the component needed to get any state fragment you use mapStateToProps to inject new props using state derived data. This data can be expensive to be calculate. Reselect use a one cache structure to named selector to store previous calculated data. If all parameter use in mapStateToProps to calculate new props are unchanged the value is not calculate and the cached value is get. Like many library Reselect use immutable comparison.
No this is an example so I will write all necessary comment on the code. I'm new to Inferno so I think that my comment will be helpful for beginners.
You have to install npm then you have to go on terminal and change folder to source project and do npm install this download and install all dependencies.
npm run start start a server on port 8080, you can see it on your browser on url http://localhost:8080/
npm run build make a production build on dist folder. Here you can see the code is more small due to production optimization.