AngularJS #4 – Wprowadzenie do filtrów

AngularJS



W wyniku przedświątecznej gorączki i mojego “niedoczasu” nie dałem rady postarać się o kolejny wpis w zeszłym tygodniu. Tym razem chciałbym zrobić mały wstęp do filtrów w AngularJS.

W planach na kolejne artykuły o AngularJS są dyrektywy, serwisy, providery, factory oraz wiele innych, ale warto także poznać te podstawowe mechanizmy. Jednym z nich jest własnie serwis $filter lub jak kto woli ngFilter. Filtrów, tych wbudowanych, jak i tych własnych używać możemy po stronie widoków w naszym HTML, ale zarówno w kontrolerach. Służą one do modyfikowania wartości zdefiniowanych w $scope lub właśnie filtrowania kolekcji bez wpływu na ich rzeczywistą wartość.W widokach ich użycie sprowadza się do postawienia pipeline zaraz za wartością, po którym podajemy nazwę filtra, który chcemy wykorzystać. W samych kontrolerach jest to wstrzykiwany serwis $filter, który pozwala na wywołanie konkretnego filtra poprzez parametry funkcji.

Użycie filtrów przedstawia się następująco:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

AngularJS posiada listę wbudowanych filtrów, które możemy używać wraz z samym tylko frameworkim. Nie jest ona imponująca, ale twórcy dali nam mechanizm do tworzenia własnych filtrów, który często się przydaje podczas pisani aplikacji z wykorzystaniem AngularJS.

Napiszę tym samym prosty filtr, który pozwoli dzielić wpisaną w pole input wartość na pojedyncze znaki i wyświetlać je z podkreśleniem jako separatorem.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tym prostym sposobem możemy pisać własne transformery, dekoratory, czy po prostu filtry.

Zapraszam jednocześnie do obejrzenia kolejnego odcinka z http://egghead.io

[youtube_sc url=”https://www.youtube.com/watch?v=FX5TwV2ZKqc”]

AngularJS #3 – Pierwsza metoda w naszym $scope

AngularJS



W poprzednim wpisie opisywałem zasadę działania dyrektywy ng-controller obejmującej zakres HTML, który otoczony jest przez element, na którym następuje wywołanie owej dyrektywy. Sama wartość dyrektywy wskazuje na kontroler w JavaScript, który odpowiada za jej działanie. W kontrolerze można tworzyć zmienne oraz metody, które dostępne są po stronie HTML.

Zmienna

Najprostszą formą wykorzystania kontrolera jest utworzenie zmiennej, która przypisana jest do $scope. Sam $scope wstrzykiwany jest do kontrolera poprzez argument funkcji. Jako, że jest to element obsługiwany bezpośrednio przez kompilator AngularJS wystarczy, że użyjemy nazwy $scope i tym samym Angular wie, że należy w tym miejscu posłużyć się serwisem $injector do utworzenia nowego $scope, który dziedziczy po $rootScope (dokładny opis znajduje się w oficjalnej dokumentacji AngularJS).

Posłużę się tutaj przykładem z poprzednich wpisów. Tworzymy kontroler APP.ApplicationCtrl (to pełna nazwa, którą używamy po stronie HTML), gdzie zdefiniowana zostaje zmienna name w $scope kontrolera. Następnie jest ona używa w postaci wywołania {{ name }} w HTML w ramach konkretnego div, gdzie zdefiniowany został kontroler ng-controller=”APP.ApplicationCtrl”. $scope jest w tym momencie jakby naszą przestrzenią globalną (dla div), w której widoczne są wszystkie zdefiniowane zmienne lub funkcje / metody. Zamiast więc pisać {{ $scope.name }} wystarczy po prostu {{ name }}.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Metoda

Kolejnym krokiem jest zdefiniowanie w naszym $scope kontrolera – konkretnej funkcjonalności w postaci metody. Metoda ta będzie niczym więcej niż funkcją … przypisaną do zmiennej w $scope. Stworzyłem tym samym w kontrolerze funkcję sayHelloWorld, która pod zmienną $scope.name podstawia nową wartość. W samym HTML dodałem button, w którym to użyłem dyrektywy ng-click i jako jej parametr przekazuję wywołanie funkcji sayHelloWorld(). W tym miejscu nie używam klamer {{ … }} ponieważ przekazują wywołanie funkcji bezpośrednio do dyrektywy ngClick. Tym oto prostym sposobem nasza mini aplikacja otrzymała pierwszą funkcjonalność.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dodajmy dwie kolejne funkcje, które zaktualizują wartość zmiennej name. Warto przy tym zauważyć, że nasz widok HTML aktualizuje się automatycznie. Nie wymaga to odświeżania strony, a ilość kodu JavaScript, który musimy napisać także ogranicza się do minimum.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/EGW5w/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Przykład tworzenia i użycia

Po bardziej rozbudowany przykład odsyłam (jak zawsze) do kolejnego filmu z http://egghead.io

[youtube_sc url=”https://www.youtube.com/watch?v=Powr9vzqMac”]

AngularJS #2 – ng-controller

AngularJS



Muszę przyznać, że AngularJS uczę się dopiero od dwóch miesięcy. Do tej pory używałem jedynie czystego JavaScript i jQuery. Używałem to dobre określenie, bo daleko mi do prawdziwego web dewelopera. Projekt, w którym mam szczęście uczestniczyć łączy Javowy backend z single app, która pisana jest właśnie w AngularJS. Stąd powstał pomysł na niniejszy “kurs” (to za dużo powiedziane). Dla Was (mam nadzieję) będzie to szansa na poznanie AngularJS, a dla mnie możliwość by nauczyć się go lepiej. Nic tak nie pomaga przyswajać wiedzy jak uczenie innych.

Przyznam się bez bicia, że rozkład jazdy konstruuję na bazie materiałów w sieci (polecam: http://egghead.io/). Poza dzieleniem się własnymi doświadczeniami, mam zamiar przemycać co nieco od dużo bardziej doświadczonych deweloperów, a czasami i samych twórców AngularJS.

Przeczytałem gdzieś, że “AngularJS, to w końcu JavaScript bez bólu”. Dwa miesiące wystarczyły mi by się o tym przekonać i mam nadzieję, że uda mi się Wam to pokazać.

ng-controller

Przepraszam za przydługi wstęp. Przechodzę czym prędzej do tematu dzisiejszego wpisu. W poprzednim była już mowa o $scope i pierwszy kontroler AngularJS.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Tworzenie widoku bez separacji HTML, CSS i JavaScript byłoby trudne. Wykorzystanie jedynie podstawowych elementów AngularJS także nie dawałoby nam wiele. Wplecenie w to wszystko własnej logiki biznesowej oraz dodatkowych funkcjonalności byłoby praktycznie niewykonalne bez kontrolerów, które pozwalają tworzyć odpowiednie warstwy ($scope) do zarządzania naszym widokiem.

Z pomocą przychodzi nam dyrektywa (o tym później) ngController, którą udostępnia nam sam AngularJS, a która to odpowiedzialna jest za budowę warstwy MVC (Model – View – Controller). W oficjalnej dokumentacji czytamy:

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

MVC components in angular:
– Model — The Model is scope properties; scopes are attached to the DOM where scope properties are accessed through bindings.
– View — The template (HTML with data bindings) that is rendered into the View.
– Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.

Jeżeli czytacie o AngularJS, to z pewnością wiecie też czym jest MVC i nie wymaga to większego komentarza.

Twórcy piszą także o aspekcie wykorzystania kontrolerów w routingu ($route – o tym także będzie potem) i ostrzegają przed często popełnianym błędem, w którym to po zdefiniowaniu kontrolera w naszym configu $route nie ma już potrzeby definiowania kontrolera po stronie HTML w postaci dyrektywy ng-controller. Jeżeli ktoś popełni ową gafę, to jego kontroler zostanie wstrzyknięty dwukrotnie, co na pewno nie jest pożądane.

$scope

Jak większość (wszystkie?) dyrektyw w AngularJS, również ngController tworzy swój własny $scope, czyli przestrzeń, w której widoczne są wszystkie zmienne oraz metody zdefiniowane w kontrolerze, który podany został jako argument dyrektywy. Jest to kolejna warstwa naszej aplikacji. Definiując przykładowo nasz kontroler dla atrybutu <div> w HTML, $scope utworzony zostanie dla wszystkich elementów znajdujących się pomiędzy <div> … </div>. Tym samym wszystkie kontrolery utworzone wewnątrz tej struktury “widzieć” będą metody oraz zmienne utworzone w $scope nadrzędnego kontrolera. W drugą stronę to już tak nie działa. Kontroler nadrzędny nie będzie miał dostępu do logiki utworzonej w swoim kontrolerze-dziecku. Możemy sobie wyobrazić dziedziczenie w statycznie typowanych językach, jednak to nie to samo.

Przykłady

Świetnie oddane zostały przykłady tworzenia prostego kontrolera na oficjalnej stronie dyrektywy: ngController. Nie zrobiłbym tego lepiej, dlatego odsyłam Was właśnie tam (co będę pewnie robił częściej, bo dokumentacja jest naprawdę dobra i ciągle się rozwija / rozrasta). Jeżeli komuś mało, to jest kolejna lekcja poświęcona temu tematowi na http://egghead.io/:

[youtube_sc url=”https://www.youtube.com/watch?v=MEmC0QH8ATQ”]

AngularJS #1 – Wprowadzenie

AngularJS



AngularJS to framework JavaScript stworzony przez inżynierów z Google. Służy on do szybkiego i łatwego budowania aplikacji internetowych, tak zwanych – single app. Model oparty o MVW (Model – View – Whatever) pozwala pogodzić idee JavaScript i modelu MVC. Postaram się to Wam pokazać w kolejnych wpisach.

AngularJS – Superheroic JavaScript MVW Framework

HTML na sterydach

To co wyróżnia AngularJS spośród innych tego typu frameworków, to własny kompilator HTML. Pozwala nam on “nauczyć” naszego HTML nowych sztuczek, zachowań i dodać mu kilka funkcjonalności. W ten sposób jesteśmy w stanie zbudować dynamiczną web aplikację.

Two Way Data-Binding

Najlepszym sposobem na oddanie zasady działania będzie oficjalny schemat:

Two Way Data-Binding

Podwójne bindowanie pozwala na automatyczną synchronizację danych, które mamy po stronie widoku, a naszym kontrolerem / modelem danych po stronie JavaScript.

Ciężko opisać ten mechanizm słowami, dlatego zapraszam do pierwszej lekcji kursu na http://egghead.io/ (polecam!), która pokazuje ten element w działaniu.

[youtube_sc url=”https://www.youtube.com/watch?v=Lx7ycjC8qjE”]

AngularJS $scope

$scope to swego rodzaju obiekt, w którym przechowane są dane tworzone przez kontroler. Dane układane są hierarchicznie. Weźmy za przykład następujący kod HTML:

<div ng-controller="ParentController">
	<h1>{{ title }}<h1>

	<div ng-controller="ChildController">
		<h2>{{ heading }}<h2>
	</div>
</div>

Tym samym mamy dwa div-y. Jeden osadzony w środku drugiego. Za ten zewnętrzny odpowiada kontroler ParentController, który wyglądać może tak:

var ParentController = function ($scope) {
	$scope.title = 'Parent Controller';
};

ChildController w środku prezentuje się następująco:

var ChildController = function ($scope) {
	$scope.heading = 'Child Controller';
};

Oba jako argument funkcji przyjmują zmienną $scope, czyli specjalny obiekt AngularJS, który wstrzykiwany jest do funkcji na etapie kompilacji. O tyle, o ile ChildController w swoim $scope posiada zmienną title z kontrolera ParentController, o tyle ParentController nie ma dostępu do zmiennej heading z ChildControllera ponieważ jest jego kontrolerem nadrzędnym.

O samym $scope można pisać sporo. Jestem pewien, że kolejne wpisy przybliżą ten element frameworka znacznie lepiej.

Dyrektywa?!

Dyrektywa, to właśnie sposób na nauczenie HTML nowych sztuczek. Jedną już poznaliśmy. Mam tutaj na myśli ng-controller, który wygląda jak zwykły atrybut HTML. AngularJS podczas fazy interpretacji kodu HTML rozpoznaje takie elementy i buduje dla nich $scope, w który to wstrzykiwany jest kod odpowiedzialny za obsługę dyrektywy. Tym samym jesteśmy w stanie tworzyć dyrektywy, które mogą być atrybutami istniejących tagów HTML, nazwami klas CSS, nowymi tagami HTML, czy zwykłymi komentarzami. Na początku może to wyglądać na nieco skomplikowane i niepotrzebne, ale zapewniam, że po bliższym poznaniu zrobi się wręcz niezbędnym i ulubionym sposobem na tworzenie logiki biznesowej dla naszego HTML.

Hello {{ name }}!

Czas na pierwszy swoisty przykład działania. Posłużę się w tym celu JSFiddle, w którym to ładuję kod AngularJS, tworzę bardzo prosty HTML i dodaję kontroler ApplicationCtrl, gdzie ustawiam wartość dla zmiennej name. W samym HTML pobieram (binduję) wartość zmiennej {{ name }} ze $scope naszego kontrolera. Ot co, proste Hello World!

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Podsumowanie

Rosnąca popularność AngularJS nie jest przypadkiem. AngularJS daje nam możliwość modułowej budowy naszej aplikacji, która testowana może być w równie łatwy sposób, co samo pisanie kodu biznesowego. AngularJS nie trzeba się uczyć od razu w całości. Próg wejścia jest stosunkowo niski, a w miarę rozbudowy naszego projektu / aplikacji możemy poznawać kolejne funkcjonalności i elementy frameworka. Nasza aplikacja otrzymuje tchnienie życia, a my możemy się świetnie bawić pisząc kod JavaScript. Tak, JavaScript.

Zachęcam do nauki i do czytania kolejnych wpisów.

Phalcon 2 i projekt Zephir

Zephir

Nie tak dawno temu opisywałem Wam możliwości oraz niespotykaną wcześniej wydajność Phalcon. Zaraz po publikacji tamtego wpisu, twórcy frameworka opublikowali na swoim blogu post dotyczący przyszłości Phalcon oraz wersji 2, a także projektu Zephir.

Na wstępie posłużę się cytatem z bloga, który najlepiej oddaje myśli twórców:

Despite being a PHP extension implemented in C and its young age, Phalcon offers the same or better features than other frameworks that have been around a lot longer. Phalcon is a fast, robust, secure, extendable PHP framework for everyone to use.

Since we have created a great framework, framework’s development is an every day task, constant improvement and evolution is required to deliver more and better applications.

Twórcy Phalcon dostrzegają ogromny potencjał w rozwijaniu swojego dzieła. Rosnąca społeczność wyraźnie o tym świadczy. Ze względu na wykorzystanie języka C, występują problemy w łataniu dziur oraz rozwoju całego frameworka. Widać wyraźnie, że w tym wypadku wsparcie jest mniejsze niż w przypadku pozostałych frameworków, które pisane są w czystym PHP.

Zephir

W związku z powyższym, zespół Phalcon zdecydował się stworzyć projekt Zephir. Jest to nowy język programowania, który pomóc ma w tworzeniu, wspieraniu oraz rozwoju całego ekosystemu.

Jak określają twórcy, Zephir to:

It’s a high level language, something between C and PHP. It’s both dynamic and static typed and it supports just the features we need to create and maintain a project like Phalcon.

namespace Test;

class MyTest extends SomeNamespace\MyAnotherClass 
{
    public function someFunction(a, b) 
    { 
        return a + b;
    }
}

Cały kod w Zephir musi być umieszczony w klasach, które to umiejscowione są w przestrzeniach nazw (namespaces). Użycie $ nie jest wymagane. Zephir to także dynamiczne typowanie ( jak w PHP), ale istnieje także możliwość użycia statycznego typowania, które powodować będzie wzrost wydajności, ponieważ wykonujemy jedną z czynności kompilatora już podczas pisania samego kodu.

Dostępne typy to: long/int, double/float, bool oraz string, które konwertowane są do typów w języku C.

Deweloperzy zwolnieni zostali także z konieczności rezerwowania i zwalniania pamięci. Robi to za nich kompilator.

Składnia języka inspirowana była C, PHP, JavaScript oraz Rust, co bardzo wyraźnie widać na poniższym przykładzie:

namespace Test;

class MyTest 
{
    public function someMethod()
    {
        /* Variables must be declared */
        var fruits;
        int i = 0, length;

        /* Create PHP array */
        let myArray = ["hello", 0, 100.25, false, null];

        /* count the array into a 'int' variable */
        let length = count(myArray);

        /* Print value types */
        while i < length {
            echo typeof myArray[i], "\n";
            let i++;
        }

        return fruits;
    }
}

Bardzo ciekawe. Przyznam, że nie spodziewałem się takiego połączenia. Twórcy w swoim wpisie wspominają także o celach samego projektu Zephir, przyszłości Phalcon z tym związanej oraz opisują wyraźnie to, czym Zephir na pewno nie będzie. Zachęcam do lektury, a sam kibicuję zespołowi.

Phalcon = wysoka wydajność?!

Phalcon PHP

Phalcon is a web framework implemented as a C extension offering high performance and lower resource consumption.

There are many PHP frameworks nowadays, but none of them is like Phalcon (Really, trust us on this one).

To pierwsze dwa zdania, które wprowadzają nas w świat Phalcon przez ich autorów.

Phalcon znalazłem kilka dni temu. Miałem chwilę czasu, więc wykorzystałem ją na jego bliższe poznanie, bo.. zainteresowały mnie powyższe dwa stwierdzenia oraz grafika, która prezentowana jest na stronie głównej. Pokazano na niej wykres wydajności poszczególnych frameworków i oczywiście Phalcon znacznie przebija na nim konkurencję.

Ale jak?

Spędziłem kilkanaście minut na zapoznanie się z dokumentacją, gdzie twórcy wyjaśniają skąd wziął się pomysł na kolejny framework i dlaczego zbudowany został on w taki a nie inny sposób. Mianowicie chcieli oni wyeliminować wszystkie negatywne cechy istniejących frameworków, czyli między innymi:

  • dużą ilość potrzebnych zasobów, które muszą zostać stworzone i zarezerwowane by udostępnić podstawowe funkcjonalności – duża liczba inkludowanych plików i duże wykorzystanie dysku twardego
  • dużą ilość niewymaganych funkcjonalności, których nigdy nie wykorzystamy bądź nie są one potrzebne za każdym razem gdy przetwarzane jest żądanie HTTP – duża ilość pamięci ram, która potrzebna jest do załadowania tego wszystkiego
  • za każdym razem wszystkie pliki są interpretowane od nowa, a przecież kod frameworka nie zmienia się tak często jak część biznesowa odpowiedzialna za naszą aplikację – procesor za każdym razem musi się napocić by wykonać taką interpretację kodu PHP

Rozszerzenie w C!

Jak im się to udało? Przyjrzyjmy się zaletom rozszerzeń PHP w postaci bibliotek napisanych w języku C:

  • rozszerzenia napisane w języku C ładowane są RAZ razem z PHP podczas procesu startu serwera
  • wszystkie klasy i funkcje gotowe są do użycia w dowolnej aplikacji
  • kod nie jest za każdym razem interpretowany, bo został on już wcześniej skompilowany do postaci wykonywalnej na danej platformie i przez dany procesor

Run it on Phalcon!

Jak działa w takim razie Phalcon? Otóż jest to właśnie rozszerzenie do PHP napisane w języku C i ładowane jest tylko i wyłącznie RAZ – podczas startu serwera, który uruchamia także interpreter PHP. Dlaczego więc Phalcon?

  • wszystkie komponenty oraz klasy są ze sobą bardzo luźno powiązane – możemy dowolnie dobierać sobie funkcjonalności i wykorzystywać wszystko co daje nam framework lub tylko wybrane komponenty
  • optymalizacja na niskim poziomie
  • interakcja z bazą danych przy użyciu ORM napisanego w języku C
  • użycie natywnej obsługi PHP w języku C

Sami przyznacie, że wygląda to bardzo obiecująco.

Podsumowanie

Poza bardzo dobrą dokumentacją – twórcy przygotowali także ciekawe przykłady, które pokazują użycie Phalcon w różnych projektach, o różnych profilach działania.

Wyniki benchmarków, które prezentowane są oficjalnej stronie, pokazują, że taka budowa frameworka ma sens i rzeczywiście przyspiesza wykonywanie zapytań. Sam także pokusiłem się o przykład Hello World w Symfony 2.3.2, Slim oraz Phalcon. Wynik? Symfony i Slim ładują się jakieś ~50ms, a Phalcon ~10ms!

Zachęcam tym samym do zapoznania się z całą dokumentacją oraz własnych eksperymentów. Z pewnością nie jest to moje pierwsze spotkanie z Phalcon.

Aktualizacja

W odpowiedzi na komentarz, gdzie jego autor prosił mnie o dodatkowe testy przy wykorzystaniu Apache Benchmark. Testy wykonywane były na jednej maszynie w środowisku Windows w oparciu o instalację XAMPP (Apache 2.4.3 oraz Apache Benchmark 2.3). Testowane było wywołanie strony głównej za którą odpowiedzialny był jeden kontroler z jedną pustą metodą i widok z tekstem “Hello world!”. Jest to więc sytuacja bardzo podobna do przykładu twórców frameworka. Dodam też, że środowisko to tryb deweloperski z włączonym trybem debuggera oraz wyłączonym cache.

Poniżej skrócone wyniki dla:

  • 100 równloległych połączeń dla 1000 zapytań
    Concurrency Level:      100
    Time taken for tests:   5.626 seconds
    Complete requests:      1000
    Failed requests:        0
    Write errors:           0
    Total transferred:      429000 bytes
    HTML transferred:       213000 bytes
    Requests per second:    177.74 [#/sec] (mean)
    Time per request:       562.632 [ms] (mean)
    Time per request:       5.626 [ms] (mean, across all concurrent requests)
    Transfer rate:          74.46 [Kbytes/sec] received
  • 1000 równloległych połączeń dla 10000 zapytań
    Concurrency Level:      1000
    Time taken for tests:   13.292 seconds
    Complete requests:      1000
    Failed requests:        8
       (Connect: 8, Receive: 0, Length: 0, Exceptions: 0)
    Write errors:           0
    Total transferred:      429000 bytes
    HTML transferred:       213000 bytes
    Requests per second:    75.23 [#/sec] (mean)
    Time per request:       13291.760 [ms] (mean)
    Time per request:       13.292 [ms] (mean, across all concurrent requests)
    Transfer rate:          31.52 [Kbytes/sec] received
  • 100 równloległych połączeń dla 100000 zapytań
    Concurrency Level:      100
    Time taken for tests:   219.302 seconds
    Complete requests:      100000
    Failed requests:        0
    Write errors:           0
    Total transferred:      42900000 bytes
    HTML transferred:       21300000 bytes
    Requests per second:    455.99 [#/sec] (mean)
    Time per request:       219.302 [ms] (mean)
    Time per request:       2.193 [ms] (mean, across all concurrent requests)
    Transfer rate:          191.04 [Kbytes/sec] received

Przy większej ilości równoległych połączeń dla liczby zapytań większej niż 1000 moja instalacja Apache niestety nie dawała rady. Widać jednak, że wydajność Phalcon nie jest przesadzona.

Symfony2 – wprowadzenie do frameworka

Symfony2

Symfony2 jest niewątpliwie pełnoprawnym frameworkiem, którego zastosowanie można znaleźć w wielu projektach. Symfony2 to jednak nie tylko framework. Ogromna liczba ludzi skupionych wokół społeczności tego niezwykle popularnego frameworka do języka PHP, tworzy coraz to bardziej niesamowite rzeczy.

Chciałbym Wam to pokazać i tym samym zamieszczam w dzisiejszym wpisie dwie świetne prezentacje, które prezentują nie tylko użycie samego frameworka, ale także szereg innych komponentów, które sprawiają, że całość przybiera na ogromnej sile. Niech będzie to dla Was wprowadzenie do świata Symfony2.

Na zakończenie jeszcze mały dodatek: + Symfony2 Cheat Sheet

Roundup #14 – RSlider, Kube, Grunt, FlexiNavCalc, Codiad

Roundup #14 - RSlider, Kube, Grunt, FlexiNavCalc, Codiad

RSlider

Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

RSlider – A full screen responsive jQuery image & content slider


Kube

Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.

Kube Framework – A Minimal Responsive CSS Framework


Grunt

Grunt is a task-based command line build tool for JavaScript projects. It has the following predefined tasks that you can use in your project: Concatenate files, Validate files with JSHint, Minify files with UglifyJS, Run unit tests with nodeunit and etc. In addition to the built-in tasks, you can create your own tasks.

A Task-based Command Line Build Tool for JS Projects


FlexiNavCalc

FlexiNavCalc is a calculator for use in determining percentage widths of navigation items in responsive layouts. The aim of creating FlexiNavCalc is to avoid certain responsive navigation issues and to give the developer more control over navigation layout, especially full width navigation elements.

FlexiNavCalc – A calculator for determining % widths of navigation items in a responsive layout


Codiad

Codiad is a web-based IDE framework with a small footprint and minimal requirements. The system is still early in development, and while it has been proven extremely stable please be sure to backup regularly if you use it in any production work.

Open Source And Web-Based IDE For Coding Remotely – Codiad


[1], [2], [3]