trydofor / professional-razor Goto Github PK

Use front-end tech (Vue/Css/Ts) to build multi-platform from one codebase, suitable for small team and app to write logic once, run anywhere.

License: Apache License 2.0

JavaScript 5.98% TypeScript 44.65% HTML 3.38% Vue 8.99% CSS 27.17% Java 2.43% Swift 5.68% Ruby 1.72%

cross-platform hybrid-app ionic vue3 primevue

professional-razor's Introduction

Razor - CrossPlatform Hybrid Starter

English 🇺🇸 | 中文 🇨🇳

With a deadly lightning storm at his command, Razor charges into battle.

Use front-end tech (Vue/Css/Ts) to build multi-platform from one codebase,

Mobile (H5/App) - Web, Android, iOS
Desktop (PC/Exe) - Web, MacOS, Linux, Window

Suitable for teams and app scenarios such as,

small team with some web skills but little mobile experience
small app with simple interactions, but multi-platform and similar
The MC layer can be reused, but the V layer UX is different

The goal is write logic once, run anywhere

not learn once
not write once

1.Tech Archi

💎 TypeScript Main Language Apache
🚀 Inoic - Mobile UI and cli MIT
🚀 Vue SPA Framework MIT
🧩 Capacitor - Mobile native MIT
🧩 Electron - Desktop native MIT
💄 PrimeVue Desktop UI MIT

2.Code Style

Based on the Vue Style Guide, with the principles of type safety, readability, and consistency, add the following conventions,

Rule1 - camel in js, kebab in html

First, html and http are case-insensitive, and mac and win OS are case-insensitive by default.

camel - camelCase(small) and PascalCase (big)
kebab - kebab-case all lowercase
*.vue file - MUST be big-camel, consistent with Vue official
dir and non-vue file - MUST be kebab consistent with index.js
source code - js MUST be camel, html attr and css MUST be kebab
component tag - SHOULD be big-camel, to distinguish from original html
component prop - in js MUST be small-camel, in html MUST be kebab
emit event - MUST be kebab, treated as string, no auto-conversion
i18n - SHOULD use js instead of json, key SHOULD be camel

Rule2 - single in js, double in html

Since double quotes are usually used in html which may contain simple js code,

js content - MUST be single quotes
html content - MUST be double quotes

Rule3 - semicolon and comma, same as main language

semicolon, same as your main language, or otherwise as they are.

java - keep the semicolon at the end
kotlin, scala, etc - without semicolon

comma, as much as possible to easy to add, sub and reorder,

arrays, objects, ts, etc. support comma endings

Rule4 - Component name must not be `Index.*`

Components named Index are hard to read, debug and develop.

prefer to use the full name (import and export via index.ts)
or specify the name attribute (auto inference is recommended)

Rule5 - Use singular for whole, plural for fragment

According to the official Vue naming rules, most things are plural,

for a single entity, use singular, e.g. store, route
for multiple fragments, use plural, e.g. views, compents

Rule6 - ts coding convention

to define function, function is better than arrow lambda
try to specify type, unknown instead of any
entity code is in *.ts, type-only is in *.d.ts
TypeX[] instead of Array<TypeX> when no type inference
Use if for flow control, || or ?? for expression
Use absolute path (@/), relative path is only . / and ../

Rule7 - vue coding convention

emits, using the ts specification, event name without on prefix
props, use do prefix for handle when passthrough Function
interface/type in SFC, can be in same-name .d.ts, but enum in .ts

professional-razor's People

Contributors

Watchers

professional-razor's Issues

monorepo for h5 and pc

repos

mobile UI
desktop UI
shared lib

reference

common request function

global router and permission

lint and conf of vscode

ui component

auto import or not

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

monorepo convention

dependencies

define specific version at top "@capacitor/android": "5.7.4"
refer them as need at sub "@capacitor/android": "*"
only one node_modules at top if same version
except android, ios, electron
peer range as eslint@"^8.56.0" from @vue/[email protected]

scripts

no script at top project
define it at sub project

manage, config, others

project level at top
app level at sub

email and oauth login

vite pwa investigate

use PWA(Progressive Web App) for mobile/desktop web.

common cookie function

table component

no table component in ionic

ionic-team/ionic-framework#28557
https://www.ag-grid.com - too powfull
https://buefy.org/documentation/table - table to card if sm

share favicon.png in monorepo

issues

scenario

can not share favicon.png from single repo,
copy them here and there.

project-root/
├── packages/
│   ├── package-a/
│   │   └── index.html
│   └── shared/
│       └── public/
│           └── favicon.png

now, when vite at package-a/index.html,

<link rel="shortcut icon" type="image/png" href="../shared/public/favicon.png" />

will output <link rel="shortcut icon" type="image/png" href="/shared/public/favicon.png" />

multi-tab keepalive

It looks like vue won't offer caching strategy of KeepAlive

pnpm instead of npm

prefer pnpm more

https://medium.com/@fixitblog/solved-how-to-use-ionic-cli-with-pnpm-701eb1a2c580
https://forum.ionicframework.com/t/converting-projects-to-work-with-pnpm/230612

icon investigate

css theme investigate

simple css integration

ionic - iOS, MD
primevue
tailwind - https://tailwindcss.com
bulma - https://bulma.io
unocss - https://unocss.dev

monorepo hoist&local deps

package.json