After I created the Facebook fanpage for this blog (you can find it here: https://facebook.com/creynblog/) I decided that I want to invite all of my friends to like it. I wanted them all to join me on my path as a blogger. But the default “Facebook way” is to click them one by one on the “Invite” button next to the photo. And I had a lot of friends (222). So I decided that I will use my dev skills.

So first, go to the Facebook fanpage “Invite Friends” section:

Then you will see the list of your friends. Exactly 100 of your friends. So you have to scroll the list to the very bottom and as you will be doing this, you will notice that more of them are showing. So please scroll to the very bottom of the list (to have all of your friends shown). Next let’s see under the hood. I am using Chrome browser for this. So right click on the “Invite” button and choose something like “Inspect element”. The new window should open and then you can find the source code of the button:

You can see that the button has a class attribute called “uiButton“. So we can select all of the buttons using javasctipt. Open the Console tab and now you can execute some code in the context of the website. Quick look at the documentation (https://developer.chrome.com/devtools/docs/console#selecting-elements) and we can see that to get all elements with specific class we should use the “$$()” function. It will give us an array of all buttons that we want to click. So if we count them we should get number of our friends. In my case there was 218, so 4 of my friends were missing. Probably there is some “don’t invite me to the fanpage” option that they selected.

And now the final step. We could execute a “clicking” action on each button. It would be exactly like we were clicking all of them manually. This is done by following script:

And after just about 1 second (on Chrome browser) all of my friends were spammed with my invitation and I was so happy seeing them accepting the invitation :)

C.

	Node.js (https://nodejs.org/en/) JavaScriptowy silnik (?) do tworzenia aplikacji serwerowych. “Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.”
	NPM (Node Package Manager) (https://www.npmjs.com/) Menadżer paczek dla Node.js. “npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways. “ Instaluje się razem z Node.js Uwaga. Z powodu błędu związanego z przesyłaniem tokenów do uwierzytelnienia zaleca się aktualizację do najnowszej wersji. Więcej tutaj: https://nodejs.org/en/blog/vulnerability/npm-tokens-leak-march-2016/
	Grunt (http://gruntjs.com/) Program do automatyzacji “GruntThe JavaScript Task Runner” Instalacja za pomocą npm
	Gulp (http://gulpjs.com/) Program do automatyzacji (konkurencja Grunta?) “Automate and enhance your workflow” Instalacja za pomocą npm
	Bower (http://bower.io/) Menadżer pakietów dla frontendu (npm instaluje pakiety dla Node po stronie serwera, bower po stronie klienta) “A package manager for the web” “Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.” Instalacja za pomocą npm (bo jest to pakiet rozszerzający możliwości Node)

C.

“Aurelia is the most powerful, flexible and forward-looking JavaScript client framework in the world.”
“Aurelia is a next generation UI framework“.

Z tego co widzę, jest to taki następca bardzo popularnego Angulara. Choć może bardziej konkurencja. Nigdy nie myślałem o sobie jako o frontendowcu i dlatego wszelkie biblioteki ułatwiające programowanie w JavaScript uważam za świetny pomysł i im więcej tym lepiej.

Jak zatem zacząć? Na stronie Aurelii jest dość dokładny poradnik Getting Started. Dzięki niemu udało mi się stworzyć przykładową stronę.

Pierwsza rzecz, która rzuca się w oczy: bardzo dużo tutaj wszelkiego rodzaju: gulpów, gruntów, nodów, npmów i jsmpów. Chyba nadeszła chwila, aby dokładniej poznać te narzędzia. Na początek, fajnie że autorzy przygotowali “Starter Kit” aby przejść przez tutorial i zacząć poznawać Aurelię. Po pobraniu okazało się że ma on … 10 MB. Wydało mi się to trochę dużo. Drugą rzeczą jest liczba modułów. Aurelia jest bardzo modułowa i podobno można używać tylko tych, które są naprawdę potrzebne. Okazuje się jednak, że do wyświetlenia mojej banalnej strony potrzebne są praktycznie wszystkie. Nie wykluczam, że coś źle robię i w przyszłości będzie możliwe ograniczenie tej liczby, ale nie wiem czy nie jest to za bardzo modułowe :)

Ucząc się najlepiej zacząć od początku, także chciałem krok po kroku stworzyć najprostszy możliwy projekt. Do solucji w Visual Studio dodałem folder Aurelia i dwa podstawowe pliki: “config.js” i “system.js”. Pierwszy zawiera listę mapowań modułów na konkretne pliki. Być może tutaj nie potrzebuję mieć wszystkich a jedynie kilka podstawowych. Sprawa do zgłębienia. W każdym razie przenosiłem po kolei pakiety ze “Starter Kita” do solucji. Udało mi się uruchomić sam framework w tym sensie, że nie dostawałem już błędów 404 z plikami JavaScript Aurelii. Doszedłem do etapu tworzenia swojej aplikacji.

Aby to zrobić należy stworzyć dwa pliki: “app.js” i “app.html”. Plik “app.js” jest modelem dla widoku z “app.html”. Takie MVC. Przychodzący request jest mapowany do konkretnego widoku w ruterze, który konfigurowany jest właśnie w startowym pliku aplikacji “app.js”. Ja dodałem tam tylko jeden widok: events. Wyświetla on listę wszystkich zdarzeń pobranych z API, które stworzyłem wcześniej (OWIN WebApi na hostingu Webio).

Na koniec opublikowałem zmiany na hosting Webio i uruchomiłem przeglądarkę. Bardzo się zdziwiłem jak długo trwa wczytanie strony. Każdy moduł Aurelii jest pobierany jako jeden plik JavaScript a jest ich wszystkich … 95. Nic dziwnego, że trochę to trwa (30 sekund).

Ale jest tutaj pole do optymalizacji. W każdym razie drugie załadowanie strony, przy plikach pobranych z cache, jest znośne, choć też zbyt wolne dla tego typu strony. Trwa 1,5 s. Jest to koszt odpalenia frameworka i wszystkich dobroci, które ze sobą niesie, a których chyba nie zauważę w tak prostym projekcie.

Ciekawostka. Przed opublikowaniem tego posta postanowiłem jeszcze raz zrobić test strony po paru godzinach nieaktywności. Strona załadowała się w … 4 i pół minuty. Wydaje mi się, że na optymalizację będę musiał przeznaczyć więcej czasu niż początkowo zakładałem. Mam też nadzieję że nie będę musiał rezygnować z Aurelii.

Podsumowując, udało mi się uruchomić swoją pierwszą stronę we frameworku Aurelia. Na stronie możliwe będzie monitorowanie zdarzeń jakie wystąpią w mojej Smart Lodówce. Dostępna jest pod adresem: http://smartlodowka.creyn.pl (jeśli długo nic nie widać … cierpliwości). Dla przypomnienia, ta sama lista zdarzeń z systemu dostępna jest bezpośrednio z API: http://smartlodowka.creyn.pl/api/events.

C.