Регистрация  |  Вход

AngularJS поговорим?

Привет Всем!

Давно болею AngularJS. Интересная технология.
Все по чуть-чуть ее применяю в различных проектах (но больше сказать на свой страх и риск)

Вот в очередной раз решил попрактиковаться - сделал раздел "Вакансии" в "Мой аккаунт" на AngularJS.

Что можно сказать в качестве вывода двухдневных изысканий:

Плюсы:
работает быстрее, меньше нагружает сервер (не надо рендерить View, а просто возвращается json)

Минусы:
скорость разработки увеличилась в 2 раза (в итоге больше на разруливание всяких косяков) потому что это уже не один фреймворк, а 2 фреймворка, каждый со своей структурой MVC.
Наткнулся на проблему - оказывается AngularJS не очень дружил с Bootstrap или Foundation (в моем случае) и это общеизвестный факт - надо применять различные костыли для связыванию. Получается что css фреймворки тоже имеют какой-то свой js функционал по управлению DOM структурой и получается что в некоторых случаях изменения DOM начинают конфликтовать. Я еще прикручивал Google Maps js библиотеку, то вообще стало все весело :).

Но в общем если все это знать и уметь варить получается очень круто.
Лучше конечно сразу делать весь frontend на AngularJS, но тогда преимущества Ruby on Rails исчезают практически полностью.


Если у кого какие мысли по поводу AnjularJS?

Привет Всем!

Давно болею AngularJS. Интересная технология.
Все по чуть-чуть ее применяю в различных проектах (но больше сказать на свой страх и риск)

Вот в очередной раз решил попрактиковаться - сделал раздел "Вакансии" в "Мой аккаунт" на AngularJS.

Что можно сказать в качестве вывода двухдневных изысканий:

Плюсы: 
работает быстрее, меньше нагружает сервер (не надо рендерить View, а просто возвращается json)

Минусы: 
скорость разработки увеличилась в 2 раза (в итоге больше на разруливание всяких косяков) потому что это уже не один фреймворк, а 2 фреймворка, каждый со своей структурой MVC. 
Наткнулся на проблему - оказывается AngularJS не очень дружил с Bootstrap или Foundation (в моем случае) и это общеизвестный факт - надо применять различные костыли для связыванию. Получается что css фреймворки тоже имеют какой-то свой js функционал по управлению DOM структурой и получается что в некоторых случаях изменения DOM начинают конфликтовать. Я еще прикручивал Google Maps js библиотеку, то вообще стало все весело :).

Но в общем если все это знать и уметь варить получается очень круто. 
Лучше конечно сразу делать весь frontend на AngularJS, но тогда преимущества Ruby on Rails исчезают практически полностью.


Если у кого какие мысли по поводу AnjularJS?

Был на конференции по AnjularJS. Очень все понравилось, особенно работа с большим количеством данных. Но пока на практике его ни разу не применял, так что буду очень благодарен за развитие этой темы.

Был на конференции по AnjularJS. Очень все понравилось, особенно работа с большим количеством данных. Но пока на практике его ни разу не применял, так что буду очень благодарен за развитие этой темы.

Вот буквально вчера вечером смотрел SalesForce1 and AnjularJS
Пока сложилось впечатление что все эти фреймворки javascript классно использовать для Salesforce1 потому что Salesforce говорит что не поддерживает apex: компоненты для Salesforce1

