Skip to main content

Web App Delivery Optimization

· 4 min read

Two golden rules: minimize 1) latency 2) payload

To Minimize Latency…​

  • Reduce DNS lookups

    • Use a Fast DNS Provider, AVG Res Time (cloud flare < DNS Made Easy < AWS Route 53 < GoDaddy < NameCheap). NOTE: results vary in certain regions
    • DNS Cache. TTL Tradeoff = perf <> up-to-dateness
    • reduce number of 3p domains or use services with fast DNS (conflicts with domain sharding optimization for HTTP1)
    • ==DNS prfetching== <link rel="dns-prefetch" href="//www.example.com/" >

  • reuse TCP connections.

  • minimize number of HTTP redirects

  • use a CDN

    • E.g. Netflix dev their own hardware and cooperate w/ local ISPs to serve CDN

  • eliminate unnecessary resources

  • cache resources on the client

    1. HTTP cache headers
      • cache-control for max-age
        • Note, for JS files : A simple way to ensure the browser picks up changed is by using output.filename substitutions with hashes. Webpack Caching
      • expires
        • If both Expires and max-age are set max-age will take precedence.
    2. last-modified, ETag headers to validate if the resource has been updated since we last load it
      • time-based Last-Modified response header (not used often because nginx and microservices)
      • content-based ETag (Entity Tag)
        • This tag is useful when for when the last modified date is difficult to determine.
        • done by hashing
    3. a common mistake is to set only one of the two above

  • compress assets during transfer

    • use JPEG, WebP instead of PNG
    • HTTP2 compresses headers automatically
    • nginx gzipped

To minimize Payload…​

  • eliminate unnecessary request bytes

    • especially for cookies
      • even though HTTP standard does not specify a size limit on the headers / cookie, but browsers / servers often enforce …
        • 4KB limit on cookies
        • 8KB ~ 16 KB limit on headers
      • cookies are attached in every request

  • parallelize request and response processing

    • while browser is blocked on resources, preload scanner looks ahead and dispatch downloads in advance: ~20% improvement

Applying protocol-specific optimizations​

  • HTTP 1.x

    • use HTTP keepalive and HTTP pipelining: dispatch multiple requests, in parallel, over the same connection, without waiting for a response in serial fashion.
    • browsers could only open a limited number of connections to a particular domain, so …
      • domain sharding = more origins * 6 connections per origin (DNS lookups may introduce more latencies)
      • bundle resources to reduce HTTP requests
      • inline small resource

  • HTTP 2.X

    • With binary framing layer introduced, we get one connection per origin with multiplexing/steam prioritization/flow control/server push, so remove 1.x optimization…
      • remove unnecessary concatenation and image splitting
      • use server push: previously inlined resources can be pushed and cached.

Tools​

References​

How Does the Economic Machine Work?

· 2 min read

Why Are There Economic Cycles?​

Markets are made up of individual transactions, where one person's expenditure is another person's income.

A person's disposable expenditure includes "money" and "credit." When a person's "income" increases, their repayment ability improves, allowing "credit" to increase, which in turn boosts "expenditure." Moderate "credit" helps enhance productivity.

In the economic growth curve:

  1. Productivity rises steadily.
  2. Borrowing occurs in cycles. The short-term debt cycle generally lasts 5-8 years and is controlled by the central bank.
  3. Because people prefer to borrow money rather than repay it, over the long term, the speed of debt accumulation will exceed income, thus forming a long-term debt cycle.

Economic Cycles

The ratio of debt to income is called the debt burden. When the debt burden becomes excessive and reaches the peak of long-term debt, the economy enters a deleveraging period (such as the Great Depression in the U.S. in the 1930s, the Japanese economic bubble in the 1980s, and the 2008 global financial crisis).

There are four means of deleveraging: 1. Reducing expenditure, 2. Decreasing debt, 3. Wealth redistribution, 4. Issuing currency.

Final Recommendations​

  1. Do not let the growth rate of debt exceed that of income (too much debt burden can overwhelm you);
  2. Do not let the growth rate of income exceed productivity (this will cause you to lose competitiveness, as companies can hire others at a better cost-performance ratio);
  3. Make every effort to improve productivity (which plays the most critical role in the long term).

What kind of things are worth doing?

· One min read

