Доклад о веб-компонентах и Polymer

Сегодня отметился докладом на томском локальном митапе фронтэнд разработчиков TomskJS.
Рассказывал про веб-компоненты и Polymer. Презентацию смотреть на Слайдшаре

или скачивать по ссылке.

Видео:

Polymer и NotifyPropertyChanged в JavaScript

Есть замечательный фреймворк построения веб-приложений — Polymer. Это даже скорее не фреймворк, а реализация идеологии WebComponents в современных реалиях веб-браузеров.

Если кратко, то с его помощью можно реализовывать полноценный, удобный и быстрый (как с точки зрения производительности решения, так и скорости разработки) MVVM в JavaScript:

<dom-module id="my-component">
  <template>
    <h4>ToDo list for {{name}}:</h4>
    <ul>
      <template is="dom-repeat" items="{{model.todoitems}}">
        <li>{{item.title}}</li>
      </template>
    </ul>
    <button title="ChangeName" on-tap="ChangeName"></button>
  </template>
</dom-module>
<script>
Polymer({
  is: 'my-component',
  name: 'Artur',
  model: {
    items: [
      {title: '1'}
    ]
  },
  ChangeName: function() {
    this.model.name = this.name + "_1";
  },
});
</script>

В WPF мы привыкли, что интерфейс перерисовывается автоматически, при изменении значения свойства: this.name = ‘New Name’;. Однако у многих js-mvvm-фреймворков, присвоения приходится производить с помощью магических функций: this.set(‘name’, this.name + «_1»). В Polymer успешно работает первый (удобный :)) вариант, однако при работе с массивами и вложенными объектами эти прелести заканчиваются. Код добавления новых элементов в список ToDo выглядит примерно так:

Add: function() {
  this.push('items', {title: 'another item'});
}

Редактирование же элементов в списке (например, изменение title) будет еще более ужасным:

  this.set('items.1.title', 'new title!');

Continue reading

Долгожданный дизайнер для Xamarin.Forms

Кроссплатформенному UI-фреймворку Xamarin.Forms давно не хватало визуального дизайнера. Ну или хотя бы возможности в реальном времени, без занимающего минуту-две перезапуска приложения, посмотреть на результат своей работы.

И пока Xamarin не хотели выпускать и показывать свои разработки в этом направлении, потихоньку появились альтернативные возможности. Одна из них — это бета-версия Gorilla Player. Раскручен, прост в установке и достаточно неплох в использовании. Однако это всё на демо-проектах.
Когда заходит речь об использовании инструмента в серьезных приложениях, то сразу всплывают ограничения: не работают объявленные в App.xaml стили, сложности с Конвертерами и кастомными контролами.
Решение для Gorilla Player в использовании Gorilla SDK, однако завести всё это с использованием Xamarin.Forms 2.0 оказалось очень сложно (и лично мне не удалось вовсе :)).

Мы рассмотрим другое решение.
Continue reading

Включение упавших тестов в email-уведомления на TFS 2015 (scripted builds)

В TFS 2015 появилась новая система конфигурации сборок, которая в заметно лучшую сторону отличается от предыдущей системы, основанной на XAML. Конфигурирование билдов и создание собственных шагов сборки стало намного проще, и для этого больше не нужно обладать космическим набором знаний :)

Однако система новая, и поэтому некоторыми возможностями, которые были встроены в предыдущую версию, она пока не обладает.
С одной из таких проблем мы сегодня и разберемся.

Предыдущая система сборок предоставляла подробные email-оповещения о свалившихся тестах. В этих письмах, в частности, были перечислены упавшие тесты. В случае интеграционного тестирования это очень удобно: тесты зависят от внешних систем и поэтому могут иногда падать, и по списку непрошедших тестов легко диагностировать проблему и решить, нужно ли её исправлять, или это «типичная» проблема внешних систем, которая «пройдет» вместе со следующей сборкой.
Continue reading

Комфортная Android-like верстка в iOS (XibFree)

Давайте признаем очевидное. Верстка экранов в iOS ужасна. Сравнивая с html, с WPF, с Android, с WinPhone — везде iOS проигрывает.
Верстка в iOS исторически напоминала WinForms (с аналогом якорей-Anchor’ов в виде AutoresizingMask). Однако WinForms уже давно отошло в прошлое, а iOS всё живет и живет :)
Да, на смену AutoresizingMask пришли Constraints, но работа с ними до жути неудобна, дизайнер ненаглядный, а результат работы — нечитаемый уже через неделю после создания.

А вообще, помимо удобства, наибольшей проблемой, конечно, становится динамическая верстка элементов. Если мы пришли из мира WPF/Android, то скучать по простейшему StackLayout/LinearLayout будем очень-очень сильно.
Возьмем например типичную задача: верстка элементов в строчку, при этом некоторые элементы могут быть спрятаны.

<stacklayout>
    <button></button>
    <button Visibility="Collapsed"></button>
    <button></button>
</stacklayout>

Чтобы задать такую верстку в iOS — придется изрядно помучаться. В случае со «старым» AutoresizingMask — это и вовсе невозможно, и придется разруливать координаты кнопок руками при каждом изменении видимости кнопок.
В случае «нового» и «продвинутого» LayoutConstraints — это, конечно, возможно, но намного сложнее и куда менее очевидно, чем xml-верстка.
Continue reading

Запуск Genymotion и Xamarin Android Player на Windows 10

Для всех у кого есть проблемы с запуском эмуляторов на Windows 10. Ссылка, которая мне помогла:

https://forums.xamarin.com/discussion/comment/139102/#Comment_139102
Цитата на всякий случай:

Step 1
If you previously installed Xamarin Player and already got the error message uninstall Xamarin Player and Virtual Box, then go to AppData/ and delete the complete XamarinPlayer directory.. At least make sure that under AppData there is NO longer any XamarinPlayer directory anymore available otherwise it won’t work.
Step 2
Download and install Xamarin Player But don’t start it yet after installation
Step 3
Download and install the latest Virtual Box version (5.x) just install it over the existing Virtual Box, it will clean and update automaticly the existing instance.
Step 4
Open Virtual Box and go to File->Preferences->Networking and go to the Virtual Host Only Tab.
Klik on edit for the one existing network adapter (the screwdriver) and make sure the it is set in the following way:

_Adapter;
IPv4 Address: 10.71.34.1
IPv4 Network Mask: 255.255.255.0

DHCP Server;
Enabled
Server Address: 10.71.34.2
Server Mask: 255.255.255.0
Lower Address Bound: 10.71.34.101
Upper Address Bound: 10.71.34.199_

After this save settings and exit Virtual Box
Step 5
Launch Xamarin Android Player and start installing virtual machines available for download.
Now it will find the correctly configured host only network adapter.

Ускорение Change-Build-Run цикла на iOS (работает и на Android)

UPD: Чтобы это все работало в Xamarin Studio 6 необходимо установить плагин отсюда: Continuous.Client.MonoDevelop.mpack (собрано из guthub).

В последнее время наш iOS продукт достаточно разросся, и по разным причинам (обоснованным и не очень :)) состоит из ~20 проектов). Все это, вкупе с новыми версиями Xamarin очень негативно сказывается на времени сборки и запуска.
Ну а UI часть, как известно, требует частого перезапуска/пересборки ввиду множества мелких изменений.

Ждать по 1-2 минуты, чтобы проверить, как будет смотреться увеличенный на 1 пиксель отступ, слегка поднадоело, и было решено поискать решения.

Continue reading