Вот буквально вчера вечером смотрел [url=https://developer.salesforce.com/blogs/developer-relations/2014/07/building-salesforce1-apps-visualforce-angularjs-bootstrap.html?dysig_tid=a49f13da5a2a44e9bed98d13600c1fbb]SalesForce1 and AnjularJS[/url]
Пока сложилось впечатление что все эти фреймворки javascript классно использовать для Salesforce1 потому что Salesforce говорит что не поддерживает apex: компоненты для Salesforce1

Глянул видео - тоже сложилось впечатление что для мобильного Salesforce AngularJS подходит просто супер.
Сделал одну страницу VF, подгрузил в нее Angular а дальше гоняешь по ней как душе угодно. А данные через Remote Action передаешь/забираешь в виде json.
Класс!

Глянул видео - тоже сложилось впечатление что для мобильного Salesforce AngularJS подходит просто супер.
Сделал одну страницу VF, подгрузил в нее Angular а дальше гоняешь по ней как душе угодно. А данные через Remote Action передаешь/забираешь в виде json.
Класс!

Тоже использовал Angular для довольно крупных мобильных проектов (еще до выхода Salesforce1) в том числе и в связке с Bootstrap.
Для для большинства задач довольно мощный фреймворк.

Из плюсов:
1. Типовые задачи решаются "3-мя" строчками.
2. Хорошая документация
3. Cкорость приложений
4. Двусторонняя привязка данных
5. Код реально хорошо читается, что не могу сказать про другие js библиотеки и фреймворки (по мне так самый главный плюс:))

Минусы:
Бывают косяки с большим объемом данных

Тоже использовал Angular для довольно крупных мобильных проектов (еще до выхода Salesforce1) в том числе и в связке с Bootstrap.
Для для большинства задач довольно мощный фреймворк.

Из плюсов:
1. Типовые задачи решаются "3-мя" строчками.
2. Хорошая документация
3. Cкорость приложений
4. Двусторонняя привязка данных
5. Код реально хорошо читается, что не могу сказать про другие js библиотеки и фреймворки (по  мне так самый главный плюс:))

Минусы:
Бывают косяки с большим объемом данных


Дмитрий Черник
Минусы:
Бывают косяки с большим объемом данных

Согласен, много в интернете жалоб на плохую работу AngularJS большими объемами данных.
Но мне кажется тут больше проблема архитектуры.
Зачем МНОГО (ВСЕ) данных сразу вытягивать на страницу, чтобы потом JS захлебывался?
Можно по мере необходимости вытягивать данные небольшими пачками с помощью ajax и уже с ними работать.
Это, наверное, как view state для Salesforce

[quote="Дмитрий Черник"]Минусы: 
Бывают косяки с большим объемом данных[/quote]
Согласен, много в интернете жалоб на плохую работу AngularJS большими объемами данных.
Но мне кажется тут больше проблема архитектуры.
Зачем МНОГО (ВСЕ) данных сразу вытягивать на страницу, чтобы потом JS захлебывался?
Можно по мере необходимости вытягивать данные небольшими пачками с помощью ajax и уже с ними работать.
Это, наверное, как view state для Salesforce :) 

Dmitry Shnyrev
А данные через Remote Action передаешь/забираешь

не разобрался до конца (или даже до середины) как AngularJS работает:

AngularJS сидит на бесконтроллерной странице и использует REST API орга фактически как вход в базу данных. и вся логика прописана и крутится в AngularJS в браузере?

или

AngularJS сидит на странице с контроллером, тихо, за сценой орбращаясь к его Remote Action, и отвечает только за передачу\получение данных и перерисовку UI?

спасибо

[quote="Dmitry Shnyrev"]А данные через Remote Action передаешь/забираешь[/quote]

не разобрался до конца (или даже до середины) как AngularJS  работает:

AngularJS   сидит на бесконтроллерной странице и использует REST API орга фактически как вход в базу данных. и вся логика прописана и крутится в AngularJS  в браузере?

или 

AngularJS  сидит на странице с контроллером, тихо, за сценой орбращаясь к его Remote Action, и отвечает только за передачу\получение данных и перерисовку UI?

спасибо

Den Brown
AngularJS сидит на странице с контроллером, тихо, за сценой орбращаясь к его Remote Action, и отвечает только за передачу\получение данных и перерисовку UI?

Да вот так.

[quote="Den Brown"]
AngularJS  сидит на странице с контроллером, тихо, за сценой орбращаясь к его Remote Action, и отвечает только за передачу\получение данных и перерисовку UI?
[/quote]
Да вот так.

