motorhomes.addli.jp

This project purpose is demonstration of web development by +Li, Inc. It has almost the same design as the native application. Riot.js made it possible. I am strongly influenced by iOS development.

Point

Project structure

• I bundled by rollup. I solved dependencies between libraries.
• Install libraries for npm. Looking at package.json makes it possible to understand dependent libraries. This was also conscious of native applications.
• I pulled out only grid system from bootstrap. We are assembling the style required by SPA from scratch.
• Logic is written in TypeScript. However, warnings are not output due to the problem of rollup-plugin-typescript. The benefits of adopting TypeScript have partially disappeared. Respond as soon as possible.
• Hjson is adopted so that you can write comments directly in the settings. My favorite configuration file format. json < yaml < hjson.

Application implement

• It is a complete Single Page Application.
• Using OSS riot-tab, riot-nav of iq3AddLi. Implemented view management with screen transitions.
• Internationalized by i18next. Language automatically switches according to the language setting of the browser.
• Rendered markdown using marked.js.
• Not using JQuery. However, ajax is used for calling JSONP.

What info is displayed in this application?

It is a list of motorhome builder in Japan. They make cars for residence rather than camping. As far as I know. Someday I will develop from this demonstration. It might make a site handling motorhome information. I long for motorhome. Someday I'd like to make a nice motorhome I saw at Pintarest. Based on TOYOTA QuickDelivery.

How to build this project

1. Install brew

Please see here

2. Install npm

brew install npm

3. Install gulp

npm install -g gulp
npm install

4. Create .env

First, create a file named .env.

vi .env

Please provide the following information.

GOOGLE_MAP_API_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
GOOGLE_ANALYTICS_ID=UA-XXXXXXXXXX-X

5. Build package

gulp

or Shortcut in VSCode, Command + Shift + B.

Appendix: Web technology substitutable to iOS Framework

iOS Frameworks	Web
UIAppDelegate & UIViewController	riot
Interface Builder(.xib)	riot .tag file
NSNotificationCenter	riot-observable
UINavigationController	riot-nav
UITabBarController	riot-tab
NSDate & NSDateFormatter	moment.js
NSLocalizedString	i18next.js
Xcode	VSCode
Xcode ToolChain	gulp & rollup
CocoaPods	npm
Auto Layout	CSS
Universal Link	riot-route

Technology used this time

• riot.js
• TypeScript
• Rollup
• gulp
• i18next.js
• marked.js
• moment.js
• HJson
• Sassy CSS(SASS)

I appreciate everyone who wrote these wonderful OSS.