Wszystko, o co boicie się zapytać — Bootstrap i inne frameworki

Zastanawiacie się, jakich technologii programistycznych na co dzień używa się do tworzenia stron i aplikacji internetowych? Niewiele o tym wiecie i chcielibyście dowiedzieć się, o co w tym wszystkim chodzi? Zapraszam do lektury niniejszego artykułu, w którym — na bazie jednego z najbardziej popularnych frameworków HTML / CSS, jakim jest Bootstrap — przybliżę czytelnikom podstawowe zawiłości związane z tą tematyką.

Podział na front end oraz back end

Świat programowania stron i aplikacji internetowych dzieli się na stronę front-endową oraz stronę back-endową. Ta pierwsza odpowiada za warstwę prezentacyjną, druga zaś — za warstwę dostępu do danych, np. do MySQL — oracle’owskiego systemu zarządzania relacyjnymi bazami danych.

W modelu klient–serwer — co w gruncie rzeczy odpowiada podziałowi na front end oraz back end — klientem jest przeglądarka internetowa (np. Google Chrome czy Mozilla Firefox), natomiast serwerem jest maszyna, na której zainstalowana jest strona czy aplikacja internetowa, nawet jeżeli na tym sprzęcie tak naprawdę wykonywane są pewne rzeczy prezentacyjne.

 
Do technologii front-endowych, które operują po stronie klienta, czyli po stronie przeglądarki, zaliczyć można m.in. framework Bootstrap (do tworzenia responsywnych, a więc płynnie adaptujących się do szerokości urządzenia, stron i aplikacji internetowych) oraz związane z nim języki — HTML, CSS, Less / Sass, JavaScript / jQuery.

W tym miejscu grzechem byłoby nie wspomnieć o metodologii Ajax (tj. Asynchronous JavaScript and XML) czy chociażby o szeregu potężnych i coraz bardziej popularnych frameworków języka JavaScript, umożliwiających budowanie wydajnych, skalowalnych i zaawansowanych aplikacji internetowych — m.in. google’owski AngularJS / Angular, facebookowy React albo Vue.js (czyt. tak, jak ang. view).

 
Technologie back-endowe, operujące po stronie serwera, możemy podzielić na interpretowane (skryptowe) oraz na kompilowane.

Do tej pierwszej grupy zaliczamy języki PHP, Python, Ruby, Perl czy potężna i coraz bardziej popularna platforma programistyczna Node.js, która daje możliwość budowania wydajnych, skalowalnych i zaawansowanych aplikacji internetowych przy użyciu właściwie tylko jednego języka, jakim jest… coraz bardziej przybierający na sile JavaScript!

Do tej drugiej grupy, a więc rozwiązań kompilowanych, zaliczamy m.in. takie języki, jak microsoftowy C# (C-sharp), oracle’owska Java czy google’owski Go (Golang).

Framework — jak go rozumieć?

Framework (platforma programistyczna) to szkielet do tworzenia stron i aplikacji internetowych. Określa on nie tylko ich strukturę, ale również ogólny mechanizm ich działania. To wzorzec, który w istocie wymusza na nas pisanie kodu w pewien z góry określony sposób. Daje on jednak w zamian szeroką paletę ciekawych komponentów i innych udogodnień.

Dzięki takiemu ogólnodostępnemu frameworkowi, możemy mieć pewność, że kod źródłowy naszego projektu będzie zrozumiały dla innych programistów. I to niezależnie od szerokości i długości geograficznej. Framework zapewnia ogólny schemat, dzięki któremu końcowy produkt jest uporządkowany i po prostu sprawdzony w boju.

Z frameworkami spotykamy się w rozmaitych obszarach programowania, nie tylko w web developmencie. Każda platforma programistyczna dostarcza pewnych typowych rozwiązań powtarzających się problemów, jak również wzorcowych praktyk związanych z budowaniem nowych funkcjonalności. Używając takiej platformy, mamy gwarancję ciągłego wsparcia i aktualizowania pod względem bezpieczeństwa i niezawodności pisanego przez nas programu.

Warto w tym miejscu zauważyć, iż swego rodzaju frameworkami są również systemy zarządzania treścią (ang. Content Management System) — przykładowo, WordPress, Joomla! czy Drupal.

Korzyści, jakie daje front-endowy framework Bootstrap

Technologia Bootstrap, oprócz samej responsywności, oferuje liczne techniki, które sprawiają, że praca nad strukturą, wyglądem i działaniem strony jest łatwa i przyjemna.

Dzięki Bootstrapowi, możemy szybko sprawić, by wygląd całej naszej strony i poszczególnych jej elementów był spójny, logiczny, atrakcyjny i nowoczesny.

Framework ten „zadba” o wszystko — począwszy od typografii, formularzy, przycisków aż po nawigację, rozszerzenia języka JavaScript i różne interaktywne „bajery”.

