GoldenLine
Zaloguj się

konto usunięte

Temat: AngularJS

Marcin K.:
To jest oczywistość. Operacje na Node'ach HTML są najbardziej kosztowne czasowo i jest to fakt, obojętnie jaki silnik JS'a by nie był.

Przy dużej aplikacji ma to znaczenie.
Mówie to z własnego doświadczenia na podstawie aplikacji które mają 20k - 50k linii w JS, gdzie jest kilka tysięcy modeli i często 150 - 200 komponentów odpowiadających za generowanie widoku.

PS. Ja widziałem aplikacje napisane we frameworku X (wstaw cokolwiek), które też były b. szybkie tylko czego to dowodzi? Tego typu sformułowania bez poparcia jakimkolwiek większym opisem rodzaju projektu nie mają żadnego znaczenia bo możemy mówić o zupełnie innej skali projektów.

To jest kwestia podejścia do problemu. Masz taki problem że Twoja apka ma 50k linii kodu, kupe komponentów i dostaje czkawki ? Pierwszy krok to podzielić ją na obszary gdzie następuję PEŁNE przeładowanie widoku, ładowane są tylko wymagane komponenty itp.
Masz zbyt wiele operacji na DOM ? Może trzeba pomyśleć jak je zmniejszyć albo część interfejsu zastąpić canvasem albo czymś innym.
W obrębie obszaru apka ma dynamiczny interfejs a między obszarami przeładowujesz całość.

Flagowym przykładem z którym sam się ostatnio spotkałem była przewijana lista elementów. Gostek miał ponad 600 elementów na liście (ul > li) i narzekał że mu telefon czkawki dostaje. Gdzie na raz na telefonie widać było 8...
Jakie było zdziwienie gdy się okazało że lista może mieć 24 elementy a reszta jest "dokładana" i obcinana w trakcie przewijania. Tak że przewijanie było płynne i nie było problemów z listą już więcej.

Najczęstszym powodem tego że apka dostaje czkawkę na średniej jakości telefonie jest programista który ją pisał. Jak mówiłem - spotykałem apki na Angularze i śmigały one dobrze na moim telefonie gdzie ten jest relatywnie słaby. Trudno zwalać winę na framework skoro nie jeden pokazał że się DA i bez kombinowania.
A Angular wręcz zachęca bo jest kompatybilny chyba z każdą mobilną przeglądarką.Dariusz Półtorak edytował(a) ten post dnia 03.04.13 o godzinie 23:23
Link do wypowiedziLink
Marcin K.

Marcin K. Software Engineer,
Samsung Poland R&D
Center

Temat: AngularJS

Wydaje mi się kolego, że mówimy o zupełnie różnej skali projektów. Opisujesz to tak jakby programiści przydzielani do projektu o takiej skali nie mieli pojęcia o podstawach, które opisujesz i w tym upatrujesz słaby performance a to są podstawy.

Lazy loading to jest kolejna oczywistość, przeładowywanie tylko części widoku, której dotyczyły zmienione dane to następna.

Ja Ci mówie, że przy pewnej skali projektu różnica w performance frameworków, które zapisują sobie dane (które w ogóle nie powinny się tam znaleźć) i odczytują w/z Node HTML zaczyna być widoczna na słabszych device'ach.

Z mojej strony to jest koniec tematu.Marcin K. edytował(a) ten post dnia 04.04.13 o godzinie 00:13
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

Marcin K.:
Wydaje mi się kolego, że mówimy o zupełnie różnej skali projektów. Opisujesz to tak jakby programiści przydzielani do projektu o takiej skali nie mieli pojęcia o podstawach, które opisujesz i w tym upatrujesz słaby performance a to są podstawy.

Ja tylko wymieniam od dołu. Możliwości jest sporo a rzecz sprawdza się do tego że po prostu się da. Poza tym nie mówię że nie mieli pojęcia o podstawach ale pracowałem z kilkoma firmami i współpracowałem z dość dużą ilością firm i mając wzgląd minimum w projekty przy których coś dłubałem widziałem jakie rzecz potrafią zrobić ludzie nawet z wieloletnim doświadczeniem i bogatą wiedzą.
Sam też święty nie jestem bo zdarzało mi się zastosować słabe rozwiązanie tylko dlatego że było szybkie a czasu brak w nadziei że "kiedyś się to przepisze".
Lazy loading to jest kolejna oczywistość, przeładowywanie tylko części widoku, której dotyczyły zmienione dane to następna.