Кстати ОФИГЕННО работает!!!
Делал на одном проекте недавно одностраничный call center по по этой технологии. Получился функционал практически как с salesforce console application, только в 100 раз проще и гибче в плане кастомизации.
Теперь буду везде применять для сложных страниц. Да, немного на старте сложнее, нужен скелет страницы, но потом любые изменения логики на фронтенде делаются просто молниеносно!!!

Кстати ОФИГЕННО работает!!!
Делал на одном проекте недавно одностраничный call center по по этой технологии. Получился функционал практически как с salesforce console application, только в 100 раз проще и гибче в плане кастомизации.
Теперь буду везде применять для сложных страниц. Да, немного на старте сложнее, нужен скелет страницы, но потом любые изменения логики на фронтенде делаются просто молниеносно!!!

Dmitry Shnyrev
Да вот так.

как-то пробовал сделать нативный эпп для Андройда на СФ мобайл SDK - так я понял там взамодействие приложения с сервером построено на REST API

а если сделать гибридный эпп на СФ мобайл SDK, то как он будет работать с сервером: по REST API или как AngularJS: сидя на одной странице и дергая за Remote Actions...

[quote="Dmitry Shnyrev"]Да вот так.[/quote]

как-то пробовал сделать нативный эпп для Андройда на СФ мобайл SDK - так  я понял там взамодействие приложения с сервером построено на REST API

а если сделать гибридный эпп на СФ мобайл SDK, то как он будет работать с сервером: по REST API или как AngularJS: сидя на одной странице и дергая за  Remote Actions...

Den Brown
а если сделать гибридный эпп на СФ мобайл SDK, то как он будет работать с сервером: по REST API или как AngularJS: сидя на одной странице и дергая за Remote Actions...

Что ты имеешь под "гибридный эпп на СФ мобайл SDK"?
Ангулар - это Javascript и ему нужен браузер. Мешать Angular и нативное приложение под мобилу это что-то совсем непонятное.

[quote="Den Brown"]а если сделать гибридный эпп на СФ мобайл SDK, то как он будет работать с сервером: по REST API или как AngularJS: сидя на одной странице и дергая за Remote Actions...[/quote]
Что ты имеешь под "гибридный эпп на СФ мобайл SDK"? 
Ангулар - это Javascript и ему нужен браузер. Мешать Angular и нативное приложение под мобилу это что-то совсем непонятное.

Dmitry Shnyrev
Что ты имеешь под "гибридный эпп на СФ мобайл SDK"?

там два варианта: чисто нативный, и гибридный.

гибридный - это фактически браузер, который привязан намертво к твой VF странице (или не привязан вообще не к какой странце на сервере - если работает по REST - не знаю) и который как нативная програма запускается на девайсе. А там он уже как браузер работает (т.е. html5/ccs/js и делают все работу). Ну я так понял

[quote="Dmitry Shnyrev"]Что ты имеешь под "гибридный эпп на СФ мобайл SDK"? [/quote]

там два варианта: чисто нативный, и гибридный.

гибридный - это фактически браузер, который привязан намертво к твой  VF странице (или не привязан вообще не к какой странце на сервере - если работает по REST - не знаю) и который как нативная програма запускается на девайсе. А там он уже как браузер работает (т.е. html5/ccs/js и делают все работу). Ну я так понял

Мда, ничего не понял. Далека от меня мобильная тема.

Мда, ничего не понял. Далека от меня мобильная тема.

Dmitry Shnyrev
Мда, ничего не понял.

SF1 - это гибридное приложение - это фактически браузер (мы же можем запусить СФ1 вид у Орга на браузере, работающем на том же движке, что и СФ1)

твое собственное гибридное нативное приложение - это такой же браузер (но он может работать с HTML5 и пр.) - он показывает тебе странитцу (точнее DOM). я так понял

[quote="Dmitry Shnyrev"]Мда, ничего не понял.[/quote]

SF1 - это гибридное приложение - это фактически браузер (мы же можем запусить СФ1 вид у Орга на браузере, работающем на том же движке, что и СФ1) 

