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

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

jQuery + vanilla JS + mustache
React
Vue.js

jQuery + vanilla JS + mustache
Angular1
Angular2-4
React
Vue.js

~~jQuery + vanilla JS + mustache~~
Angular1
Angular2-4
React
Vue.js

~~jQuery + vanilla JS + mustache~~
~~Angular1~~
Angular2-4
React
Vue.js

~~jQuery + vanilla JS + mustache~~
~~Angular1~~
~~Angular2-4~~
React
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!”