Tworzone za pomocą Bootstrapa strony i aplikacje internetowe mają modułową strukturę, dzięki czemu można je w przyszłości dość sprawnie modyfikować i rozbudowywać. Otrzymujemy w ten sposób niezwykle wysoką jakość interfejsu użytkownika.

Bootstrap to najbardziej popularny front-endowy framework do tworzenia responsywnych stron i aplikacji internetowych. Dzięki niemu, korzystanie z języków i technologii działających po stronie przeglądarki (HTML, CSS, Less / Sass, JavaScript / jQuery) jest prostsze i szybsze, a — co za tym idzie — wygodniejsze i bardziej efektywne.

Historia frameworka Bootstrap

Bootstrap oficjalnie został powołany do życia latem 2011 r. przez dwóch programistów Twittera — Marka Otto oraz Jacoba Thorntona — w celu zapewnienia spójności w budowaniu interfejsów.

Jego druga wersja została wydana pół roku później, a w niej po raz pierwszy pojawiła się 12-kolumnowa siatka do budowania responsywności oraz natywne wsparcie biblioteki pozwalającej generować „glifowe ikony” (ang. Glyphicons) — wektorowe monochromatyczne ikony i symbole. Ponadto, wprowadzono kilka nowych komponentów, nastąpiły też zmiany w wielu innych już istniejących.

Latem 2013 r. miała swoją premierę wersja trzecia, w której zastosowano tzw. płaski deseń (ang. flat design). Jako domyślną, wprowadzono filozofię mobile-first. To podejście kładzie nacisk przede wszystkim na smartfony i tablety.

Rok później zapowiedziano wydanie następnej edycji, ale na nią ostatecznie kazano nam czekać aż do 2018 r. Dopiero w drugiej połowie stycznia światło dzienne ujrzał stabilny Bootstrap 4.

Nowości we frameworku Bootstrap 4

W porównaniu do wersji trzeciej, poprawiono zasadniczo style do drukowania, zwiększono globalną wielkość fontu (z 14px na 16px), zmieniono jednostki (z px na rem), zmieniono dynamiczny preprocesor kaskadowych arkuszy stylów (z Less na Sass), a przede wszystkim wprowadzono zupełnie nowy sposób tworzenia systemu siatki (tj. układu strony).

Flexible Box Layout, bo o nim mowa, to moduł zapewniający skuteczniejszy sposób na rozmieszczanie elementów i ich wyrównywanie (zarówno w poziomie, jak i pionie) w ramach pojemników.

Porównując do wcześniejszego rozwiązania w postaci elementów pływających, taki tryb wyświetlania to wręcz rewolucja, która wprowadza responsywność na jeszcze wyższy poziom!

Programiści skupili się głównie na rozwijaniu frameworka pod kątem urządzeń mobilnych. Niektóre „ficzery” (od ang. feature — funkcjonalność) zostały całkowicie porzucone, jak np. panele (ang. panels) czy miniaturki (ang. thumbnails). Taki sam los spotkał wektorowe monochromatyczne ikony i symbole spod znaku „glifowych ikon” (ang. Glyphicons). Dodano w ich miejsce tzw. karty (ang. cards).

Niestety, nowości wprowadzone w nowej jego wersji sprawiają, że upgrade nowych witryn internetowych ze starszych wersji Bootstrapa nie jest zbyt prosty. Tym bardziej, że zrezygnowano ze wsparcia starszych przeglądarek Internet Explorer oraz mobilnego systemu operacyjnego iOS 6, dostępnego na urządzenia spod znaku nadgryzionego jabłka — iPhone’y, iPody Touch oraz iPady.

Żeby tego było mało, przepisano na nowo prawie wszystkie komponenty, wtyczki biblioteki jQuery, jak też dokumentację.

24 lipca 2018 r. (wtorek) wydano Bootstrap 4.1.3, który wprowadza drobne korekty w stosunku do wersji 4.1.2, m.in. poprawę wyświetlania kontrolek formularzy. Następnym krokiem w rozwoju tej technologii będzie wydanie drugiego mniejszego wydania (ang. minor release) pod postacią Bootstrapa 4.2.

Czy Bootstrap to jedyne tego typu rozwiązanie?

Bootstrap to jedno z wielu rozwiązań upraszczających i przyspieszających tworzenie wyglądu nowoczesnych i atrakcyjnych stron i aplikacji internetowych.

Ma on swoją konkurencję w postaci m.in. ZURB Foundation tudzież Skeleton, ale — nie ma co ukrywać — prym w tej materii wiedzie produkt spod znaku Twittera.

Oczywiście, te same rzeczy można zrobić bez użycia tego typu dobrodziejstw, ale z pewnością wydłużyłoby to proces implementowania poszczególnych funkcjonalności.

A Wy o jakich jeszcze responsywnych frameworkach front-endowych słyszeliście? Czy wiedzieliście już wcześniej o nowej, czwartej już z kolei, wersji Bootstrapa? Jeśli tak, to jakie jeszcze cechy, Waszym zdaniem, są warte odnotowania i uwagi?

Zapraszam do dyskusji na naszym facebookowym fanpage’u!