Front-End


  • React with AEM

    React to HTML (https://github.com/killercentury/sc-osp-react-demo/blob/master/multi-react-components-using-es5-module.html)

    HTML to React as children components (https://github.com/aknuds1/html-to-react, HTML React AEM.md)

    3rd components:

    • react-cookie
    • react-modal
    • react-slick (with slick-carousel)
    • react-sticky
    • react-text-truncate
    • react-helmet

  • build tool and dev-server

    plugins:

    • happypack
    • CommonsChunkPlugin
    • HotModuleReplacementPlugin
    • NoErrorsPlugin
    • optimize.DedupePlugin/UglifyJsPlugin/OccurenceOrderPlugin/AggressiveMergingPlugin
    • DefinePlugin
    • bower-webpack-plugin
    • html-webpack-plugin
    • extract-text-webpack-plugin

    loaders:

    • babel-loader
    • less-loader
    • css-loader
    • style-loader
    • postcss-loader
    • eslint-loader (preloader)
    • raw-loader
    • null-loader
    • svg-loader
    • svg-url-loader
    • url-loader
    • file-loader

    server:

    • react-hot-loader
    • webpack-dev-server
    • webpack-node-externals
    • webpack-hot-middleware

  • awesome runtime environment when developing React components:

    export default radium(ReactComponent);

    • ATOM
    • MOLECULES
    • ORGANISMS

  • styling: inline css for React components

    which can add functionality for :hover and @media


    • npm registry, change to internal one
    • npm link, when developing multiple packages as dependent libraries (maybe better to use lerna)
    • npm run publish-module

    repos:

    • osp-react-components
    • sg-react-components

  • ESNext+ compiler

    presets: es2015 es2016 stage-2|0 react

    also provide babel-polyfill when testing


  • test runner

    mocha mocha-webpack mocha-junit-reporter

    also provide describe & it & forEach

    run signal unit test or suite: xx.only()


  • super simple mock server built by Node.js

    only use it when developing components

    which is using powerful wiremock in e2e testing and backend api

    • record (with proxy)
    • playback
      • real data
      • fake data

    Record and Playback - WireMock

    built by Java but can Running as a Standalone Process - WireMock


  • code style rules standard

    with Intellij tool to fix automatically

    actually using babel-eslint:

    • extends airbnb
    • globals: describe, it

  • @import

    @variable (colors)

    `.Component { .nav { .title {

    }
    .content {
    
    }
    

    } }`


  • to serve static osp-ui page and related libraries

    deploy by ansible scripts


  • just useless ornament

    e2e testing built by robot framework


  • Gradle 3.0

    • also Groovy
    • MavenPublication
    • deploy to nexus inhouse
    • task scripts
      • mock server (wiremock)
      • e2e test and reports

    actually very trick with Java stack tool in FED project


  • E2E testing

    • nightwatch (not been used, prefer nightmare if use node.js stack)
    • robot framework (python stack, Selenium2Library)

  • autoprefixer to support multiple browsers automatically (with webpack plugin)


  • ansible scripts in common deployment repo

    playbooks with different roles

    different env config properties in YAML file

    • create (ec2) instance
    • configure instance
    • continuous-integration

  • CI/CD, Jenkins 2.0

    • Groovy (Jenkinsfile.groovy: Pipeline as code)
    • build slave (aws ec2)
    • checkpoint stage
      • build
      • e2e
      • deploy to dev
      • deploy to sys
      • e2e test
      • deploy to uat
    • shell scripts
      • ci.sh
      • e2e.sh
      • deploy.sh
      • publish.sh
      • publish-docs.sh

  • React 组件测试必备,提供了浅渲染解决方案与优雅的 API

    • mocha
    • mocha-webpack
    • mocha-junit-reporter
    • enzyme
    • chai
    • chai-enzyme
    • sinon
    • sinon-stub-promise
    • jsdom

  • StyleGuide infrastructure

    • basic foundation
    • cross-brands
    • modular
    • responsive

    copy and hack menu.js file if meeting SG issues


  • one basic styling dependencies of StyleGuide


Gavatar

Favorite
1
Views
159
Gavatar
Favorite
Views
159