App Architecture

It is electron based

Electron + Bulma.io + SASS + jQuery

Electron : https://electron.atom.io/
Bulma.io : CSS Frameworks http://bulma.io/
SASS : http://sass-lang.com/
jQuery : https://jquery.com/

Dependencies (Production)

CSS Frameworks

Bulma.io

Font Awesome

Javascripts Library

jQuery

Electron/node.js modules

electron-settings

Writing electron settings file in json format to ~/Library/Application\ Support/Setting (Mac) and "Not sure where" (Win and Linux). This plugin right now only supports writing to one single file. We might need to replace this one with another (for example, electron-config) later if we need to separate each comic's information to different files.

requests

Make http request

DevDependencies

livereloadx

Watches the file changes under the project folder, and trigger the app to refresh automatically.

node-sass

Compiles SASS files to CSS.

nodemon

Watches the SASS files, and execute node-sass if any of the SASS file changes.

concurrently

Allows us to run all of the command above in parallel.

Folder Structure

I use the folder structure follows this one on electron/electron-api-demos:

assets

This directory includes assets files for the app itself, including css, fonts, images, javascripts, and more.

css folder

Contains css files from other libraries, and the main.css which is compiled from the scss folder Developers who wants to contributed to this project should avoid from writing .css directly, and use scss/sass instead

js

Contains 3rd party javascripts library, such as jQuery

icons

Contains app icons. (It is not being used right now. The current setup in app.js is incorrect)

renderer-process

The idea is to have Model View ViewModel (MVVM) separated. (Although it is not done perfectly, yet. Right now some of my view-controller accessing the model directly, which should be fixed later) (Naming should be change either, I got this idea before I actually know MVVM.)

Where views are defined under the sections using .html files

Model

The database is right now store together with the general application settings at ~/Library/Application\ Support/Settings in JSON format.

Application Settings:

Key: "system"
Values: {
    "windowsize": {
        "width": 800, 
        "height": 600
    }
}

Comic Settings/Database Basic structure:

Key: "comic"
Value: {
     "<host_name>" : {
         "<comic_key>" : {
             "title": "{String}", // comic's name
             "link" : "{String}", //URL to the comic page
             "thumbnail": "{String}", // URL to the cover photo
             "subscribed": "{bool}", //Whether the user subscribes the comic or not
             "lastread" : "{String}", // Chapter name the user read last time
             "chapters": {
                 "<chapter_name>" : {
                     "read": "{bool}" // <Whether the user has read this chapter or not>
                 } 
             },
             "newestchapter": "{String}" // Chapter name of the newest chapter
        }
    }
}

values.js

ViewModel

content-loader.js

search-controller.js

subscriber.js

util.js

load-after.js

View-Controller

search-view.js

favorite-view.js

read-view.js

view-switcher.js

sections

Contains html templates. These files is loaded to the index.html(or the app) by using the .js file under renderer-process

Sidebar

sidebar.html

Favorite View

--

favorite-entry.html

A HTML template for one single entry that is used in favorite-view Imgur

favorite-view.html

The HTML template for the whole favorite view

Read View

--

chapter-entry.html

A HTML template for one single entry that is used in chapter-selector under read-view Imgur

page.html

A HTML template for one single image under the read-view Imgur

read-view.html

The HTML template for the whole read view

Search View

--

search-result-entry.html

A HTML template for one single search result Imgur

search-view.html

The HTML template for the whole search view