Rather than a bunch of principles, why not just tell us what Eros actually does?

Eros is based on Weex and allows front-end students to write native iOS/Android apps using vue syntax and apis.

Before learning weeX or EROS, make sure you are familiar with vuE2 development.

  • Vue official document
  • Eros file (find STAR)

This paper will introduce EROS through the origin, advantages and disadvantages evaluation, development status, environment construction, debugging and other aspects. In the latter part of the article, we will write a Hello World together with the developers to better evaluate EROS.

experience

Built-in DEMO on iOS The ios version download The android version download
  • IOS Download link
  • Android Download link

Developers can scan the QR code to download EROS app to experience it. To open the app for the first time on iOS, go to Settings -> General -> Device Management Trust Development Certificate.

Eros status quo

At present, eros has dozens of apps under development and online, including starLife (100+ pages), Mingmi (60+ pages), and other online apps ranging from 0 to 50+ pages. The industries are information, medical care, investment promotion and shopping. Government, office, etc.

The technical team of Bumi Medical has also developed three online apps based on WEEx, which can be downloaded in the Apple Store and App Store:

  • Healthy Capital (JINGyitong APP version, 100+ pages, many functions are not open yet)
  • Honki Medical Assistant (30+ pages)
  • Dr Honki’s Assistant (20+ pages)

So developers can rest assured that this is not a KPI project (companies don’t have KPIs) and is open source under the MIT protocol.

Where does Eros come from

We need to start with WEEx, let’s go straight to the schematic:

The WEEX schematic diagram consists of a Server and a Client.

Server

Weex file: our.vue file (or official.we file) is the same as our usual front-end development.

transformer: Take vue development as an example. In the browser, we usually write. Vue files and syntax that es6 and other browsers do not support at present. Through the front-end resource packaging tool Webpack and other tools, vue-Loader and Babel-Loader are finally converted into ES5 codes for the browser to recognize. And in WEEx finally compiled resource files can run in the browser, naturally this reason.

The es5 code run by the browser cannot be directly run on the client (for example, the browser has BOM and DOM, but the client does not), so there are many limitations in developing the client through WEEX.

When compiling static resource files on the client, weex files compiled with restricted syntax are loaded by weex-loader and compiled into JS files that can be read by the client, that is, JS bundles.

Those of you who are interested can dig into this. In-depth implementation principle of Transformer in Weex

That’s why this section is called server, which means that these static resource files can be packaged on the remote server, accessed by the client, downloaded and parsed.

Client

Weex website quote.

Weex’S iOS and Android clients run a JavaScript engine that executes JS bundles, sends normalized instructions to each rendering layer, and schedules client rendering and other capabilities. We chose the JavaScriptCore kernel for iOS and the V8 kernel provided by UC for Android. Both from the performance and stability have provided a strong guarantee.

In order to make better use of the resources of the whole mobile application, the JavaScript engine we provide on the client side is a singleton, that is, all JS bundles share a JavaScript kernel instance, and each JS bundle is contextually isolated at runtime. Enable each JS bundle to work efficiently and safely. We also pre-built JS frameworks such as Vue 2.0, so developers don’t have to package the JS Framework in every JS bundle, which greatly reduces the size of the JS bundle and further ensures the speed of page opening.

Weex has an important function. That is, WEEX builds a JS Bridge to enable the front-end to interact with the client by customizing modules and components on the client.

However, custom Module and Component require certain knowledge of client development, which makes many front-end development students shy away. Moreover, due to the existing problems in official environment construction and scaffolding packaging, many students who want to learn WEEX are blocked out. Therefore, EROS is born accordingly.

Weex official document

Eros is introduced

Eros is a solution based on the WEEX encapsulation of the front-end vUE writing method. Due to the particularity of app development, EROS focuses more on the whole app project. Once you are familiar with EROS, you can quickly build native app applications through the methods exposed by VUE.

Eros flow chart is as follows:

