Joosy: альтернативный подход к браузерным фреймворкам

http://borisstaal.com/post/24401343976/joosy-alternative-approach-to-browser-frameworks
  • Перевод

Если коротко


Мы разработали новый JS-фреймворк, не похожий на существующие. Он использует новый подход. Мы зовём его Joosy.

Официальный сайт
Руководство для новичков
На гитхабе



Более подробное описание


В наши дни даже ленивые и их бабушки с дедушками делают свои собственные JS MVC фреймворки. Причина этого проста: они действительно нужны. С другой стороны, проблема заключается в том, что все они поголовно копируют Backbone. Конечно, есть ещё Knockout и Ember, которые пошли другим путём, но их всё равно не хватает, чтобы удовлетворить все запросы утончённой аудитории. Другие решения — другие проблемы. Некоторым не нравится Handlebars, другим не подходит общий API, это всего лишь дело вкуса. В конце концов, широта ассортимента ещё никому не вредила.

Полгода назад, во время реализации пары новых проектов, мы решили провести небольшой эксперимент. Мы взяли совершенно новый подход к этой проблеме: представить JS-фреймворк как расширение к серверной части. Он должен быть не абстрагирован от неё, а наоборот быть как можно нежнее с ней связанным.

Чтобы претворить это в реальность, нам пришлось реализовать все привычные Rails-разработчикам вещи и расширить их возможностями, которых в Rails не хватало. Лучшая организация кода, новые конвенции для среды, в которой есть состояние (stateful, в противоположность RESTful stateless сервер-сайду), и многое другое. Мы сделали form-builder, настоящие хелперы, и даже HAML, работающий прямо у вас в браузере.

Теперь, когда прошло некоторое время, и часть из тех проектов уже в бою, мы готовы представить этот эксперимент как зрелый фреймворк с кучей фич, который мы назвали Joosy. Он основан на терминах «вида» из MVC. Pages, Layouts, Widgets, Helpers и шаблонизация. Важно заметить, что он полностью основан на возможностях CoffeeScript. И чтобы лучше прочувствовать этот прекрасный язык, Joosy включает в себя отличную библиотеку Sugar.js. Она создаёт ощущение ActiveSupport и сильно расширяет скудную стандартную библиотеку JS, добавляя сахарку в вашу работу.

В Joosy есть всё, к чему вы привыкли в других фреймворках, но под немного другим соусом. В нём есть роутинг, подобие «моделей» с Identity Map, чёткое структурирование и многое другое, как то: указанный выше ActiveSupport, совместимый с ActiveResource (позволяющий концентрироваться на том, что в браузере модели — в первую очередь связь с сервером, а не бизнес-логика), автогенераторы кода, даже предзагрузка js-файлов в приложение.

Практика показывает: Joosy очень легко овладеть, если вы имели опыт с Rails. Также он хорошо справляется с тем, что другие заявляют: экономит ваше время. Так что вне зависимости от того, показался он вам нужным, или нет, мы просим вас прочитать руководство. У нас есть что-то новое, что мы можем предложить вам, и оно недурно. А потом вы может даже найдёте ему применение :)