твое собственное гибридное нативное приложение - это такой же браузер (но он может работать с HTML5 и пр.) - он показывает тебе странитцу (точнее DOM). я так понял

ЫЫЫЫ

Тоже начал туториал проходить на днях) благодаря Диме)) спс) Faces классно сделано и оно меня подкупило изучить ng )()

[color=white]ЫЫЫЫ[/color]

Тоже начал туториал проходить на днях) благодаря Диме)) спс) Faces классно сделано и оно меня подкупило изучить ng )()

правильный шаг, Maxim.
Только смотри сразу небольшое наблюдение от меня - там очень много всего и большая часть просто не нужна. Особенно что касается routing - на него можно вообще забить, и directives - тоже один из сложных вопросов вообще не использовал.
Что самое нужное - two way binding, ng-repeat, ng-show/ng-if, ng-click, разобраться со scope, также можно изучить фильтры, не лишним будет разобраться с тем как обращаться к scope angular из простого js (это нужно если будешь использовать сторонние js библиотеки - видел в нете кучу реализаций интеграции с angular, но они настолько сложно построены, что просто жуть. У меня вышло намного проще, просто обращаясь напрямую к scope)
Моя структура одностраничного приложения проста до невозможного:
одно приложение, один контроллер. Весь js прямо в html файле. В scope все переменные (массивы, объекты). Html структура рендерится в зависимости от состояния переменных (вот тут особенно нужны ng-show/ng-if). ВСЕ! 99% задачь можно спокойно решить этим. Faces страница собственно по такому принципу и построена.

:) правильный шаг, Maxim.
Только смотри сразу небольшое наблюдение от меня - там очень много всего и большая часть просто не нужна. Особенно что касается routing - на него можно вообще забить, и directives - тоже один из сложных вопросов вообще не использовал.
Что самое нужное - two way binding, ng-repeat, ng-show/ng-if, ng-click, разобраться со scope, также можно изучить фильтры, не лишним будет разобраться с тем как обращаться к scope angular из простого js (это нужно если будешь использовать сторонние js библиотеки - видел в нете кучу реализаций интеграции с angular, но они настолько сложно построены, что просто жуть. У меня вышло намного проще, просто обращаясь напрямую к scope)
Моя структура одностраничного приложения проста до невозможного:
одно приложение, один контроллер. Весь js прямо в html файле. В scope все переменные (массивы, объекты). Html структура рендерится в зависимости от состояния переменных (вот тут особенно нужны ng-show/ng-if). ВСЕ! 99% задачь можно спокойно решить этим. Faces страница собственно по такому принципу и построена.

Интерестные уроки с видео и практической частью есть здесь:
https://www.codeschool.com/courses/shaping-up-with-angular-js

процесс прохождения курсов геймефицирован (вам присваиваются бейджи по прохождению уровней)
Хорошее пояняющее видео + практика (с валидацией и очками призовыми). Идет проверка курса онлайн + подсказки по синтаксису (когда чекаете код).

Так же есть возможность скачать эти поясняющие видео.

Что еще понравилось - так это забавный видео-клип ( к этому ролику ), где поется об Angular.js

Еще для изучения:
- хорошая статья на хабре здесь
- видео здесь (с возможностью скачать)
- написание тестового приложения здесь

Недавно попалась на глаза статья, где приводиться пример формирования таблицы данных, включая:
- сортировку;
- пагинацию;
- поиск.

на примере отображения Аккаунтов: смотреть здесь!

Интерестные уроки с видео и практической частью есть здесь:
https://www.codeschool.com/courses/shaping-up-with-angular-js

процесс прохождения курсов геймефицирован (вам присваиваются бейджи по прохождению уровней)
Хорошее пояняющее видео + практика (с валидацией и очками призовыми). Идет проверка курса онлайн + подсказки по синтаксису (когда чекаете код).

Так же есть возможность скачать эти поясняющие видео.

Что еще понравилось - так это забавный видео-клип ( к этому ролику ), где поется об Angular.js