No właśnie lazy loading to bardzo często zło wcielone i częsty błąd popełniany przez programistów. Ludziska tak się jarają tą koncepcją że czasami nie zastanawiają się czy można lepiej. Już spotkałem się z sytuacją gdzie np w wypadku JS upakowanie kodu w jeden plik (lub kilka paczek zależnych od obszaru), przepuszczenie go przez yui-compressor i zapakowanie go do głównego widoku tak by przeglądarka trzymała go sobie w cache dawało więcej niż lazy loading mógł by kiedykolwiek dać.
Bo po tym jak zdebugowałem kod okazało się że powodem czkawki nie były algorytmy ale to że przeglądarka musiała sobie relatywnie spore paczki JS zaciągać i przetwarzać w trakcie działania aplikacji - nie mówiąc już o oczekiwaniu jeżeli serwer był za bardzo obciążony.

Ja Ci mówie, że przy pewnej skali projektu różnica w performance frameworków, które zapisują sobie dane (które w ogóle nie powinny się tam znaleźć) i odczytują w/z Node HTML zaczyna być widoczna na słabszych device'ach.

A ja Ci mówię że i tak całość sprawdza się do pojedynczych widoków i to jak nimi zarządzasz zależy od tego jak działa apka. Bo urządzenie ma powiedzmy rozdzielczość 800x480 i jest limit tego ile możesz na nie upakować. Nawet zapewniając dynamiczny interfejs. Lista przewijana jest tutaj flagowym przykładem.Dariusz Półtorak edytował(a) ten post dnia 04.04.13 o godzinie 07:24
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

Zwykłe operacje DOM są szybsze od frameworków jak AngularJS czy Knockout. Ale czas programisty jest za drogi żeby się tak bawić.
Link do wypowiedziLink
Marcin K.

Marcin K. Software Engineer,
Samsung Poland R&D
Center

Temat: AngularJS

Chodzi o podejście danego frameworka, gdzie te dane zapisywać.
Angular zapisuje dane potrzebne np. do działania modeli w Node'ach HTMLowych a nie w namespace frameworka. Nie wspomnę już jaka sieczka jest potem w HTMLu gdzie każdy Node ma po kilka albo kilkanascie customowych atrybutow. Dostęp do każdego z atrybutów HTMLNodeElementu kosztuje znacznie więcej niż dostęp do zwykłego obiektu w JS.
Link do wypowiedziLink
Marcin K.

Marcin K. Software Engineer,
Samsung Poland R&D
Center

Temat: AngularJS

Michał �.:
Zwykłe operacje DOM są szybsze od frameworków jak AngularJS czy Knockout. Ale czas programisty jest za drogi żeby się tak bawić.

Na przeglądarki PC - zgoda całkowita ale np. SmartTV lub słabe mobile, już warto się zastanowić.
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

Kazda operacja na DOM'ie jest droga i wymaga 10-krotnego przemyslenia - nie wazne czy to PC z 50 jajkami, czy stary telefon.
Link do wypowiedziLink
Piotr Koszuliński

Piotr Koszuliński JavaScript ninja

Temat: AngularJS

Zaciekawiło mnie o ile droższe może być operowanie na datasetach w DOM-ie w porównaniu z native JS. Co prawda nie wiem jak robi to AngularJS, ale stworzyłem taki prosty test, którego wynik w zasadzie mnie zdziwił. Spodziewałem się bardziej zbliżonego rezultatu, a także wolniejszego getAttribute/setAttribute od operowania na dataset.

http://jsperf.com/dom-vs-js-data

EDIT: dodałem jeszcze w sumie bardziej sensowny case z dostępem do pól obiektu, bo ten z tablicą dostaje zbyt dużego boosta pewnie dzięki swojej prostocie i już wyniki są bardziej zbliżone. Przy czym ciężko powiedzieć czy nie zaburzam wyników tworząc klucze, ale już mi się nie chce kombinować z bardziej sensownymi case'ami.Piotr Koszuliński edytował(a) ten post dnia 12.04.13 o godzinie 14:37
Link do wypowiedziLink
Paweł Szymański

Paweł Szymański UX, UI, Frontend,
contracting,
entrepreneurship

Temat: AngularJS

Krzysztof M.:
Opinie?

WOW (na etapie fascynacji prostotą i kompleksowością jednocześnie).

I przy okazji (HAML):
%li{'ng-repeat' => "todo in todos | orderBy:'name'"}

  %input{'type' => 'checkbox', 'ng-model' => 'todo.isDone'}

  %label {{todo.name}}


