Skip to content

Instantly share code, notes, and snippets.

@hwclass

hwclass/b4b-transition.md

Created January 2, 2018 12:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hwclass/e92eec3cafcb6fa9ac72a5b9a3ef4155 to your computer and use it in GitHub Desktop.
Save hwclass/e92eec3cafcb6fa9ac72a5b9a3ef4155 to your computer and use it in GitHub Desktop.
Download ZIP
Semi-Fragile Transition Period (for Business Client-side Codebase) document
Raw
b4b-transition.md

Blacklane for Business

Semi-Fragile Transition Period (for Business Client-side Codebase)

Update 1: Choosing a client-side framework/library for managing views 👏

Problem:

  • The code is buggy 🐛
  • The code is open for having problems after every release :hurtrealbad:
  • The same codebase occurs side-effects for each functionality as B2C and B4B ♻️
  • The code do not have specification to follow ✏️
  • The code is basically needs modern approaches with a domain-specific investigation 🌺

Solution: Restruct the client-side stack, choose modern tools, bump up the (app/developer) performance:

There is already a war between so many frameworks and libraries for client-side. For simplicity, reusability and maintainability, libraries using JSX/virtual DOM is gaining a tendency to be the actual winners. During that "war", community creates its own choices and the library called Preact is one of them. So the first item in our agenda on the way of rewriting the whole stack should start with Preact.

Recommended stack:

  • Preact
  • A client-side state manager (coming soon)
  • A preprocessor for CSS or a CSS-in-JS solution (coming soon, I hope)
  • ...

Why we need Preact?

Alt text

  • Only 3KB (React is already between 40 - 80 KBs even after gzipping), yes, sure
  • Effective memory usage
  • More performant than React (Yes, I know, I know, you'll say that never trust on benchmarks. But wait and let's see the difference)
  • Same API with React -- ES6 Class Components -- High-Order Components -- Stateless Pure Functional Components -- Contexts -- Refs -- Virtual DOM-diffing -- h() method support (Why?)
  • Support for all React lifecycle methods
  • No need to use this.props or this.state declarations; they're all passed into our render() methods, even using deconstructing makes code easier to understand:
class SomeClassName extends Component {
    constructor (props) {
        super(props);
        this.state = {
            someState: ''
        };
    }
    render({someProp}, {someState}) {
      return (
        <div>
            <p>{someProp}</p>
            <p>{someState}</p>
        </div>
      )
    }
}
  • Use class instead of ugly className for elements
<!-- React -->
<div className="some-class">Some content</div>

<!--Preact-->
<div class="some-class">Some content</div>
  • Linked State
  • Support for CSS Modules, LESS, Sass and Stylus
  • Also, as the same with React, a good fit for creating single-page applications
  • Fully compatable with libraries working with React (Redux, MobX, Recompose, etc.)
  • Working with React DevTools Extension
  • Already growing community for plugins
  • There is already a command-line tool to make the dev process easier for Preact .. and others

Note: There are also some tiny differences between React like absence of PropType, Children (which is not necessary in Preact) and Synthetic Events (instead Preact is using addEventListener).

Companies using Preact

Sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment