Three questions

  1. Fast delivery project: CODMI-M solution application

  2. Multi-terminal interactive scheme output

  3. Seamless collaborative exploration by multiple people

First, use a diagram to understand the product requirements

Because the development time of this demand is only one week, and the development and visual draft output at the same time, we need to invest many people into the development at the same time, so it is very important for us to understand the demand thoroughly and split the module well, which is whether we can deliver the project as scheduled.

Before entering the development, we tried to draw a map (referring to the unified language of DDD) — auxiliary division of labor and quick check for each node; At the same time, the known risk points are presented directly to the product side.

The left part is the delivery end and adaptability, and the red part is our predicted risk; The right part disassembs the interaction flow of the whole product and provides technical solutions in node interaction.

After such disassembly, in the development of each student only need to pay attention to their own part, and the ability to adapt, it is ok.

Let’s take a look at how to deliver projects quickly in a week from each side of the implementation.

H5 main active page implementation

Focus on problem solving 1. Fast delivery project: CODMI-M solution application

The application of CodMi -m

Codmi-m is a general solution for MOBILE H5 based on the development of mobile terminal in the past two years.

It is based on the scaffolding CodMi, focusing on the encapsulation of the application layer, integrating SDK and API encapsulation commonly used in the site, enabling developers to focus more on business logic.

In this project, the H5 part of the development with the help of CODMI-M, quickly built the active page.

Application of CSS Modules

Sometimes we write styles that inadvertently affect other styles of CSS, but we don’t notice them in time. Or when we write a style, it doesn’t work, overwrite something for no apparent reason, etc. Questions like these became increasingly desperate as our project grew and more and more developers were involved.

So, we use CSS Modules to avoid these problems.

import styles from "./style.module.scss";
const RedEnvelope = () => {
return (
 <div className={styles.envelopeCover}>xxx</div>
)
}
export default RedEnvelope;
Copy the code

But if you write like this, some friends will say:

  • You need to use the hump to name each time

  • It is too cumbersome to reference the styles object every time you write the style

  • CSS Modules mixed with global CSS classes can be difficult to manage

  • References to undefined CSS modules are also not warned

Ok, it’s really a little inconvenient to say so, so here I’ll take you to upgrade again.

Use react-CSS-modules to solve the CSS modules problem above
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);
Copy the code

In this case, by using react-CSS-modules:

  • You don’t have to force the hump anymore

  • Styles does not need to refer to this object every time the CSS module is used

  • Receive a warning when referencing an undefined CSS module

  • There are obvious differences between global CSS and CSS modules, for example:

<div className='global-css' styleName='local-module'></div>
Copy the code

Componentized management and component implementation

Componentized management is a cliche, but it is extremely important, especially in tight deadlines and collaborative development.

First of all, the page is split into five independent components, which basically do not affect each other. In this way, the whole red envelope activity only needs to configure a specific component entrance on the home page, and the students in charge of a specific floor can enter the development stage at any time.

Implementation of the winner list component

The winner list component, for example, was developed independently and designed completely independently.

In order to provide a sense of atmosphere and interaction for the event, a list of winners is designed on the product form, and the top 100 winners are loaded on the page each time for scrolling. The list of winners in this requirement is implemented in a seamless scrolling manner.

The current algorithm of seamless scrolling is to copy the original data and reset the scrolling to the initial state when scrolling to the replicated data area, for example:

Winner
======
Winner
======
Copy the code

In the example above, the scope of the ‘======’ package is called viewable, beyond which the content is not visible. Since there is only 1 data, we copy this data. When we scroll to AB’s replicated data and CSS scrolling ends, we immediately reset the scrolling state to its initial state:

======
Winner
======
Winner
Copy the code

This time there is only one data display in the visual area of the list of winners, so we can append only the first data in the list to the end.

[0,1,2,3,4] // list of original data [0,1,2,3,4,0] // list of replicated dataCopy the code

The next step is to implement dynamic effects. The implementation of dynamic effects mainly relies on setTimeout and CSS transtion:

TSX <div onTransitionEnd={handleTransitionEnd}> [0,1,2,3,4,0]. Map (item => <div>item</div>) <div> // js const transitionTimer = () => { const delayTime = 2000; Window.settimeout (() => {// Calculate the value of tranformY const y = calculateTranformY(); // Set to style setTranformYToCSS(y); }, delayTime); }; const handleTransitionEnd = () => { if (isNeedResetTransition()) { resetTransition(); } transitionTimer(); };Copy the code

Constant extraction

The most complex logic of the whole red envelope project is the matching of the activity state and the user state, the user state is divided into: initial state, power state, lottery state and lottery state. Activity states are divided into initial state, ongoing state, end state and abnormal state.

