React Komik — like spectacle but for comic
Have you tried spectacle? Not this spectacle
but the spectacle to make presentation with ReactJS.
Spectacle is a ReactJS presentation library where you can write your decks in JSX. It’s open source on github by Formidable team (people behind walmart).
So the possibilities are endless. We can use this JSX as a DSL (Domain Specific Language) for any domain including comic strip.
Background
I like comic, I like to read story with something visual. But the problem is creating a comic need some picture editing skill or image processing skill. I just want a simpler solution to write a comic.
After trying spectacle, I want to try to make JSX works for comic too.
You just need a story and let ReactDOM renders it for you :D.
Components
The first step to make this library is creating the core component. Comic is actually an image. So for rendering, I would prefer canvas to DOM. So, how can we render ReactJS in canvas?
On of the library to do that is with react-art. but I have no experience using that library. So I tried to find simpler library that can be used with ReactJS.
I found react-kinetic that is easy to use. But the library KineticJS itself seems like deprecated. React-kinetic’s last update was a year ago.
So, I return to my favourite canvas rendering library — Fabric.js. I like Fabric.js because its simplicity and features. But the problem is that there is no react-fabric library yet. So, I have to write my own Fabric.js adapter for ReactJS. So, I think the simplest way to start integrating Fabric.js and ReactJS is rendering props after component is mounted. And for the nested component, there should be update handler on componentWillReceiveProps.
Convention
Thinking about the convention of React Komik, I am inspired by Spectacle. So I think there should be this kind of components.
- Strip
- Panel
- Character
- Balloon
Future Works
- Hot reloading
- Dynamic or Animated Comic
- Reduce library size
- No dependencies to FabricJS
Publishing
This is actually my first public node package modules. So I learn how to create and publish to npm. The most important things I learn is webpack bundling for node modules especially for UMD bundling.
npm install react-komik
I also tweet and mention the creator of spectacle — Ken Wheeler. Thank you for your awesome library and inspiration :D.
I created react.id — Indonesia ReactJS Community, rnpm logo, react-komik, jscomic.net, ziliun-react-native.
