The quick TL;DR story
This is an interesting way for me to share rust learnings while building something fun!
The Living Repo
https://github.com/superjose/rust-online-manga-reader
Entries
- Introduction (This Post)
- Build.rs
What we will build
An online manga reader that will contain the following features:
- View thumbnails in a carousel format while you were reading
- Prefetch the pages while you were reading.
- No loading between pages.
- It allowed you to view the manga side by side, creating a true reading experience.
- Save your progress and come back to where you left.
- "Turn off the lights", to make the background dim.
- Control the manga page dimensions by changing its width, and height to match your screen (so you could read it from a far), or very close.
- Cinema mode. Allowing you to read it from a TV, and automatically scroll by a fixed timer.
- Gallery mode. It showcased you the ability to view small thumbnails
- Playlist mode.
- UI Customization - color of the buttons.
Not your typical tutorials
Tutorials teach you an isolated way to do something.
This goes beyond that.
This brings real world trade-offs that we need to do in order for us to get along. In addition, we will be documenting the bugs we introduce, and the mental frameworks applied to solve them.
The Story
Back in 2010 I needed a way to continue learning JavaScript and PHP.
I had found from previous experience that doing a personal project was the best way to learn how to program. I used to read Bleach and Naruto manga at the time, and I thought it would be interesting to use it as a learning opportunity.
This led me to create InnerBleach.com (Which had an online manga reader)
It was built on:
- Drupal 6, later migrated to Drupal 7.
- Vanilla JS, tangled with jQuery 1.x spaghetti code.
The manga reader supported most of the features above, yet lacked many of today's new features:
- Everything was on a single page.
- No mangling/minification
- No lazy loading unused pieces of the code.
- Untested code.
- Separations of concerns were non-existent.
- No responsive design.
Now, after 13 years of JavaScript experience, I’ll be sharing my journey to remake it while I share my Rust learnings.
The Stack
- Rust (Latest version - 1.68.0 as of this writing)
- Yew (Latest version - 1.18 as of this writing)
- TailwindCSS
FAQ
Why Rust?
- Rust is a lower language getting traction in different areas than C++ (such as web development).
- Rust is a prime candidate for Web Assembly, widespread in the JavaScript tooling ecosystem (Deno, Turbopack, SWC, Rome, etc.)
- Developers will use Web Assembly beyond browsers. It will become a fundamental part in building tomorrow’s applications (WASI). No. It won’t replace JS.
- It’s a way to hedge against unknowns in the future.
- It works like brain food. Keeps flexing the brain.
If you were to build this for a serious project or startup, would you use Rust?
Not unless it's necessary.
It takes me much longer than TypeScript, C# or Python to ship to market.
Web Assembly isn't necessarily faster than JavaScript. . It does bring more predictable performance, as there are optimizations which the V8 (Chromium) or SpiderMonkey (Firefox) do. Therefore it should be used on performance critical applications or where portability matters.
While I don't think we will be developing a lot of code in Rust, I do believe understanding it can help you jump into a library or framework and debug it in case you need it.
Why the first post starts from build.rs?
I had already started developing the program a while back.
I decided to continue from where it was as there wasn't much done.
Disclaimer
No assets will be shared
Manga volumes are copyrighted material and won't be available in the repository nor these posts.
Follow me on other social media
I post regularly on:
- LinkedIn - https://linkedin.com/in/javiasilis
- Twitter - https://twitter.com/javiasilis
Feel free to connect with me there!
Top comments (0)