What we need to do is to match different page states according to each different user state and each different activity state, so the design of the whole project needs to think well in advance.

Since different framework components may need to perform state matching, the first thing to do here is to extract constants first, encapsulate them in the outermost layer, and each component can be called at any time.

// common/constants. Ts export const USER_STATUS = {InitialUserStatus: 1, // HelpUserStatus: 2, // power status CompleteUserStatus: 3, // EndsUserStatus: 4 // Lottery status}; Export const STATUS = {ProgressStatus: 2, // EndsStatus: 4, // ErrorStatus: 5, // exception};Copy the code

This not only reduces the number of unreadable components, but also improves maintainability and readability. And components that invoke the same constant state are less likely to get state matches written incorrectly due to clerical errors.

The implementation of small procedures

There is no new page in this small program, but it needs to be transformed in the existing several interfaces, need to control the display of some elements or not, and some new related floors in the interface; At the same time, considering the number of users and user experience of The Spring Festival activities, it is necessary to fix the problem of home page lag caused by slow loading of multi-tab commodity floors.

  1. The process of sorting out requirements and codes is also the process of comprehensively considering new floor signs

Both the front and back ends enter development at the same time, so comprehensive consideration and interface communication are crucial before development.

As part of the interface need according to the different floors of the gift card identification of new, some floors need to determine whether the Spring Festival gala red envelopes, and some also need to distinguish between ordinary theme or during the activity, the theme of the front and back side is required at this time together before the development of comprehensive consideration of gift CARDS, logo, then according to the logo into the development.

  1. The new functionality is similar in that it wraps methods instead of pasting and copying them

Multiple new floors involve page hopping, where instead of pasting and copying between pages, methods are encapsulated to accommodate different scenarios.

function gotoActivity(url) {
  let jumpUrl = url;
  if (jumpUrl && jumpUrl.indexOf("http") == -1) {
    jumpUrl = `https:${jumpUrl}`;
  }
  if (jumpUrl) {
    let url = '/pages/login/wv-common/wv-common?h5_url=' + encodeURIComponent(jumpUrl)
    wx.navigateTo({
      url,
    });
  }
}
Copy the code
  1. The mock function of wechat developer tool is used to simulate the interface data to reduce the pressure of interface integration in the later stage.

Implementation of multi-terminal interaction

Focus on problem solving 2: Multi-terminal interactive solution output

The time of the visual draft overlaps with the front-end time, so we can make use of this gap to do multi-end interactive research programs. There are two main bodies in the whole flow, 1 is H5 active page, used for drainage; 2 is jingdong polite small program in the spell lucky page, that is, the main page.

Disassemble from the figure into the following steps:

  1. Jump from THE “H5 activity page” of JD APP directly to the “Fight luck page” of JD Polite mini program;
  2. Share from “H5 activity page” of JD APP to wechat session box;
  3. Open the wechat mini program from the wechat session box, and locate the H5 activity page in jingdong Polite mini program; In the second step, as long as you set the small program ID and path, wechat will handle the jump.
  4. From the H5 activity page in wechat Jingdong polite mini program, open the polite mini program “fight luck page”.

At the same time reuse the old batch tie card logic, as well as the implementation of polite small procedures in the login state through.

We focus here on the implementation of multi-endpoint interaction.

1. Jump directly from the “H5 Activity page” of JD APP to the “Good Luck Page” of JD Polite mini program.

Because native and H5 sometimes need active interaction, for example, H5 can call native functions (such as taking photos) and call H5 events, we provide rich customization capabilities for H5 of our red envelope activities with the help of Jingdong WebView.

