One, foreword

Ali Cloud [Cloud development platform] is a one-stop, all-cloud development platform for developers. You can open a browser to develop, debug and go online. What you measure is what you get. The platform is continuously adding new application development environment, on the 29th [General Web application] environment has been online, this paper will briefly introduce the development experience of Ali Cloud development platform, and from the perspective of the novice to measure the advantages and disadvantages of this tool, I will use the [general Web application] environment to test.

Second, evaluation and experience

  1. Workbench.aliyun.com/ Visit Ali Cloud development platform,… [Free cloud development] button, note that you need to register ali Cloud account.

  2. After successful login, you can directly enter application creation

  3. The application scenario is WEB and the solution is Ali Midway FaaS integrated solution. The so-called integrated solution includes front-end React and back-end function development at the same time.

  4. After filling in some application information, you can click Create App, and then the app will automatically initialize the repository,

  5. Wait for the repository initialization to complete before you can start development.

  6. Open readme.md to learn how to develop. Start developing step by step as described in the installation documentation.

Installation development dependency

To open a terminal, you first need to install development dependencies

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

Start react Local Watch and function Local Dev Server. The terminal outputs the URL of the local Dev Server

$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 28bytes {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.css611 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]
Copy the code

build

#The front-end code needs to be built before release
$ npm run build
Copy the code

The deployment of

Click the first Tab on the left menu bar to publish

Third, summary

Grade: 90 +

1, the process design is reasonable, easy to operate, newbies like me can experience, friendly to beginners

2. The interface is simple and comfortable

3. Code repository is very convenient to use

4. The only bad experience is that the download speed is slow when installing the dependency, so I’m looking forward to optimization later