-
Notifications
You must be signed in to change notification settings - Fork 11
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
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:
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 Controller separated. (Although it is not done perfectly, yet)
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
}
}
}
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