App Architecture
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/
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.
Make http request
Async utilities for node and the browser
Schedule tasks that needs to be executed repeatedly
Watches the file changes under the project folder, and trigger the app to refresh automatically.
Compiles SASS files to CSS.
Watches the SASS files, and execute node-sass if any of the SASS file changes.
Allows us to run all of the command above in parallel.
I use the folder structure follows this one on electron/electron-api-demos. The main.js is replaced with app.js (we can change it back later) in the root folder. Other system-related .js should be placed under main-process folder. Currently there is no main-process folder.
(According to the guidelines, main/app.js needs to be in the root folder, other system-realted .js that is reuired by main/app.js should be placed under main-process folder. Although, technically we can place main.js to any place we want).
This directory includes assets files for the app itself, including css, fonts, images, javascripts, and more.
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
Contains 3rd party javascripts library, such as jQuery
Contains app icons. (It is not being used right now. The current setup in app.js is incorrect)
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.)
This is the diagram from www.objc.op :
Our current implementations looks like the following diagram:
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:
// value inside <> needs to be replace with actual data
// {} represent the data type of the value
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
}
}
}A javascript object contains two Key-Value pairs
{
hosts: {
"<host_path>": {
"name": "{String} <host_name>",
"parsers": "{Object} <host_parser>"
}
},
hostsname: {
"<host_name>" : {
"parsers": "{Object} <host_parser>"
}
}
}Handle the search mechanism and notify the search-view to update its UI elements once the search results is returned by the server.
Handle everything for the subscription. It owns view-controllers and models. It will notify the view-controllers to update UI elements.
Parsing information of a comic. Including chapters/episodes of a selected comic, and loading every single page for a selected chapter/episode.
Contains general utility codes
!!!Important!!! - this file should be load last Things todo after every single element is loaded. Right now it is used to switch the active panel to favorite view after everything is loaded, includes other scripts.
Load the three different main views to index.html
controllers for the three different views
Associate with sidebar-view and the middle-panel (chapter-selector) under read view
Contains html templates. These files is loaded to the index.html(or the app) by using the .js file under renderer-process
--
A HTML template for one single entry that is used in favorite-view
The HTML template for the whole favorite view
--
A HTML template for one single entry that is used in chapter-selector under read-view
A HTML template for one single image under the read-view
The HTML template for the whole read view
--
A HTML template for one single search result
The HTML template for the whole search view