To keep up with the times, we need to cultivate our own good habits and effective "systems." Good habits lead to skills; while skills can be replicated, a good "system" is hard to develop. How can we cultivate a good system? By building a worldview that serves the people; utilizing various effective methodologies; and creating our own reuse and positive feedback systems. A solid system with changing goals

SOLID Design Principles

· One min read

SOLID is an acronym of design principles that help software engineers write solid code within a project.

  1. S - Single Responsibility Principle. A module should be responsible to one, and only one, actor. a module is just a cohesive set of functions and data structures.

  2. O - Open/Closed Principle. A software artifact should be open for extension but closed for modification.

  3. L - Liskov’s Substitution Principle. Simplify code with interface and implementation, generics, sub-classing, and duck-typing for inheritance.

  4. I - Interface Segregation Principle. Segregate the monolithic interface into smaller ones to decouple modules.

  5. D - Dependency Inversion Principle. The source code dependencies are inverted against the flow of control. most visible organizing principle in our architecture diagrams.

    1. Things should be stable concrete, Or stale abstract, not ==concrete and volatile.==
    2. So use ==abstract factory== to create volatile concrete objects (manage undesirable dependency.) 产生 interface 的 interface
    3. DIP violations cannot be entirely removed. Most systems will contain at least one such concrete component — this component is often called main.

3 Programming Paradigms

· 2 min read

Structured programming vs. OO programming vs. Functional programming

  1. Structured programming is discipline imposed upon direct transfer of control.

    1. Testability: software is like science: Science does not work by proving statements true, but rather by proving statements false. Structured programming forces us to recursively decompose a program into a set of small provable functions.

  2. OO programming is discipline imposed upon indirect transfer of control.

    1. Capsulation, inheritance, polymorphism(pointers to functions) are not unique to OO.
    2. But OO makes polymorphism safe and convenient to use. And then enable the powerful ==plugin architecture== with dependency inversion
      1. Source code denpendencies and flow of control are typically the same. However, if we make them both depend on interfaces, dependency is inverted.
      2. Interfaces empower independent deployability. e.g. when deploying Solidity smart contracts, importing and using interfaces consume much less gases than doing so for the entire implementation.

  3. Functional programming: Immutability. is discipline imposed upon variable assignment.

    1. Why important? All race conditions, deadlock conditions, and concurrent update problems are due to mutable variables.
    2. ==Event sourcing== is a strategy wherein we store the transactions, but not the state. When state is required, we simply apply all the transactions from the beginning of time.

Thinking Software Architecture as Physical Buildings

· One min read

What is architecture?​

Architecture is the shape of the software system. Thinking it as a big picture of physical buildings.

  • paradigms are bricks.
  • design principles are rooms.
  • components are buildings.

Together they serve a specific purpose, like a hospital is for curing patients and a school is for educating students.

Why do we need architecture?​

Behavior vs. Structure​

Every software system provides two different values to the stakeholders: behavior and structure. Software developers are responsible for ensuring that both those values remain high.

::Software architects are, by virtue of their job description, more focused on the structure of the system than on its features and functions.::

Ultimate Goal - ==saving human resources costs per feature==​

Architecture serves the full lifecycle of the software system to make it easy to understand, develop, test, deploy, and operate. The goal is to minimize the human resources costs per business use-case.

Knowledge workers, how to take truly restful breaks?

· 2 min read

Why taking breaks?​

  • Growth = Pressure + Taking Rests If people take too much pressure but too less rests, then they will burn out. If people take too many rests but too little pressure, then they cannot grow. The high performer should properly assign pressure and rests, in order to achieve high-speed yet sustainable growth.

What does "truly restful" mean?​

The most treasurable resources of a knowledge worker are ==willpower and power of attention==. And truly restful breaks should recover these resources.

How to take truly restful breaks?​

To recover willpower and power of attention, guiding principles are

  1. Fully switch off. Stay away from the Internet or anything that consumes willpower and attention.
  2. Take short breaks early and often.
  3. Get out of the office. Staff who did any work-related activities at lunch were rated as more fatigued by their colleagues at the end of the day.

Restful breaks vs Unrestful breaks​

  1. Restful breaks: relaxation, take a nap, take a walk, social, etc.
  2. Unrestful breaks: eat something, cognition (read the news, check emails, play video games, watch videos, etc.)