Еще для изучения:
- хорошая статья на хабре [url=http://habrahabr.ru/post/244925/]здесь[/url]
- видео [url=https://egghead.io/]здесь[/url] (с возможностью скачать)
- написание тестового приложения [url=http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app]здесь[/url]

Недавно попалась на глаза статья, где приводиться пример формирования таблицы данных, включая:
- сортировку;
- пагинацию;
- поиск.

на примере отображения Аккаунтов: [url=http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html]смотреть здесь![/url]

<blank>

[i]<blank>[/i]

Вот, кому интересная тема Javascript.
Погуглил тему two-way data binding - моя самая любимая фича в AngularJS. Но как показала практика собственно в 99% случаем от Angular мне именно это и нужно, а остальные фичи можно сказать даже мешают больше чем помогают.
В общем в моих мыслях я не одинок и оказывается есть популярные библиотеки, которые реализуют чисто two-way data binding без всего лишнего. Самый лучший представитель данного класса - Ractive.js
Я думаю в сочетании с jQuery (моим любимым инструментом) это будет просто бомба

Вот, кому интересная тема Javascript.
Погуглил тему two-way data binding - моя самая любимая фича в AngularJS. Но как показала практика собственно в 99% случаем от Angular мне именно это и нужно, а остальные фичи можно сказать даже мешают больше чем помогают.
В общем в моих мыслях я не одинок и оказывается есть популярные библиотеки, которые реализуют чисто two-way data binding без всего лишнего. Самый лучший представитель данного класса - [url=http://www.ractivejs.org/]Ractive.js[/url]
Я думаю в сочетании с jQuery (моим любимым инструментом) это будет просто бомба :) 

я так вижу, что в последнее время только и разговоров что о мор... фронт-энд Фреймворках.

но учить в "сухую", без риал лайф примеров не хочется.

кто с этим уже работает, опишите пожалуйста, какой именно, уже знакомый нам функционал вы перенесли с бек-энда на фронт?

я так вижу, что в последнее время только и разговоров что о мор... фронт-энд Фреймворках.

но учить в "сухую", без риал лайф примеров не хочется.

кто с этим уже работает, опишите пожалуйста, какой именно, уже знакомый нам функционал вы перенесли с бек-энда на фронт?

Да все что угодно можно перенести на фронтенд, только конечно желательно чтобы было больше чем просто формочку заполнить и отправить на SF. Нет четких критериев. Я, например, очень люблю переносить всякого рода таблички сложные, когда нужно редактировать в них данные и скажем пересчитывать на лету что-то. Отлично для фронтенда подходят приложения по типу Salesforce Console App. Когда нужны всякого рода попапы, подгрузка связанных данных.
В общем единственный параметр - наличие бизнес логики на фронтенде.
Вот недавний пример плохой архитектуры фронтенд приложения - заказчик нарисовал сложную страницу с несколькиим таблицами, кучей связанных данных - одно удовольствие написать такое на js а SF дергать чтобы взять данные и сохранить. НО основное требование заказчика - вся бизнес логика на стороне SF. В общем в итоге получился тот же самый VF с view state, только геморроя с сериализацией и десериализацией в 100 больше.

Да все что угодно можно перенести на фронтенд, только конечно желательно чтобы было больше чем просто формочку заполнить и отправить на SF. Нет четких критериев. Я, например, очень люблю переносить всякого рода таблички сложные, когда нужно редактировать в них данные и скажем пересчитывать на лету что-то. Отлично для фронтенда подходят приложения по типу Salesforce Console App. Когда нужны всякого рода попапы, подгрузка связанных данных. 
В общем единственный параметр - наличие бизнес логики на фронтенде.
Вот недавний пример плохой архитектуры фронтенд приложения - заказчик нарисовал сложную страницу с несколькиим таблицами, кучей связанных данных - одно удовольствие написать такое на js а SF дергать чтобы взять данные и сохранить. НО основное требование заказчика - вся бизнес логика на стороне SF. В общем в итоге получился тот же самый VF с view state, только геморроя с сериализацией и десериализацией в 100 больше.