Декларативное целеполагание на примере seesu.me

Декларативное целеполагание на примере seesu.me

  1. Причины динамизма и сложностей реализации
  2. Организация кода
  3. Перспективы более лаконичного и производительного кода

Причины динамизма и сложностей

  1. Принципы проектирования интерфейсов
  2. Объем взаимодействия с сервисами
  3. Технические ограничения

Принципы проектирования интерфейсов

Идеи Джефа Раскина

  1. Zoom UI
  2. Отказ от модальных окон
  3. Польза на чих
  4. Три правила быстроты

Джеф Раскин

Zoom UI

Общий план <> частное

Zoom UI

Eagle mode

Raskin for Mac

Apple Watch

Apple Watch

Отказ от модальных окон

Польза на чих

Поиск

Страница артиста

Страница артиста

Поиск файлов

Принципы проектирования

Идеи Джефа Раскина

  1. Zoom UI
  2. Отказ от модальных окон
  3. Польза на чих
  4. Три правила быстроты

Три правила быстроты

  1. Вычисления не блокируют пользователя
  2. Полная схема — мгновенно
  3. Запросы сортируются

Схема — мгновенно

Приоритет важному

habr.ru/p/211659

Взаимодействие с сервисами

Взаимодействие с сервисами

Взаимодействие с сервисами

Источники моих сложностей с seesu.me

  1. Принципы проектирования
  2. Объем взаимодействий с сервисами
  3. Технические ограничения

Технические ограничения

Восстановление состояний

Принцип декларативного целеполагания

ООП, события

«Клиенские» приложения

Превосходство кулинарии

Превосходство кулинарии

ДЦ на практике

  1. Состояния
  2. Сложные состояния
  3. «Вложенности»
  4. Взаимоотношения между моделями и «вложенными» моделями
  5. Сильно вложенные модели
  6. Связь между состояниями и полями данных на удаленном сервере
  7. Шаблонизация

Состояния

            model.states = {}
            model.updateState('title', 'Jack')
        

Сложные состояния

          'compx-fullName': [
            ['firstName', 'lastName'],
            function(firstName, lastName) {
              return firstName + ' ' + lastName
            }
          ]
      
          'compx-fullName': [
            ['firstName', 'lastName'],
            function(firstName, lastName) {
              return firstName + ' ' + lastName
            }
          ]
      
          'compx-fullName': [
            ['firstName', 'lastName'],
            function(firstName, lastName) {
              return firstName + ' ' + lastName
            }
          ]
      

Сложные состояния. Ember.js

                fullName: function () {
                  return this.get('firstName') + ' '
                    + this.get('lastName');
                }.property('firstName', 'lastName')
            

Вложенность

            model.nestings = {}
            model.updateNesting('bestFriend', tomModel)
        

Комбинирование

            'compx-isYoungest': [
              ['@age:friends', 'age'],
              function(ages, age) {
                return age < Math.min.apply(null, ages)
              }
            ]
        

Сильно вложенные объекты

            'compx-averageAge': [
              ['@age:friends.friends'],
              function(ages) {
                return ...
              }
            ]
        

Состояния ← данные сервера

      
            
            
        

Шаблонизация

          <span
            pv-class="{{ selected && 'item-selected'}}"
            pv-text="{{item_name}}"></span>
        
          <span
            pv-class="{{ selected && 'item-selected'}}"
            pv-text="{{item_name}}"></span>
        
          <span
            pv-class="{{ selected && 'item-selected'}}"
            pv-text="{{item_name}}"></span>
        
          <span
            pv-class="{{ selected && 'item-selected'}}"
            pv-text="{{item_name}}"></span>
        

habr.ru/p/210558

Больше оптимизаций и лаконичности

dev.w3.org/csswg/css-containment/

gleb.arestov@gmail.com