You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+35-32Lines changed: 35 additions & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -14,36 +14,37 @@
14
14
15
15
Use Vue.js to develop a cross-platform full stack application of [Objc china](https://objccn.io/).
16
16
17
-
-[x] ✅ Desktop applications, support Mac, Linux, Windows three platforms
18
-
-[x] ✅ Web applications, support for desktop browsers and mobile browsers
19
-
-[x] ✅ Mobile App, currently only supports the Cordova framework, support iOS、Android、Windows Phone、BlackBerry four platforms
20
-
-[ ] ❌ Mobile phone native App, intended to use Weex framework, the same support for both iOS and Android platform
17
+
-[x] ✅ Desktop application available for three platforms, Mac, Linux and Windows
18
+
-[x] ✅ Web application supports desktop browsers and mobile browsers
19
+
-[x] ✅ Mobile App which uses the Cordova framework, supports iOS、Android、Windows Phone and BlackBerry platforms
20
+
-[ ] ❌ Native Mobile App, which can use Weex framework to support both iOS and Android
21
21
22
-
> Note: This project is purely just for fun, please support [喵神(@onevcat)](https://github.com/onevcat), support[Objc china](https://objccn.io/).
22
+
> Note: This project is just a bit of fun and purely for learning purposes, please support [喵神(@onevcat)](https://github.com/onevcat) and[Objc china](https://objccn.io/).
23
23
24
-
> [中文介绍 chinese introduction](./README_CN.md)
24
+
25
+
> [Chinese introduction](./README_CN.md)
25
26
26
27
## Preface
27
28
28
29
### 1. About me
29
30
30
-
I am a full-time iOS developer, non-front-end developer. Due to contact with Weex development, thereby came into contact with the `Vue.js`.
31
+
I'm a full-time iOS developer, not a front-end developer. Due to take part in Weex development, I get to know the `Vue.js`.
31
32
32
33
### 2. Why write this project?
33
34
34
-
1.At the beginning of this idea is from a netizen, he asked me in my blog, the Internet has not a better Weex demo? I said that [@EVAN YOU](http://evanyou.me/)’s Hacker News is the best. Later netizen say, the bloggers can write one? I did not answer at the time. In fact, this thing I have always remember in my heart.
35
+
1.The motivation to write this project is from an e-pal, he left a message on my blog - was there a better Weex demo? I recommended [@EVAN YOU](http://evanyou.me/)’s Hacker News. Later he supposed me to make one. I refused but kept it in mind.
35
36
36
-
2. May 19 this year, GitHub use Electron rewrite the macOS and Windows client, coupled with the recent year development of cross-platform getting hotter, for some companies, the Web and app should be needed, app Also need iOS and Android two platforms, and even those who have to develop Weixin mini programs, desktop applications(despite a few), but with the same can be developed with the Electron. I also initiation of the idea of want to be eager.
37
+
2.On May 19 this year, GitHub used Electron rewrite the macOS and Windows client, coupled with the recent year development of cross-platform getting hotter, to some companies, Web and app are all needed, app also need support iOS and Android two platforms, and more they develop Weixin mini programs. Although desktop applications are a few, Electron can develop them all. I'm going to have a try.
37
38
38
39
3. As a result of the contact to the Vue.js, of course, do not want to stay in the primary, would like to advanced, [@EVAN YOU](http://evanyou.me/) especially given the recommendations, is more practice, more practice. In order to speed up the pace of progress, I own private to find the project for practicing.
39
40
40
-
4.As for why to choose Objc China, the reason is actually very simple, because I am an iOS developer. In iOS developers, Objc is basically well known (do not know?), [喵神(@onevcat)](https://github.com/onevcat)is basically well known, I personally worship [喵神(@onevcat)](https://github.com/onevcat), so I chose Objc China to write.
41
+
4.Why choose Objc China, the reason is typically simple - I am an iOS developer. To iOS developers, Objc is basically well known, [喵神(@onevcat)](https://github.com/onevcat)as the same. I admire him very much [喵神(@onevcat)](https://github.com/onevcat) and decide to write Objc china without hesitation.
41
42
42
43
5. Because of love ... ...
43
44
44
-
### 3. Why this development of cross-platform project without Weex?
45
+
### 3. Why not use Weex to build this cross-platform project?
45
46
46
-
After I finished the project, found that Vue code directly converted to Weex project, can not be achieved, a lot of error. And not all of them can be repaired immediately. I believe that I use the wrong way, not Weex's problem. By the way, Weex has released a new version, and then there is time to put Weeks version of the open source again.
47
+
AWhen I completed the project and tried to convert it directly into Weex, I got a lot of error and most of them cannot be fixed immediately. I believe that I use the wrong way, not Weex's problem. By the way, Weex has released a new version, and then there is time to put Weeks version of the open source again.
47
48
48
49
Well, into the topic, Let's introduce this project:
49
50
@@ -68,15 +69,15 @@ Well, into the topic, Let's introduce this project:
68
69
69
70
## 🔨 How to build
70
71
71
-
Due to Objc china website is directly response html data, so I want to simulate the network request to return data, should build a server, write API return data.
72
+
As the Objc china website is directly response html data, to simulate the network request to return data, I build a backend and write API to return data.
72
73
73
74
I use Express framework to build a server, set up in the 8081 port, and write routing, the request will go to 8080, open the server will automatically open the background.
74
75
75
76
My current development environment is node v6.11.0 , npm v3.10.10, Vue.js v2.8.2.
76
77
77
78
```bash
78
79
79
-
# install dependencies 安装依赖
80
+
# install dependencies
80
81
npm install
81
82
82
83
# serve with hot reload at localhost:8080
@@ -85,7 +86,7 @@ npm run dev
85
86
# serve with hot reload at localhost:8080
86
87
npm run start
87
88
88
-
# build for production with minification 打包
89
+
# build for production with minification
89
90
npm run build
90
91
91
92
# build for production and view the bundle analyzer report
@@ -100,16 +101,16 @@ npm run e2e
100
101
# run all tests
101
102
npm test
102
103
103
-
#打包 Mac 应用
104
+
#build Mac application
104
105
npm run build:mac
105
106
106
-
#打包 Linux 应用
107
+
#build Linxu application
107
108
npm run build:linux
108
109
109
-
#打包 Win 应用
110
+
#build Win application
110
111
npm run build:win
111
112
112
-
#打包 Cordova 应用
113
+
#build Cordova application
113
114
npm run build:app
114
115
115
116
```
@@ -142,13 +143,13 @@ I put a Makefile in the project, you can do this according to this.
142
143
> cordova run ios
143
144
> cordova run android
144
145
145
-
Cordova only generated a shell of the app, inside the specific content still read the webpage, in the corresponding application which has a www inside the folder, this folder is to load the page inside. JavaScript package will generate the www folder, just replace the content which inside the Cordova corresponding platform’s www folder.
146
+
Cordova only generated a shell of the app, all the content are still read from the web page. There is a folder called WWW in the corresponding application and used to load the page. JavaScript package will generate the www folder, just replace the content under this folder.
146
147
147
-
Add a few words, app development to the present so mature era, if you develop a large app, with Cordova framework to do, do not use Objective-C or Swift to develop, do not do any optimization, the user experience is really not as good as the native fast. I have a special package to experience the Cordova app, did not do any optimization, packaged out on the experience, if it is critical of the user, on the current major app close to the perfect experience compared to really do not feel a little sense of satisfaction. If you really want to use front-end technology development app, to give 2 recommendations, if it is Cordova framework, we must try to optimize it, otherwise, the performance of app is not as good as the native performance. If you want to have a close to the native experience, then you can consider using React Native or Weex.
148
+
In addition, if you develop a large app with Cordova framework and no any optimization, the user experience is really not as fast as the native. If you really want to use front-end technology to develop app, share you two recommendation: The one is trying to do optimization when use Cordova framework. The other is using React Native or Weex to get the experience close to native.
148
149
149
150
## 🚀 Cross-platform development
150
151
151
-
JavaScript cross-platform development packaged into desktop applications, mainly use the Electron framework. Here you need to install the devdependencies inside "electron", "electron-builder", "electron-packager" these three framework. Make sure the other path configuration in the webpack have configured completed.
152
+
Package this project into desktop application by JavaScript cross-platform development, mainly used the Electron framework. Here you need to install these three dependencies "electron", "electron-builder" and "electron-packager" in devDependencies. Configure other paths in the webpack.
152
153
153
154
About Cordova installation, I make complaints a little network problems in china. If you are not over the wall in china, it is really painful. For example, Not over the wall and in a very poor network environment, installation of Cordova globally, lots of error, even for the complete installation of cnpm after the addition of the iOS platform will later report a problem of 'co' file can not find, I suspect cnpm could not install the command complete. Later, I go back home, over the wall and network environment is very good, All of a sudden the npm installation is complete. But there is a small episode: If Cordova iOS 4.4.0 template throw a error, suggest installation of several times, the reason is still for the network over the wall in china, no catch to it.
154
155
@@ -284,7 +285,7 @@ Vuex management status is very convenient. Login status saved in the state insid
284
285
<imgsrc='./image/Gifs/Web-login.gif'>
285
286
</p>
286
287
287
-
Once the user is not logged in, click on the purchase of e-books, to determine no user login will jump to the login page.
288
+
If there is no login in information and user click the purchase button to buy an e-book, it will jump to the login page.
288
289
289
290
Another point is to say that because this is a SPA, so the routing inside are using Router-link to achieve, but did not use `<a>` tag jump, the effect is to jump and do not have to request data, jump quickly. This user experience is really cool.
290
291
@@ -300,7 +301,7 @@ When you are using the base option in HTML5 history mode, you don't need to incl
300
301
<imgsrc='./image/Gifs/Web-logout.gif'>
301
302
</p>
302
303
303
-
Log out of the page Similarly, once the user logs out, all show the user name will become a status to be logged in, the shopping cart on navigationBar also be disappeared. Manage status with Vuex, very Exciting.
304
+
Similarly, once the user logs out, all places showing the user name will become a status to be logged in, the shopping cart on navigationBar also be disappeared. Manage status with Vuex, very exciting.
304
305
305
306
<palign='center'>
306
307
<imgsrc='./image/Gifs/Web-email.gif'>
@@ -312,21 +313,21 @@ This is the email form validation, not too much technical content.
312
313
<imgsrc='./image/Gifs/Web-buy.gif'>
313
314
</p>
314
315
315
-
Here is the shopping cart page, where the use of the MVVM page binding ideas, the page on the four buttons, any button will immediately change the following total price. iOSer learn that Vue.js on the MVVM implementation of thinking worthy.
316
+
Here is the shopping cart page and use the MVVM page binding ideas. There are four buttons on the page, clicking any one will immediately change the related total price. To iOSer, it's worthy to learn the implemention on the MVVM.
316
317
317
318
Then this is the iPhone's Safari performance, the speed is well.
318
319
319
320
<palign='center'>
320
321
<imgsrc='./image/Gifs/Web-iPhone.gif'>
321
322
</p>
322
323
323
-
In the cross-platform of these applications, the best experience, I think it is the application of Mac. Use satisfaction is very high.
324
+
In the cross-platform of these applications, the best experience, I think, is the application of Mac.
324
325
325
326
<palign='center'>
326
327
<imgsrc='./image/Gifs/Web-Mac.gif'>
327
328
</p>
328
329
329
-
Finally Cordova framework build the mobile phone app, experience is unsatisfactory, in short, not optimized Cordova, for picky me, I was not satisfied. See this showcase below:
330
+
Finally is the mobile phone app build by Cordova framework, I'm a little picky and not satificated with the unoptimized Cordova. See this showcase below:
330
331
331
332
iPhone application
332
333
@@ -340,19 +341,21 @@ iPad application
340
341
<imgsrc='./image/Gifs/Web-iPad app.gif'>
341
342
</p>
342
343
343
-
## 🤔 After the completion of the project, I Fall into meditation
344
+
## 🤔 Reflection
344
345
345
-
First Amway [element-ui](https://github.com/ElemeFE/element)this project, use it to build the project, really very fast, a app can be efficient development. the development of Vue.js students must have heard of this library. Saving a lot of time can put more energy on business development.
346
+
I strongly recommand you the [element-ui](https://github.com/ElemeFE/element)(Vue.js developers must have heard of this library). It is a really fast way to build projects by using it, an app can be efficient developed. Save time and put more energy on business development.
346
347
347
-
Everyone is saying that now is a large front-end era, mobile development and front-end integration is inevitable. But the development of the two platforms is still a lot of different, I experienced a front-end development and iOS development, thinking a lot, front-end and iOS are a lot of places to learn from each other, both have their own advantages and disadvantages. Then I intend to write a series of articles on these aspects. The engineering, component, routing, MVVM of front-end, respectively, and iOS where the advantages and disadvantages of each other, what can learn each other. (Feeling to dig a big pit)
348
+
Everyone says "Now is in the era of front-end, mobile development and front-end integration is inevitable". But there are many different aspectes of the development between front-end and iOS, I experience them all and think a lot. Font-end and iOS, they have lots to learn from each other in their own advantages and disadvantages, I intend to write an article series on those aspects - engineering, component, routing, MVVM. (Dig a big hole to jump)
348
349
349
350
## 📜 Feature
350
351
351
-
If I have free time, I want to support Weex, take Vue.js into a complete Weex application, become native app, the performance will not be bad. So cross-platform development should be the whole platform.
352
+
If I had more free time, I would like to support Weex. Taking Vue.js into a complete Weex application, to become a native app, the performance will not be bad. After then, it can cover the entire platform.
352
353
353
354
## ❗️ Errata
354
355
355
-
If found in the project what is puzzled or found a bug, welcome to submit PR or issue, thank you very much, 🙏🙏🙏
356
+
If you find a bug, welcome to sumbit your PR.
357
+
If you feel confused by something, welcome to submit your Issues.
0 commit comments