1. Jak mam UL i w nim LI, to jak wyświetlić je tak, żeby najpierw były zaznaczone, potem niezaznaczone, a dodatkowo każda z grup posortowana alfabetycznie?

Pomysł jaki mam to wyświetlenie dwóch UL, oba filtrowane po boolean następnie każda z nich sortowana alfabetycznie, ale to nie wygląda za fajnie, jakiś pomysł?

2. Czy da się out-of-the-box zchainować filtry, np 
orderBy:'isDone':'name'
, bo coś mi nie działa.Ten post został edytowany przez Autora dnia 04.06.13 o godzinie 16:21
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

U źródła piszą:
filter:orderBy(array, expression[, reverse]);


A dla konkretnego przypadka:
ng-repeat="item in array | orderBy:expression[:reverse]


gdzie kluczem jest expression:

"expression – {function(*)|string|Array.<(function(*)|string)>} – A predicate to be used by the comparator to determine the order of elements. Can be one of:
- function: Getter function. The result of this function will be sorted using the <, =, > operator.
- string: An Angular expression which evaluates to an object to order by, such as 'name' to sort by a property called 'name'. Optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name).
- Array: An array of function or string predicates. The first predicate in the array is used for sorting, but when two items are equivalent, the next predicate is used."

Odpowiedzią na twój problem Pawle jest właśnie tablica:

'ng-repeat' => "todo in todos | orderBy:['isDone','name']"


no a po drugim dwukropku jest bool 'reverse' (default false)
Link do wypowiedziLink
Paweł Szymański

Paweł Szymański UX, UI, Frontend,
contracting,
entrepreneurship

Temat: AngularJS

Jakub S.:
U źródła piszą:
[...]

no a po drugim dwukropku jest bool 'reverse' (default false)

Wielkie dzięki. Co do reverse to działa też '!' przed wyrazeniem :)

'ng-repeat' => "todo in todos | orderBy:['!isDone','name']"
Ten post został edytowany przez Autora dnia 04.06.13 o godzinie 20:43
Link do wypowiedziLink
Adrian C.

Adrian C.
projektant/programis
ta

Temat: AngularJS

Odkopię trochę temat.

Brakuje mi w AngularJS do pełni szczęścia jakiegoś rozsądnego zestawu widgetów.

Jest niby AngularUI, ale trochę mu jednak brakuje, żeby powiedzieć że to gotowe do użycia rozwiązanie.

Skąd bierzecie jakieś kontrolki współpracujące z AngularJS dajmy na to: slider, date-time picker?
Link do wypowiedziLink
Paweł Szymański

Paweł Szymański UX, UI, Frontend,
contracting,
entrepreneurship

Temat: AngularJS

Adrian C.:

Brakuje mi w AngularJS do pełni szczęścia jakiegoś rozsądnego zestawu widgetów.

Skąd bierzecie jakieś kontrolki współpracujące z AngularJS dajmy na to: slider, date-time picker?

Slidery to zawszę piszę customowe to chwila przecież, a date-time to mam swój szablon i dopasowuje go do projektu.

Generalnie 'The Angular Way' polega na tym, żeby pisać własny DSL (Domain Specific Language), a nie ślepo kopiować jQueryUI.
Link do wypowiedziLink
Adrian C.

Adrian C.
projektant/programis
ta

Temat: AngularJS

Paweł S.:
(...)
Slidery to zawszę piszę customowe to chwila przecież, a date-time to mam swój szablon i dopasowuje go do projektu.

Generalnie 'The Angular Way' polega na tym, żeby pisać własny DSL (Domain Specific Language), a nie ślepo kopiować jQueryUI.

Paweł, nie chodzi o ślepe kopiowanie JQueryUI. Nigdy zresztą nie przepadałem za tą biblioteką.
Owrapowanie pluginów z JQuerUI w dyrektywy i w ten sposób stworzenie własnego DSL to raczej też nie jest "the angular way", a pisanie własnych kontrolek hm.. szkoda czasu.

AngularUI ma parę widgetów tylko że na chwilę obecną biednie to wygląda w porównaniu z innymi rozwiązaniami.
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

Adrian C.:
Paweł S.:
(...)
Slidery to zawszę piszę customowe to chwila przecież, a date-time to mam swój szablon i dopasowuje go do projektu.

Generalnie 'The Angular Way' polega na tym, żeby pisać własny DSL (Domain Specific Language), a nie ślepo kopiować jQueryUI.

