阿里雲開發平臺初探：剛畢業小程序猿的不專業測評

1、前言

阿里雲【雲開發平臺】是面向開發者打造的一站式、全雲端的開發平臺，打開瀏覽器就能夠開發、調試、上線，所測即所得，並結合無服務器的模式從新定義雲原生時代的研發工做方法論。該平臺現持續增長新的應用開發環境，29日【通用Web應用】環境已上線，本文將簡要介紹阿里云云開發平臺的開發體驗，以及從菜鳥的角度來不專業地衡量這個工具的優缺點，我就以【通用Web應用】環境來進行測試。

2、測評和體驗

1. 瀏覽器輸入：https://workbench.aliyun.com/...，點擊下方的 【免費雲開發】 按鈕，注意須要註冊阿里雲帳號。
2. 登陸成功後能夠直接進入應用建立

1. 選擇應用場景爲 WEB，解決方案選擇 Ali Midway FaaS 一體化解決方案，所謂的一體化解決方案就是同時包含前端 React 與後端函數研發的方案。

1. 填寫一些應用信息後，就能夠點擊完成建立應用，以後應用會自動初始化倉庫，
2. 等待倉庫初始化完成就能夠進行開發了。

1. 打開 README.md，瞭解如何進行開發。 安裝文檔裏面的描述，一步步開始開發。

安裝開發依賴

打開終端
首先須要安裝開發依賴

$ npm i --registry=https://registry.npm.taobao.org

啓動 react 本地 watch 和 函數本地 Dev Server
在終端中會輸出 本地 Dev Server 的URL連接

$npm run dev

> react-faas-demo@0.1.0 dev /home/admin/workspace/codeup.aliyun.com/5eaa70633fd198000181a4d3/repo_2020-04-30_2020043000037040
> npm run watch & npx f invoke -p


> react-faas-demo@0.1.0 watch /home/admin/workspace/codeup.aliyun.com/5eaa70633fd198000181a4d3/repo_2020-04-30_2020043000037040
> node scripts/watch.js


start a server at http://127.0.0.1:3000

Please open http://67846370-a1e0-4470-b9da-46bce1dca8b9-3000.xide.aliyun.com/index.html


Hash: dd186c5c519f450ff3a7
Version: webpack 4.42.0
Time: 36119ms
Built at: 05/06/2020 5:53:52 PM
                         Asset       Size        Chunks                   Chunk Names
           asset-manifest.json  535 bytes                [emitted]        
                    index.html   1.76 KiB                [emitted]        
          static/js/0.chunk.js   1.02 MiB             0  [emitted]        
      static/js/0.chunk.js.map   1.09 MiB             0  [emitted] [dev]  
           static/js/bundle.js   31.2 KiB  runtime-main  [emitted]        runtime-main
       static/js/bundle.js.map   32.4 KiB  runtime-main  [emitted] [dev]  runtime-main
       static/js/main.chunk.js   31.3 KiB          main  [emitted]        main
   static/js/main.chunk.js.map   21.6 KiB          main  [emitted] [dev]  main
static/media/logo.5d5d9eef.svg   2.61 KiB                [emitted]        
Entrypoint main = static/js/bundle.js static/js/bundle.js.map static/js/0.chunk.js static/js/0.chunk.js.map static/js/main.chunk.js static/js/main.chunk.js.map
[0] multi ./src/index.tsx 28 bytes {main} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./src/index.css] ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css 611 bytes {main} [built]
[./node_modules/css-loader/dist/runtime/api.js] 2.46 KiB {0} [built]
[./node_modules/object-assign/index.js] 2.17 KiB {0} [built]
[./node_modules/prop-types/checkPropTypes.js] 3.55 KiB {0} [built]
[./node_modules/react-dom/cjs/react-dom.development.js] 919 KiB {0} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {0} [built]
[./node_modules/react/cjs/react.development.js] 65.3 KiB {0} [built]
[./node_modules/react/index.js] 189 bytes {0} [built]
[./node_modules/style-loader/lib/addStyles.js] 10.2 KiB {0} [built]
[./src/App.tsx] 53 bytes {main} [built]
[./src/Layout.tsx] 2.09 KiB {main} [built] [1 warning]
[./src/index.css] 1.26 KiB {main} [built]
[./src/index.tsx] 879 bytes {main} [built]
[./src/serviceWorker.ts] 4.65 KiB {main} [built]
    + 16 hidden modules

WARNING in ./src/List.tsx
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

  Line 18:70:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank


 @ ./src/Layout.tsx 6:0-26 24:48-52
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./src/Layout.tsx
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

  Line 1:27:  'useEffect' is defined but never used  @typescript-eslint/no-unused-vars


 @ ./src/App.tsx 1:0-30 2:15-21
 @ ./src/index.tsx
 @ multi ./src/index.tsx

WARNING in ./src/Home.tsx
Module Warning (from ./node_modules/eslint-loader/dist/cjs.js):

  Line 30:9:  <iframe> elements must have a unique title property  jsx-a11y/iframe-has-title


 @ ./src/Layout.tsx 4:0-26 34:48-52
 @ ./src/App.tsx
 @ ./src/index.tsx
 @ multi ./src/index.tsx
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.02 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 2.02 KiB {HtmlWebpackPlugin_0} [built]

構建

# 發佈前須要構建前端代碼
$ npm run build

部署

點擊左側菜單欄第一個Tab，進行發佈

3、總結

打分：90+

一、流程設計合理，操做簡便，像我同樣的菜鳥能夠體驗一下，對初學者友好
二、界面簡潔看着很舒服
三、代碼倉庫使用很方便
四、惟一體驗較差的一點就是安裝依賴的時候下載速度較爲緩慢，期待以後優化