What does EROS solve

  • Detailed documentation to solve potholes in the environment setup process.
  • A set of code compiled into ios, Android native applications.
  • Package a large number of modules, so that front-end development easy to carry out native operations.
  • provideappboardMechanism to reduce packet size and can be modified in real time.
  • There is a complete set of built-in widgets that can be customized for your business.
  • The broker pattern to centrally manage the business.
  • Server side incremental release update logic is provided.
  • Scaffolding can be directly generated to develop the latest templates.
  • Scaffolding startup service for real-time development view and debug.
  • Scaffolding update development platform requires EROS dependency.
  • Scaffolding support corresponding platform built-in package.
  • Scaffolding supports the generation of full packages, incremental packages, and built-in logic to interact with the update server.
  • Scaffolding supports synchronous updating of template content.
  • Scaffolding support WEEX vUE entry and JS entry two development modes.
  • supportweex debug

What can eros not do

Eros development also has many limitations that require discretion.

  • Weex code has a lot of compatibility issues on the browser side, and eros does not currently support the browser side
  • Eros is not available in the Weex market, you can access it yourself if you have native development experience
  • Because EROS uses the Appboard mechanism to reduce the size of JS bundles, weex Debug requires specific processing.
  • The weeX UI library does not support tree-shaking, and the webPack version is 1.x.x. The EROS scaffolding does not support tree-shaking even though the webpack is updated. So the current way of introducing code requires a lot of constraints to reduce the size of JS bundles, and EROS will come up with a UI component library to address these issues.
  • Eros has a slightly larger package size, and the EROS client dynamic loading dependency is being developed to address this.
  • Weex is still struggling to cope with the need for complex pages such as IM, which Eros recommends using native implementations.

supportive

  • The Android 4.1 (API 16)
  • IOS 8.0 +
  • Its 534.30 +

Start eros

Scaffold installation:

$ npm i eros-cli -g
Copy the code

If you are in China, we still recommend using CNPM to install scaffolding

$ cnpm i eros-cli -g 
Copy the code

If an error occurs during the installation, it is because eros- CLI relies on Node-sass. You can search for the solution by yourself.

Darwin to develop iOS:

  • Xcode
  • CocoaPods
    • Upgrading the Ruby environment:$ sudo gem update --system
    • Remove an existing Ruby image:$ gem sources --remove https://rubygems.org/
    • Add ruby-China image:$ gem source -a https://gems.ruby-china.org/
    • Install CocoaPods:$ sudo gem install cocoapods
    • If the preceding command fails, run the following command:$ sudo gem install -n /usr/local/bin cocoapods --pre
    • Last execution:$ pod setupThe process takes a long time. Please wait until the execution is complete

Darwin/Windows/Linux development Android:

  • Download and install the JDK.
  • Download and install Android Studio.

The JDK is a JAVA development package, and AndroidStudio is an Android development IDE.

If you use VMS for cross-platform development, you need to configure the required environment for the corresponding platform.

Simulator installation

  • Xcode already comes with emulators for ios development.
  • Android developers can download itGenymotion.

The template to generate

  1. Start by automatically generating development templates through scaffolding (which we do not recommend using Sudo).
$ eros init
Copy the code

Select the template as prompted, fill in app/ project name and version, the corresponding template will be generated in the current path, and then CD to the project.

$ npm install 
Copy the code

Download the EROS SDK dependency.

$EROS install (slow due to library and network issues)Copy the code

Eros install (slow due to library and network issues) will give you the option to download dependencies:

  • Ios: Eros ios development dependency
  • Android: Eros Is a dependency for Android development

Every time EROS fixes a bug or develops/changes modules and Components, only EROS install is required. Please close Xcode before ios update and Android will pop up sync in editor Android Studio. Click.

Eros install runs install.sh in the iOS/Android directory, so you should use Git Bash or other tools in Windows.

  1. After installing dependencies:

  • IOS: Xcode will automatically open, then select an emulator and click the Play (Run) button in the upper left corner to see the demo of Eros already built into the package.

  • Android: There are a few more steps required for the developer to build the project for the first time, after which eros install will have a synchronization prompt:

  1. Click on top of AndroidStudioThe File – > New – > Import Project.
  2. Find the address of EROS in your local area and select itplatforms/android/WeexFrameworkWrapper, click on theOK.
  3. Once the project is built, click on the toolbar above AndroidStudioRunTo run the project.

Note:

When you open AndroidStuido for the first time, AndroidStuido will prompt an error because the local environment is not configured. Most of the environmental problems can be solved according to the IDE prompt.

So eros demo can run in the simulator.

The Demo for Eros is very important, so it is recommended that you first write a few pages with the demo and keep the code for reference during development.

Before the development of

Let’s start with what you need to know about EROS development:

Server JS Bundle

For local development (running the scaffolding Eros dev directive), the scaffolding eros- CLI will run a service on a particular port by reading the configuration file, giving you local access to the JS Bundle generated by webpack under the dist in your project.

If you set port number 8899, type localhost:8899/dist in your browser to see the JS Bundle generated by the package.

Before different debugging vectors can access these JS bundles through localhost, they need to be in the same LAN. When accessing JS bundles, the situation is different:

The carrier Hosts file Whether to manually modify the network agent
The iOS simulator Share the hosts file on the PC Don’t need
Android emulator There are Need to be
IOS: There are Need to be
The Android: There are Need to be

The iOS emulator is special because it shares a set of network Settings with the Mac.

It can also be seen that if developers need rapid development of two terminals, they can directly use iOS simulator development. After development, it is the fastest to adapt to real computer and Android terminal.

So you can directly modify the network proxy to point to the local IP address to access the JS Bundle. We usually give a new host for the proxy software to capture the package.

127.0.0.1   app.weex-eros.com
Copy the code

After setting this up, the JS Bundle under http://app.weex-eros.com/dist can be accessed in browsers of different carriers.

Client JS Bundle

As described above, we can access JS Bundle through service. What should we do if we unplug the real computer, disconnect the network, and lose the source of JS Bundle? The answer is the JS Bundle in the app, we also call this part of the JS Bundle as the built-in package, this process is called the built-in package.

Interceptor Interceptor

How do we tell the app to access the service pack or the built-in pack? The answer is the Interceptor switch.

  • When Interceptor is selected, we will intercept the request and let the app read the built-in package.
  • When the Interceptor is not selected, it does not intercept the request and lets the app get the service package from the configured service.

Developers running demo for the first time can see that the interceptor is on, accessing the built-in package, and when the app goes live, and when the test is delivered, using the built-in package.

The project structure

The following lists the project structure of concern for development:

. ├ ─ ─ the config │ ├ ─ ─ eros. Dev. Js / / scaffold configuration file │ └ ─ ─ eros. Native. Js / / client configuration file ├ ─ ─ platforms │ ├ ─ ─ android / / android │ ├─ └─ SRC ├─ assets ├─ ├─ ├─ SRC ├─ │ ├─ JS │ ├─ Components │ ├─ Elements │ ├─ components │ │ ├─ apis. Js // API alias configuration │ │ ├─ pages.js // Route alias configuration │ │ ├─ pages.js // Route alias configuration │ │ ├─ apis ├─ ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises │ ├ ─ └─ mock └─ all the pages are heretest// The mock service can be configured in eros.dev.jsCopy the code

There are a few caveats

  • If eros. Dev.js changes, which is if you are running eros dev service, need to disconnect and let scaffolding re-read configuration files. (New packaging entry will be added frequently during development)
  • Eros. Native. Js is the configuration file read by the client. Currently, the client reads it from the built-in package when the app is opened.

Hello Eros

Let’s simply develop a Hello World:

  1. First, close the interceptor in debugging and let the app access the service pack. At this time, the refresh page must be blank because there are no services.
  2. In the root directory of the project, run the development service Eros dev and refresh it to display the built-in demo page. You can modify the code in pages/eros- Demo to see the effect. If you are curious, try it anywhere.