Paweł, nie chodzi o ślepe kopiowanie JQueryUI. Nigdy zresztą nie przepadałem za tą biblioteką.
Owrapowanie pluginów z JQuerUI w dyrektywy i w ten sposób stworzenie własnego DSL to raczej też nie jest "the angular way", a pisanie własnych kontrolek hm.. szkoda czasu.

AngularUI ma parę widgetów tylko że na chwilę obecną biednie to wygląda w porównaniu z innymi rozwiązaniami.

Kiedy Angular to nie jQuery UI albo inny wynalazek. Nie spodziewaj się w nim widgetów typu datapicker albo coś w ten deseń.
Link do wypowiedziLink
Adrian C.

Adrian C.
projektant/programis
ta

Temat: AngularJS

Dariusz P.:

Kiedy Angular to nie jQuery UI albo inny wynalazek. Nie spodziewaj się w nim widgetów typu datapicker albo coś w ten deseń.

Darek mniej więcej ogarniam co to AngularJS jestem po lekturze kilku tutoriali, developer guide'a i api. Zdaję sobie sprawę że AngularJS to nie jest jQueryUI. Jednak miło by było gdybym mógł zrobić np:
<tree ng-model="treeModel"/>

i dostać rozwijane drzewko

Tak jak to robię w przypadku pola tekstowego:
<input type="text" ng-model="textModel"/>
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

Adrian C.:
Dariusz P.:

Kiedy Angular to nie jQuery UI albo inny wynalazek. Nie spodziewaj się w nim widgetów typu datapicker albo coś w ten deseń.

Darek mniej więcej ogarniam co to AngularJS jestem po lekturze kilku tutoriali, developer guide'a i api. Zdaję sobie sprawę że AngularJS to nie jest jQueryUI. Jednak miło by było gdybym mógł zrobić np:
<tree ng-model="treeModel"/>

i dostać rozwijane drzewko

Tak jak to robię w przypadku pola tekstowego:
<input type="text" ng-model="textModel"/>

K, możesz przesuwać elementy w drzewie czy nie?
Jak powinny być połączone ze sobą elementy? za pomocą linii? kropek?
Jak rozróżniamy elementy? Stosujemy jakieś ikonki?

Takie drzewko to element UI. W Angularze nie uświadczysz niczego co tworzy elementy UI. No chyba że będziemy liczyć ng-repeat itp :P
I tak ma być. UI ma być odpowiednio odseparowane.

Jedyne co Ci zostaje to utworzenie lub znalezienie w sieci dyrektywy "tree" lub całego modułu i dołączenie go do Angulara. Szybki przykład z Google:

http://ngmodules.org/modules/angular.treeviewTen post został edytowany przez Autora dnia 03.01.14 o godzinie 13:08
Link do wypowiedziLink
Adrian C.

Adrian C.
projektant/programis
ta

Temat: AngularJS

Dariusz P.:
(ciach)
Drzewko to był tylko przykład. To o czym piszesz to już raczej ostylowanie jakiegoś komponentu(kropki, linie, ikonki itp..).
Zgoda co do tego że angularjs kładzie głownie nacisk na zachowanie takich komponentów(współpraca z modelem, reagowanie na zdarzenia, etc..), ale nie mogę się zgodzić z tezą że jest zupełnie odseparowany od UI. Zauważ że takie pole input – to też element UI + odpowiednie zachowania pod nie podpięte, dajmy na to dyrektywa: ngList nie tylko spina pole z modelem(tablicą) ale także wie jak zaprezentować użytkownikowi listę(w postaci stringów oddzielonych separatorem).

Dzięki za linka do stronki http://ngmodules.org/, chyba jakoś słabo googlałem bo na nią nie trafiłem.

Ps. Pisanie własnych dyrektyw okazuje się naprawdę łatwe, pierwszą mam już za sobą, poszło szybko. Nic specjalnego coś na zasadzie: gritter.
Link do wypowiedziLink
Directica Team

Directica Team hunter!

Temat: AngularJS

Jeżeli ktoś jest zainteresowany pracą z AngularJS, zapraszam do zapoznania się z naszą ofertą: http://4programmers.net/Praca/654-AngularJS_-_JavaScri...
Link do wypowiedziLink

konto usunięte

Temat: AngularJS

Hej. Jestem nowy w Angular i pracuję nad nim głównie w domu-w pracy nie mamy czasu na wdrażanie nowego frameworku;\

Czy tutaj mogę zadać pytanie do problemu na który się natknąłem?

Mam problem wymagający chyba trochę większego doświadczenia, związanego z routingiem i przepływem informacji między kontrolerami.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj