SpeakerHub.com
user editor átalakítása

Integral Vision

SpeakerHub.com

Növekedés

  • Első commit: 2015. augusztus 15. 7.32

  • 10 field

  • Search API kereső, facetek

Növekedés

  • 2015. december 15. Éles a site

  • kb. 45 field

Új igények

Növekedés

  • Kb 120 field
  • -15, amit már kiszerveztünk 

A szembejövő problémák

a szerkesztés funkció

lassúúúúúú

lassú

A szembejövő problémák

heavy user

unlimited? unlimited.

SSD

Memcache

Segítettek?

A szembejövő problémák

szerkesztés után elvesző adatok

php_value max_input_vars 1000
php_value max_input_vars 1500

Nyomozás

ki volt az?

masquarade

Nyomozás

Mi volt az?

Ki volt az?

Mi volt az ok?

Adatbázis ?

Adatbázis 

Form építés ?

Form építés 

Renderelés

Renderelés

Renderelés

Mire mennyi idő megy el?

User betöltése  < 1sec
Form felépítése 1.5sec
HTML előállítása 25-50 sec
Hálózati forgalom < 1sec
Browser DOM + JS 1-5sec

Meg lenne még egy!

 

autosave

 

Meg lenne még egy!

 

autosave

 

autosave

Hipotézis - Vízió

Tartsuk meg a Field rendszert, Field UI-t

Külön "végpont" legyen

  • form struktúra lekérdezésére
  • és a szerkesztett entity lekérdezésére
  • mentéskor csak a változást küldjük

Külön modul legyen az "API" és a web app

Kísérlet

  • GET /api/[...]/form
  • GET /api/[...]/get
  • POST /api/[...]/file-upload
  • POST /api/[...]/save

"Végpontok"

Kísérlet

"Végpontok"

Mentés

value_is_valid($entity, $form, $field, $value, $delta)

 

 

Mentés

value_is_valid($entity, $form, $field, $value, $delta)

 

 

Kísérlet

"Végpontok"

Mentés

Saját szempontunkból optimálisabb kód

 

Kliens oldal

  1. jQuery + vanilla JS + mustache
  2. React
  3. Vue.js
  1. jQuery + vanilla JS + mustache
  2. Angular1
  3. Angular2-4
  4. React
  5. Vue.js
  1. jQuery + vanilla JS + mustache
  2. Angular1
  3. Angular2-4
  4. React
  5. Vue.js
  1. jQuery + vanilla JS + mustache
  2. Angular1
  3. Angular2-4
  4. React
  5. Vue.js
  1. jQuery + vanilla JS + mustache
  2. Angular1
  3. Angular2-4
  4. React
  5. Vue.js

React

Vue

  • License csak akkor lett MIT
  • TypeScript opcionálisan elhagyható
  • JSX az alapértelmezés
  • Több repó
  • Több SO kérdés válasz
  • Bővebb dokumentáció
  • Több router
  • "sexy"-bb
  • License no para
  • TypeScrip opcionálisan választható
  • Ha szeretnél, használhatsz JSX-et
  • Kisebb funkció halmaz
  • Kisebb, kompaktabb doksi
  • Egy támogatott Router

React

Vue

//PastaItem.vue
<template>
<li class="pasta-dish list-unstyled">
 <div class="row">
  <div class="col-md-3">
    <img :src="this.item.image" :alt="this.item.name"/>
  </div>
  <div class="col-md-9 text-left">
    <h3>{{this.item.name}}</h3>
    <p>{{this.item.desc}}</p>
    <button
      v-on:click="addToOrderNew"
      class="btn btn-primary">Add to order
    </button>
    <mark>{{this.orders}}</mark>
  </div>
 </div>
</li>
</template>
<script>
export default {
 name: 'pasta-item',
 props: ['item'],
 data: function(){
  return {
    orders: 0
  }
 },
 methods: {
  addToOrderNew: function(y){
   this.orders += 1;
   this.$emit('order');
  }
 }
}
</script>
import React from "react";

class PastaItem extends React.Component {
 render() {
  const { details, index } = this.props;
   return (
    <li className="pasta-dish list-unstyled">
     <div className="row">
      <div className="col-md-3">
        <img src={details.image} alt={details.name} />
      </div>
      <div className="col-md-9 text-left">
        <h3>{details.name}</h3>
        <p>{details.desc}</p>
        <button
          onClick={() => this.props.addToOrder(index)}
          className="btn btn-primary">Add to order
        </button> 
        <mark>{this.props.orders || 0}</mark>
      </div>
    </div>
   </li>
  );
 }
}
export default PastaItem;

Hogy néz ki a kód?

Melyikhez nyúlnál hozzá szívesebben fél év múlva?

 

Akkor ennyi. Vue legyen!

Az eredmény

Pezsgő!

Pezsgő?

Nem megy a jelszó változtatás

Ok, de miért?

Nem csinál semmit ez a ...!

OK. Valami JS hiba történt a böngészőben.

De mi volt az a hiba?

A varázspálca

rollbar.com

Mi volt a hiba?

Mi volt a hiba?

Mi volt a hiba?

IE 11.0

Babel + Webpack config

  • Legyen mindig source-map
  • A .babelrc-t jól végig kell gondolni
  • rollbar.com

Köszönjük a figyelmet!

Kérdés?

integralvision.hu

Csáki István @csakiistvan

Tikász Vince @tikaszvince