Rewrite

[bogas04]

It's very hard to maintain a project which doesn't have any contributors or users (lol).

Plan for rewriting one module at a time, one build step at a time:

Phase 1

• Use xo for linting
• Remove dependencies:
  • react-mdl: Why ? It's good for prototypes but not for my use-case. I need to custom build the UI.
  • react-throttle: I don't even know if it's helping at all.
  • ws: With webpack 2, we can also use its server for dev testing.
  • react-calendar: very fat and not a major feature.
• Update/Replace dependencies;
  • Upgrade to webpack 2. It's simple change that might help in reducing some bundle size.
  • Upgrade to react-router v4.
  • Consider using preact over react. We can definitely benefit with a smaller bundle size.
    • Considered, but waiting for react@16 to go gold.
• New dependencies:
  • Consider glamor / styled-jsx for CSS.
    • Using styled-components instead.

Phase 2

• Perf

  • Code Split vendor and app-code
  • Find more areas to split code based on route or component. Code Splitting and Prefetching resources #112
  • Use Service Worker to cache vendor.min.js, app.min.js and other assets.
  • Prefetch angs etc. Code Splitting and Prefetching resources #112

• Cleanup

  • Fix xo lint errors.
  • Re-org components into components and pages, so that we have a clear distinction between those.
  • Redux?
    • Our actions are fairly less, and the state is mingled much, so I'm not sure if we really require redux as of now.
    • On a second thought, having redux store will help us make the app offline-first more readily.
  • push to location for sggs, shabads etc on ang/query change.

• Features

  • Use react-router-dom in much more ergonomic way instead of simply porting RR3 to RR4.
  • Style all the things!
    • Improve navigation. I want it to work the way user uses the app and not how the sitemap looks like. Search and Sehaj paath being the main features. We can try interactions like floating icons or tabs ?
    • Use some cleaner react-calendar alternative (make yourself!) - Add calendar #105

[bogas04]

I would really love a friend who can motivate me to work on this 🙈

[bogas04]

rewrite does master reorg and dependency changes.

It uses:

• webpack2
• babel-preset-env
• react-router-dom (v4)
• styled-components
• snarkdown over remarkable (very lightweight markdown parser)

And doesn't use:

• react-calendar
• react-router (v3)
• react-mdl

We've lost the styles and polished look, but we have more flexibility in hand now !

Our bundle size is already down to 400-ish kbs from 900-ish kbs! Of course it isn't fair to compare as we don't yet have calendar in place, but we can now employ code splitting for more perf benefits!

I tried using preact over react, but seeing how React is gonna change a lot with 16 (Fiber), I think it'll be better to stick around with react for a while. For reference, it brought bundle size by around 100kbs. Also, react@next as of 15 March 2017 actually increases the bundle size by 10kb or so. But I guess it's a minor trade-off for general perf improvements.

Also, the production webpack build is made by simply using webpack -p and no special plugins as such. Using those might help us reduce bundle size further down.

[perminder-klair]

@bogas04 good job bro! I am happy to help you in this project, let me know which area you want me to have a look.

[bogas04]

Thank you so much @perminder-klair !! You can take time to get used to the app, get it building on your system and then I can help you in finding issues that you can take up.

I'm really sorry for late reply, have been very busy lately.

[perminder-klair]

@bogas04 I got it all setup already, all looks good!

[bogas04]

That's great @perminder-klair . You could take up some of these issues:

• Make Submenu of shabad sticky #100
• Add meta description #89
• Improve Bookmark Titles #83
• Give alignment option #54
• Update colors as per Khalsa Fauj colors #50 (I suck at design as you might have guessed already)
• Add sharing button to shabads #49
• Use ServiceWorker for offline support #25

These are some easy first-pr issues. Really sorry for late replies, have been very busy lately. I can't thank you enough for sticking around and trying to help this projec.t

[bogas04]

Added redux support for two actions

• toggleNightMode
• increaseFontSize
• decreaseFontSize
• setAng
• increaseAng
• decreaseAng