Systematic solution​

  • Short-term

    1. Being unfocused and get back to default mode network
      1. Take a walk/run outdoor.
      2. Return to nature.
      3. positive constructive daydreaming (PCD)
    2. Pretend to be someone else to encourage myself.
    3. Chat with friends.
    4. Drink a cup of coffee and take a nap immediately for 25 mins.

  • Mid-term

    1. Taking a few days off to recharge and no work at all.

  • Long-term

    1. meditation.
    2. sleep well. Good sleep makes skills and knowledge "grow" in the brain.

How to Get Lucky?

· 2 min read

Self-fulfilling prophecy: Believe that you are lucky, and you will be lucky because you will be more willing to explore opportunities, accept challenges, and persevere; rather than just feeling happy about good outcomes.

Lucky people have three personality traits:

  1. Extroverted
  2. Open-minded
  3. Relaxed (low neuroticism)

How to create good luck?

  1. Participate in new activities and experience new things
  2. Trust your intuition and interests
  3. Be optimistic, when playing soccer, take a few more shots, and you'll eventually score
  4. Be good at finding the silver lining in bad situations

What is the essence of good luck?

Creating opportunities, discovering opportunities, and having the courage to act

What does this have to do with mindfulness?

Mindfulness = stepping out of your subjective perspective and noticing the value of things around you

Buddhist perspective:

  • We oppose the "law of attraction" because fantasizing about good outcomes is actually a form of "greed."
  • We advocate for a systematic approach to probability, which is essentially "form is emptiness."
  • We encourage discovering good luck outside of routine tasks, which actually avoids "delusion."
  • We use holistic thinking to break normalizing biases, which is practicing "no-self."
  • So who says Buddhism is useless? If you truly excel in Buddhism, you wouldn't need to seek the Buddha for trivial matters like promotion and fortune.

Debounce, Throttle and RequestAnimationFrame

· One min read

These are web techniques to optimize UI events handling and make transitions smoother.

  • debounce: Grouping a sudden burst of events (like keystrokes) into a single one.
  • throttle: Guaranteeing a constant flow of executions every X milliseconds. Like checking every 200ms your scroll position to trigger a CSS animation.
  • requestAnimationFrame: a throttle alternative. When your function recalculates and renders elements on screen and you want to guarantee smooth changes or animations. Note: no IE9 support.

What is the difference between debounce and throttle? try here

Why It Is So Hard to Make a Good Decision

· 2 min read

Due to the spotlight effect: ==Daniel Kahneman says “A remarkable aspect of your mental life is that you are rarely stumped,” and mistakenly believe “what you see is all there is.”== People only see what they see and want to see, making it hard to step outside of their own perspective. Therefore, it's important to frequently ask oneself, "Why do I think this way?"

The author identifies four major challenges in the decision-making process and proposes solutions:

  1. Narrow framing <> Broaden options
  2. Confirmation bias <> Test assumptions with facts
  3. Short-term emotion <> View decisions from a distance
  4. Over-confidence <> Prepare for mistakes

Ray Dalio also states, recognize that 1) the biggest threat to good decision-making is harmful emotions, and 2) decision-making is a two-step process (first learning and then deciding).

Examples illustrating how people often make poor decisions:

  • Career choices, for instance, are often abandoned or regretted. An American Bar Association survey found that 44% of lawyers would recommend that a young person not pursue a career in law.
  • A study of 20,000 executive searches found that 40% of senior-level hires “are pushed out, fail or quit within 18 months.”
  • More than half of teachers quit their jobs within four years.
  • One study of corporate mergers and acquisitions—some of the highest-stakes decisions executives make—showed that 83% failed to create any value for shareholders.

What to do? Solve it with a process. ==In decision-making, process is six times more important than analysis.==

  • Because understanding our shortcomings is not enough to fix them.
  • People’s decision-making processes are generally too simplistic.
    • The final decision maker should be both the challenger and the ultimate judge.
    • Franklin’s moral algebra
    • Pros-and-cons

About Tian Pan

Driven technology architect and entrepreneur with deep expertise in building highly-scalable, enterprise-grade SaaS applications. Full-stack specialist with a strong focus on designing flexible, scalable solutions that meet complex, evolving demands.

[object Object]

Stay up to date