P.S.: можете смело задавать вопросы в комментариях, а также в теге joosy на StackOverflow.
Round Lake 31,44
Компания
Поделиться публикацией
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Похожие публикации
Комментарии 38
  • 0
    за допиливание туториала — огромное спасибо.
    • 0
      всегда пожалуйста :)
      на очереди продвинутые туториалы и скринкаст.
      будем благодарны за фидбек ;)
    • 0
      Интерестный подход. Правда очень огорчило что нужно держать сервер для этого дела.
      Просто запустить приложение на клиенте не получится :(
      • 0
        так или иначе, чему-то придётся компилировать CoffeeScript. недавно на PHP, Node и Python начали расти проекты-аналоги Assets Pipeline, который этой компиляцией занимается в rails, поэтому мы будем рады, если кто-то из разработчиков на этих языках откликнется и сделает пакеты под эти проекты. но всё равно, потребность в сервере от этого не пропадёт.

        да и это не главное, в общем-то. Joosy был ориентирован на большие многостраничные сайты с тесным взаимодействием с сервером, и он вряд ли сильно поможет приложениям-одностраничкам, типа излюбленного всеми разработчиками фреймворков TODO-list'а.
        • 0
          так или иначе, чему-то придётся компилировать CoffeeScript
          Вообще говоря, есть coffee-script.js, который транслирует CoffeeScript в JS прямо на клиенте. Хотя, конечно, при большом количестве кода это будет подтормаживать.
      • +1
        > stateful
        А это у вас на ASP.NET Web Forms не похоже?
        • 0
          я, к сожалению, не знаком с ASP.NET Web Forms, но примерно понял, что вы имели в виду.
          нет, здесь имелся в виду сам по себе принцип наличия в приложении состояния или его отсутствия, т.е.:
          на сервере у вас есть запрос -> обработка -> ответ. вам по сути не важно, что пользователь до этого делал, и от предыдущих действий, т.е. состояния, эта обработка не зависит. в браузере же всё наоборот: хоть URL (хешбенг или pushState) и меняется, и от этого наступают какие-то независимые действия, приходится учитывать предыдущие действия пользователя, т.к. в зависимости от них в DOM могли остаться какие-то элементы, виджеты и прочее
          • 0
            Нет, не похоже. Тот факт, что у форм если скрытое поле с дампом ядра переменных, не делает веб-приложение stateful.
          • 0
            Ребят, не поверите, но я, похоже, экстрасенс.

            Сегодня вечерком наткнулся на Joosy, бороздя гитхаб. Зашел на сайт, читнул гайд — заинтересовало. Рассказал коллегам. Часа два назад сел реализовать микро-проект. Собственно, для него я и ходил по гитхабу, обыскивая решения с backbone или ember.js, взвешивал что и как, ибо хотелось попробовать что нибудь отличное от Backbone, есть неудобные моменты, а тут Joosy. В общем, сделал я что хотел, не потратив времени на бутстреп рельсового проекта и прочего, и прочего. Красота, в общем.

            Но возник у меня вопрос. Для примера возьму разработку блога из гайда. Собственно, вопрос: подскажите, пожалуйста, best practice для того, чтобы, скажем, был некоторый виджет(?) со списком всех постов на уровне лэйаута, то бишь, существующий на всех страницах, другими словами, некоторая глобальная навигация.

            Пока писал, пришла в голову мысль, что я, похоже, что-то упустил в доках и мне нужны те самые «виджеты».
            • 0
              да, Widget здесь, пожалуй, будет лучшим решением для организации кода. можно будет легко выделить код получения списка постов в него, и сделать отдельный partial для их отображения. и сам этот виджет можно будет приделать в layout прямо в темплейте для Layout в таком виде:

              .posts
                != <hh user=widget> 'div', PostsListWidget
              
              • 0
                хабрапарсер съел @widget
                • 0
                  Всё же, документация слабовата. Либо я слабоват на ночь глядя. Но если серьезно, не нашел ни в гайде, ни в api-документации. Так вот как бы мне рендерить этот виджет в момент, когда загрузятся данные?

                  Пора спать, да.
                  • 0
                    Документация действительно не идеальна. Это проблема почти всех проектов, которые только пережили релиз :). Очень не хватает рук.

                    В момент когда рендерится ваш шаблон, данные уже загружены. Следовательно вы можете передавать в виджет все, что хотите. Но в этом конкретном случае я бы использовал другой способ работы с виджетами:

                    raw.github.com/gist/2828061/e9214ac84937c40daaa2da882b49cf6da939f8bd/Widgets%20Hash.coffee

                    Этот хэш отработает после загрузки, в нем, используя лямбду, вы можете передать в виджет какую угодно локальную переменную (примеры 1 и 3). Допустим коллекцию постов. А он уже в себе ее отрендерит.

                    Если все же, вы будете включать виджет прям в шаблоне, флоу будет следующим:

                    1. Вы загружаете нужную коллекцию и кладете ее, например, в data.posts
                    2. Она доступна в шаблоне. В шаблоне вы создаете виджет лямбдой: `=> new PostsListWidget(@posts)` вместо просто класса виджета.
                    3. Виджет получает данные в конструктор и может пробросить их к себе в шаблон.
                    4. ???
                    5. PROFIT! :)
                    • 0
                      Прошу прощения, вызывали?
                      • 0
                        Парсер – лох :(. Я просто использовал синтакс Coffee, извините :(
                    • 0
                      gist.github.com/2870880 — вот живой пример. Он набросан от руки, as-is вполне возможно не заработает. Но идея должна быть понятна :)
              • +2
                А что делать тем, кто уважает чай старый добрый JavaScript?
                • 0
                  для таких я бы посоветовал прочитать пункт первый отсюда :)
                  • +1
                    Искать альтернативы, коих, много. Joosy не целится на 100% потребителей :). CoffeeScript – один из китов Joosy. По моему скромному мнению, та же самая структура, описанная на JS превращается в кашу. Поэтому к сожалению, это не изменится никогда.
                    • 0
                      Интересно другое — насколько coffee-only проекты становятся тенденцией?
                      • 0
                        Для нас – на 100%. И на западе их реально много.
                        • 0
                          Субъективно – становятся. На oDesk всё больше предложений с требованием CoffeeScript приходит.
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Старый же добрый же Backbone.js… Ember.js на, мой взгляд пока из разряда фантастики. Ну, либо я пока не научился его готовить.
                        • +3
                          Не хватает примеров кода прямо здесь, без необходимости щёлкать по ссылкам.
                          • 0
                            Я так не играю:
                            • 0
                              Не вставилось: $ rails g joosy:application dummy
                              /home/none/rails/joosy/config/application.rb:13:in `<module:Joosy>': uninitialized constant Joosy::Rails::Application (NameError)
                              • 0
                                Не обращайте внимания, поборол.
                                • 0
                                  Ага-ага :). Нельзя называть апп по имени гема :). Перекрывается ;)
                            • 0
                              Подскажите, никак не могу понять, каким образом происходит монетизация в подобных проектах? Или никакой монетизации нет вовсе, и это держится на чистом энтузиазме?
                              • 0
                                Это их инструмент. Они монетизируют не его, а проекты, сделанные с его помощью. Думаю, как-то так.
                                • 0
                                  Это опен-сорс. Нам просто в кайф :)
                                • +1
                                  Мои поздравления, Борис
                                  • 0
                                    Сначала удивился обращению по имени. Но потом посмотрел – похоже для вас это стандартная практика. И она правильна, приятно. Спасибо за поздравления :)
                                    • 0
                                      Взаимно :) Просто знаю лично, поэтому по имени.
                                  • 0
                                    Господа, а где можно посмотреть дейсвующие production приложения на joosy?

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое