, 2 |
. 2017 . . 2015 Google mobile-friendly , 2016 . 60-70 . 2 . 2 2 74%, 6 .
17 () , m.2gis.ru. : , .
, :
(2G, 3G, 4G) Wi-Fi , .
. JS, .
CSS- JS API. , IE8. , , .
- . , , .
JS- : . .
Preact. . Preact React, API Virtual DOM. (3 kB gzip 45 kB React) . Preact React 90%.
Preact React. , propTypes, , . 3. github.
, . require.ensure . . , Android Browser 5 kB gzip.
JS . . JS 3 :
Preact, . . app- 143 gzip. . , , , . app- , .
1 : . UI. 11 85 . . . , . 6 11 , app- 6 . app- , JS-, . . app- 38%.
. , 99,9% SPA, . . , , . . . , . , , .
, . , , .
. , . , , id. : , , , . . .
. , id. id URL, . URL - id , , 10 , . .
, . . . UI- , ( ) . , . , , .
34 . 2 000 , 77 000 1425 . , . , . JavaScript.
TypeScript. TypeScript JS. , .
Redux. Redux TypeScript. , payload meta , , . :
export const setScrollTop = (payload: number) => ({
type: APPCONTEXT_CHANGE_SCROLL_TOP,
payload
});
export const setErrorToFrame = (errorCode: ErrorCodeType) => ({
type: APPCONTEXT_SET_ERROR_TO_FRAME,
payload: { errorCode }
});TypeScript ( , ). , , , 69 . 100 , . .
export default function (state: AppContext = defaultState, action: AppAction): AppContext {
switch (action.type) {
case APPCONTEXT_ADD_FRAME:
return appAddFrame(state, action.payload);
case APPCONTEXT_REMOVE_ACTIVE_FRAME:
return appRemoveActiveFrame(state);
....
case APPCONTEXT_HIDE_MENU:
return { ...state, isSideMenuShown: false };
default:
return state;payload meta Discriminated Unions. , action AppAction, :
export type AppAction = AppAddFrameAction | AppRemoveActiveFrame | AppChangeFramePos | AppChangeMode | AppChangeLandscapeAppAction 60 (appAddFrameAction, AppRemoveActiveFrame . .). . (type) . , payload meta.
export interface AppAddFrameAction {
type: 'APPCONTEXT_ADD_FRAME';
payload: Frame;
}
export interface AppRemoveActiveFrame {
type: 'APPCONTEXT_REMOVE_ACTIVE_FRAME';
}
export interface AppChangeFramePos {
type: 'APPCONTEXT_CHANGE_FRAME_POS';
payload: FramePos;
}TypeScript , 'APPCONTEXT_ADD_FRAME' payload Frame, 'APPCONTEXT_REMOVE_ACTIVE_FRAME' .
Preact TypeScript. Preact propTypes, . TypeScript . , , .
export interface IconProps {
icon: SVGIcon;
width?: number;
height?: number;
color?: string;
className?: string;
}
export class Icon extends React.PureComponent {
constructor(props: IconProps) {
super(props);
}
public render() {
const { color, icon } = this.props;
const iconStyle = color ? { color: this.props.color } : undefined;
return (
);
}
}TypeScript . , , 2017 2200 issues. Microsoft ES6. .
85 . , . . code review . Makeup.
Makeup . , .
Makeup . , pixel perfect .
Makeup , , , .
. . . 90% , . , . TypeScript , Makeup .
(, ) .
JS-. CSS-. .
