Skip to content

Latest commit

 

History

History
938 lines (629 loc) · 17.6 KB

index.mdx

File metadata and controls

938 lines (629 loc) · 17.6 KB
Raw

import { CodeSurfer, CodeSurferColumns, Step, } from "code-surfer"; import "prismjs/components/prism-tsx"; import "prismjs/components/prism-jsx"; import { github, vsDark } from "@code-surfer/themes"; export const theme = vsDark; import { Appear, Image } from 'mdx-deck'

import Layout from "./components/layout.tsx"; import EffectImage from "./components/image/index.tsx"; import Panel from "./components/panels/panel.tsx"; import BigPanel from "./components/panels/big-panel.tsx"; import BigBadge from "./components/panels/big-badge.tsx"; import Badge from "./components/panels/badge.tsx"; import VeryBigBadge from "./components/panels/very-big-badge.tsx"; import Formula from "./components/formula.tsx"; import Terminal, { loadingSpinner } from './components/terminal/index.jsx';

import Button from "./examples/style/button.tsx"; import MobxPingPong from "./examples/mobx-redux/mobx-app.jsx"; import TodoAppLayout from "./examples/todo/layouts/index.tsx"; import TodoAppPage from "./examples/todo/pages/index.tsx";

Prototyping Quickly in React

Using prototyping quickly in React

> __

Theory - Tools - Examples

# Plan

Theory

How to make applications more quickly
Motivation

So let me demonstrate...

What is project speed?

Project Speed

<Formula style={{marginTop: "20px"}}> V = (Ideas) / (Delta t) - underset(Friction)(F)

<Layout fade particles logo style={{textAlign: "center"}}>

DELAY

<BigPanel color="#2ECC71" style={{marginTop: "10px"}}>Instincts (N ms) + Emotions (10 * N) + Reason (100 * N)

Conclusion
1. Project architecture and tools are crucial
2. Developers are users

Tools

How to develop applications more quickly?

GENERAL PROTOTYPING ISSUES
1. Code refactoring 2. Structure refactoring 3. Finding objects

Let's make some conclusions...

Architecture should be - Findable
  • /shared-components (inputs, buttons, panels, etc.) - <span style={{color: "#2ECC71"}}>Useful
  • /components (application parts) - <span style={{color: "#2ECC71"}}>Findable
  • /pages (routing) - <span style={{color: "#2ECC71"}}>Findable
  • /services (dependency injection) - <span style={{color: "#2ECC71"}}>Usable
TypeScript

Strict types solve <span style={{color: "#2ECC71"}}>Findable, Credible issues

Even "any" is better than nothing

1. TypeScript makes code easier to read and understand
2. TypeScript provides highly productive development tools for JavaScript IDEs and practices, like static checking
Application State

Global state solves <span style={{color: "#2ECC71"}}>Findable, Credible, Useful, Usable issues

Flux came from ECS (Entity - Component - System Pattern)

Styles (StyleJSX library)
Should be incapsulated inside components Findable

I am a button!

https://github.com/zeit/styled-jsx

# StyleJSX Magic 













GENERAL PROTOTYPING SOLUTIONS


  * Code refactoring *

  - To be fixed with TypeScript -


  * Structure refactoring *

  - To be fixed with Flux Pattern -


  * Finding objects *

  - To be fixed with Flat Structure -






  The formula of speed



  
    Gatsby + React + IOC + MOBX
  











Goal
Base
Alternative






Engine
React
Vue




Build
Gatsby
NextJS




State
IOC + MobX
Redux Observable










Why not VueJS



  1. Current versions (1.x, 2.x) of VueJS do not support Typescript

  2. Even with community libraries Vue does not support typing-by-default

  3. Vue is more heavy than modern react

  4. Vue is less popolar, look at trandings

  5. React community is larger and there are thousands of libraries for React

  6. React is USA Facebook, Vue is China Alibaba

  7. Vue can be credible built with only NuxtJS, but there are multiple ways to build React with Babel

  8. One of the best building systems Gatsby support Vue as experimental feature

  9. Vue does not have any official testing tool. To test Vue you have to use Jest that is developed for React








Why not Redux



  Let's look at the ping pong app:
  It sets "is pinging" in 1 second to true
  

    
  








  




  
  




  
  




  
  




  
  




  
  




  
  




  
































  Redux



  1. Requires lots of code for simple things

  2. Does not support typing-by-default



  MobX



  1. Simple, but requires additional libraries like ReactIOC**

  2. Limitations with replacing arrays








  
    Mobx

    Simple
    Mutable
  
  
    Redux

    Complex
    Immutable
  





It's hard to make connections between multiple immutable objects








Any questions?


Before countuing...






  Why use build systems (over Webpack)


    

  • Routing
    • 

  • Plugins
    • 

  • Templates
    • 

  • Community
    • 

  • User guides
    • 







Build systems


NextJS vs GatsbyJS







Why not NextJS


Let's compare the systems' homepages...
















  + GatsbyJS static by default

  + GatsbyJS can be used with any provider

  + GatsbyJS is for large or small apps

  + GatsbyJS has templates


<BigPanel style={{marginTop: "20px"}}>


    

  • NextJS isomorphic by default
    • 



    

  • NextJS can be used only for Zeit provider
    • 

  • NextJS is for small apps
    • 

  • NextJS hasn't templates
    • 








How to start with Gatsby



  







How to deploy your app



  







Coding Time!







  Let's look at the to-do app:
  We have to implement an input field and a list of TODOs
  

    
      
    
  






































































  
    
  







Final Questions?











How to make presentations like this