Minh Quy MQuy

Optimize

Recently, when we check javascript error logs in our system, we notice that there are several issues which are related to the "old browser" like

Uncaught ReferenceError: Promise is not defined
Uncaught ReferenceError: fetch is not defined

Bokio

Test the project

Source code: https://bitbucket.org/MQuy/bokio
Demo version: http://bokio-web.studynow.vn
Or watch online at youtube: https://www.youtube.com/watch?v=9fYaz41mmKo

How to setup the project

Go to this url: http://railsinstaller.org/en

Bokio Frontend State Management

State Tree

There are many ways to manage our state in frontend, but in my opinion (after debugging websites which use react), state can be classified into three categories:

Domain state: data that we get from our servers (list of invoices, customers, signalR ...).
App state: data that we use for specific components (will explain details in the section below).
UI state: data that represents how UI is displayed.

App State ("Dynamic")

I think best way to explain this concept is via example.

	set nocompatible
	filetype off

	set rtp+=~/.vim/bundle/Vundle.vim/

	let mapleader = "\<Space>"

	call vundle#rc()

	Bundle 'gmarik/vundle'

	set -g prefix C-a
	unbind C-b
	bind a copy-mode

	bind r source-file ~/.tmux.conf

	setw -g mode-keys vi
	set -g status-keys vi

	set -g mouse on

	defmodule App do
	def split_case(str), do: split_case(str, [[], []])

	def split_case(<<char, remain :: binary>>, [upper, lower]) when char < 97 do
	split_case(remain, [[upper, char], lower])
	end
	def split_case(<<char, remain :: binary>>, [upper, lower]) do
	split_case(remain, [upper, [lower, char]])
	end
	def split_case("", [upper, lower]) do

	compilation.plugin('html-webpack-plugin-alter-asset-tags', (htmlPluginData, cb) => {
	...
	htmlPluginData.body = inlineTags.concat([{
	tagName: 'script',
	closeTag: true,
	attributes: {
	type: 'text/javascript'
	},
	innerHTML: template
	}]);

	<html lang="en">
	<head>
	<link rel="preload" href="./vendor.js" as="script">
	<link rel="preload" href="./app.js" as="script">
	<body>
	<main id="root" style="height: 100%"></main>
	<script type="text/javascript">
	scripts = ['./vendor.js','./app.js'];

	if (!("fetch" in window && "Promise")) {

	assets = ['vendor.js', 'app.js'];
	if (!("fetch" in window && "Promise" in window)) {
	assets.unshift('polyfill.js');
	}
	scripts.forEach(function(src) {
	var scriptEl = document.createElement('script');
	scriptEl.src = src;
	scriptEl.async = false;
	document.head.appendChild(scriptEl);
	});

	{
	"editor.tabSize": 2,
	"editor.detectIndentation": true,
	"editor.trimAutoWhitespace": true,
	"files.trimTrailingWhitespace": true,
	"terminal.integrated.copyOnSelection": true,
	"explorer.confirmDelete": false,
	"window.zoomLevel": 0,
	"workbench.sideBar.location": "left",
	"editor.minimap.enabled": false,