Export const gotoMP = (id: string) => {u = navigator. Let jsonParams = {businessType: "jumpToMiniProgram", // String type, fixed field, must be this callBackName: "Cb ", //string, the name of the method h5 uses to receive the callback. If h5 wants to receive the callback in window.callback(jsonStr), the value of this pass is "window.callback" params: {username: "Gh_xxx ", // fill in the miniprogram original ID (miniprogram) path: 'pages/xx/xx? Id =${id} ', // miniProgramType: 0, // Optional. Open dev, Demo or official},}; const jsonString = JSON.stringify(jsonParams); if (!! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/)) { //iOS window.webkit.messageHandlers.JDAppUnite.postMessage({ method: "notifyMessageToNative", params: jsonString, }); } else { //Android window.JDAppUnite && window.JDAppUnite.notifyMessageToNative(jsonString); }};Copy the code

This section of code can be taken directly to use, complete from JD APP jump to the realization of small procedures. A few notes:

  1. It is important to distinguish between the iOS environment and the Android environment. There are differences in the invocation methods between the two.

  2. Jump to params under jsonParams object of wechat applet, there is a miniProgramType attribute. Here 0 is jump to online development version, 2 is jump to experience version

  3. For ts warning Property ‘webkit & JDAppUnite’ does not exist on type ‘Window & Typeof globalThis’, we need to implement global interface in xxx.d.ts Window declaration.

Jump 2. Share from THE “H5 Activity page” of JD APP to the wechat session box

Here, we use the sharing component @jmfe/ JM-JDShare of JD App to provide a simple client-side sharing interface for our H5 page.

This JNPM not only supports sharing, but also supports Beijing password function. If you are interested in children’s boots, you can check it out: npm.m.jd.com/package/@jm…

import jdShare from "@jmfe/jm-jdshare"; Jdshare.setshareinfo ({title: "come! You are about to miss out on the 1888 YUAN JINGdong E card!" Url: window.location.href, img: "Https://img10.360buyimg.com/imagetools/jfs/t1/175484/6/25230/10720/61d3e626Eac21a76e/de6be01ec69895cd.jpg", */ channel: "Wxfriends", callback: null, clickCallback: null, qrparam: null, keyparam: Null, timeline_title: "", showFriendList: "", /** * the following is a small program parameter is not associated with the above parameter */ mpId: "gh_xxx", mpIconUrl: "Https://img12.360buyimg.com/imagetools/jfs/t1/101710/27/20890/155471/61e52ebdE1e249fe6/e70a71969319eaa7.jpg", mpPath: `pages/login/wv-xx/wv-xx?h5_url=${encodeURIComponent( window.location.href.replace("#/", "&source=YLWX"), )}`, mpType: */ // incentiveBizType: "1", // incentiveBizId: "INCENTIVEBIZID_DEMO",});Copy the code

Again, this code is a snippet of code that can be taken and used. It should be noted that there is an mpType attribute in the card shared to wechat mini program. 0, click the card to go to the online development version, 2 to go to the experience version.

Jump 3. From the H5 activity page of jingdong Polite mini program in wechat, open the “Fight luck page” of polite mini program.

Here, we use wechat’s official Web-view as a container for carrying web pages. As an open ability, the official also provides us with the related methods (wx. MiniProgram. NavigateTo).

Note here: the jump path should be preceded by /, if there is no /, the jump will not pass at all.

/ / < script type = "text/javascript" SRC = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js" > < / script > / / javascript export const toGiftMiniProgram = (id:string)=>{ wx.miniProgram.navigateTo({url:`/pages/xx/xx?id=${id}`}) }Copy the code

How to quickly understand and respond to requirements in a project?

Focus on problem 3: how to quickly add people, and add people is +1>2 effect.

The first must be “good design + componentized module management”, this front laid a good foundation, no longer repeat.

This part focuses on the work and experience of new students halfway into the project.

The project to understand

The schedule of this project is relatively tight, and there are few participants at the beginning. In order to ensure the normal progress, increase the involvement of developers halfway. The first thing to do is to quickly understand the project background, visual design progress, key nodes (development, test, online) and other basic information.

Possible problems and solutions

This development is responsible for rendering the two banner lists at the bottom of the active page, and the data comes from ace interface. Here are a few things to grasp first when getting an assignment:

  1. The scope of the task, for the front-end developer, is to understand the docking product requirements, visual design, data interfaces, and test cases. For example, this development task is to render two independent banners, and the data only depends on ACE interface, and does not involve the handover with back-end personnel. For such requirements of logical independence and low degree of data dependence, we can immediately put into development.

  2. Corresponding to PRD and visual draft development schedule. If the process is unclear, the visual draft changes frequently or may be revised later. So it is necessary to actively communicate with the product visual, confirm the logic, visual draft. And make a bottom.

  3. Pages are components. For a project, the mapping of the overall architecture can be reflected in the routing design, and the developer needs to determine whether the current logic is stored separately on the page or referenced as a component on other pages. For example, two lists of banners can be written as components.

  4. People communication. The efficiency of docking personnel and the reliability of information determine development progress. If necessary, the communication efficiency can be improved through joint development of offline conference rooms.

conclusion

Drawing on the unified language from DDD, and coDMI-M common scheme played a key role in this project; During function implementation, slots are reserved to facilitate the integration of multi-component access and multi-person support projects with less pressure.

At the same time, in the project, precipitation of a variety of components of the implementation, and interactive jump scheme.

Most importantly, I was able to deliver the project within 1 week, and I did some technical precipitation and thinking about the future delivery of such projects.

Thank you for your cooperation in this article