Tips: Double-click the debug button to refresh.

  1. Create a new one in the Pages directoryHello.vueFile.

    Write some very simple syntax in the file:

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello, </text> <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    export default {
        components: { buiButton }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
Copy the code
  1. Exports of eros.dev. Js. If you don’t need it, delete the exports-demo path and enter the new file entry:
"exports": [
    // appBoard 
    "js/config/index.js".// mediator
    "js/mediator/index.vue".// home
    "js/pages/Hello.vue"].Copy the code

Note that the above two mediators correspond to the appBoard and Mediator in eros.native. Js. If there is no correspondence between the two mediators, an error will be reported. 5. Tell app I need to change the homePage again and change the path of page. HomePage in eros.

"page": {
    "homePage": "/pages/Hello.js",}Copy the code
  1. Disconnect the Eros Dev service because scaffolding is told about configuration file changes.
  2. Eros Pack is built in because it tells the app about changes in the configuration file.
  3. Rerun the app.

At this point, the home page is already developed:

pages
Eros.vue 

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hi! </text> <text class="title">Enjoy it! </text> </div> </template> <script>export default {
    }
</script>
<style>
.title{
    font-size: 60;
}
</style>
Copy the code
  1. Modify eros. Dev.js to tell scaffolding to add page:
"exports": [
    // appBoard 
    "js/config/index.js".// mediator
    "js/mediator/index.vue".// home
    "js/pages/Hello.vue".// eros
    "js/pages/Eros.vue"].Copy the code
  1. Register routes, modify js/config/pages. Js, and clear existing configurations in Demo:
export default {
    'Eros': {
        title: 'Eros'.url: '/pages/Eros.js',}}Copy the code

The url here is the relative path to the JS Bundle from the dist directory (there is no JS Bundle now, you need to restart the development service to read the configuration). Note that since it is a JS Bundle, it ends with.js. 12. Restart Eros dev and refresh it. There is no change in eros dev, it is not able to jump to the new page because the route is only configured and the jump method is not triggered.

<template>
    <div style="margin-top: 50px;">
        <text class="title">Hello, </text> <text class="title">developer</text>
        <bui-button class="btn-250" type="primary" value="show eros" @click="showEros">show eros</bui-button>
    </div>
</template>
<script>
    import buiButton from 'Eros/bui/components/bui-button'
    exportDefault {components: {buiButton}, methods: {// Add showEros event to the button to jumpshowEros() {
                this.$router.open({
                    name: 'Eros'
                })
            }
        }
    }
</script>
<style>
.title{
    font-size: 60;
}
.btn-250{
    width: 250;
}
</style>
Copy the code
  1. Double click the debug button to refresh and the jump logic is complete!

Now that Hello World is written, you can write your business from the documentation.

  • Eros template address
  • Eros File Address

Eros and demo are adapted from NetEase Yanzhan Demo (thanks for Zwwill’s open source and guidance), developers can also refer to:

  • Eros NetEase yan selected demo
  • weex-book

Finally, developers need to modify some information in the original project by themselves, and then they can issue the official version of the APP for external use. There are many introductions on the method of release on the Internet, which will not be repeated.

delta

You can click here and write a simple explanation.

There are two cases of app release:

  • If there are changes to the platforms ios/ Android directory (including dependencies on the eros install platform), we will need to re-publish the platforms to the marketplace to re-implement the approval logic, and users will need to re-download from the marketplace.
  • Incremental publishing can be used when the business logic of the project changes, such as adding pages or modifying the logic of the current page, and JS Bundle changes eventually. Every time the APP starts, it will automatically detect the update and download the changed part of JS Bundle, which will take effect after the user restarts.

Eros cli also supports full package generation and incremental package generation:

Generate full package:

$ eros build
Copy the code

Generate incremental packages:

$ eros build -d
Copy the code

At present, it is difficult to set up incremental publishing. After developing the app, developers can refer to Eros -publish to set up incremental publishing service. Experienced students can also deploy EROS -CLI on the publishing machine to write their own publishing system.

For example, lygtQ-EROS -publish is an open-source incremental publishing system written by eros developers based on EROS – Publish. Thank you hodgevk for your contribution.

conclusion

The configuration of the APP development environment is always long, during which there may be a variety of errors, in fact, most students try to baidu can solve it.

As stated in the official document, it is possible to develop small and medium-sized apps quickly after getting familiar with EROS. However, EROS still has many shortcomings, and more people need to join in to improve it. Finally, WE want to give vUE developers another stage.