Как я сделал iOS-приложение за 15 минут

Идея написать этот пост появилась, когда я наткнулся на инструмент прототипирования FramerJS, который обещал простое и быстрое создание макетов с достаточно продвинутыми возможностями в плане имитации взаимодействия пользователя с интерфейсом. Особенно заманчиво то, что всё рисуется в Photoshop, а для создания анимации требуется только JavaScript. Эти факторы формируют низкий порог входа, который как раз подходит мне.

Первый этап. Идея

Ну, предположим, хочется сделать новостное приложение, похожее по структуре на Readability или The Verge. Сегодня начнём с главной страницы, где будет поток записей, и профиля пользователя, где будет юзерпик и настройки. 

Второй этап. Скетчи

Их буду делать на iPad в приложении Paper. Стараясь сделать всё в лучших традициях наивного искусства, целиком и полностью следуя принципу «чем хуже — тем лучше».

Первый экран: фид новостей, второй: профиль пользователя

Третий этап. Интерактивность

Попробуем сделать так, чтобы вкладка «профиль» появлялась после клика на иконку меню. Потом добавим анимацию и возможность убирать профиль, нажимая на любое место на экране. Всё предельно просто, но прекрасно демонстрирует основные возможности FramerJS.

Четвёртый этап. Кодим

На этом этапе немного JavaScript-магии. Знаний хватит рудиментарных, но может потребоваться чуть-чуть времени для того, чтобы понять, что такое View (в Framer — это родственник div в HTML), и немного сориентироваться с синтаксисом. Проще всего разобраться, читая официальную документацию, а если её недостаточно, то смотреть следует здесь. 

Пятый этап. Ревью

Смотрим, что получилось. Весьма скромно, однако работает как задумано, и справедливости ради стоит сказать, что усилий было приложено совсем мало. Сам поток новостей оставляю на следующий раз. 

Все файлы, включая Photoshop-макет, доступны на GitHub.