"Living" Weather APP - wasza ocena i uwagi

Witam Was serdecznie,
Minęło już parę tygodni odkąd prosiłem o ocenę kodu i uwagi odnośnie innej mojej strony opartej o czysty JS. Teraz przyszedł czas na kolejny projekt.
Aplikacja wyłącznie w celu nauki ;)

Ale przejdźmy do rzeczy. Aplikacja "żyje" sama, wystarczy ją włączyć i można zostawić, jednak pogoda sama w tym czasie będzie się uaktualniać. Wszystko generowane jest dynamicznie, a co za tym idzie, obciąża niestety mocno procesor. Obecnie optymalizacja jest na słabym poziomie (chodzi o animacje). Próbowałem różnych rozwiązań (bez canvasu), i obecne wydają się najbardziej wydajne na Chrome/Firefox.

Co przedstawia aplikacja:

• położenie słońca takie, jak za oknem (wschód/zachód w tym samym czasie, w którym słońce znika nam za horyzontem),
• zachmurzenie (ilość chmur, prędkość, kolor) generowane na podstawie danych pogodowych,
• deszcz, śnieg,
• burza,
• szczegóły pogody,

Wygląd adresu URL jest celowy:
https://dioen.o6.pl/Weather%20APP/

Repo:
https://github.com/dioen/dioen.github.io/tree/master/weatherapp

W planach:

• posprzątanie kodu,
• dodanie typów pogody,
• optymalizacja animacji,
• możliwe przystosowanie na mobilki, o ile będzie możliwe

Czego aplikacja nie wspiera i (prawdopodobnie) nie będzie spierać:

• prognoza pogody,

Reasumując, byłbym wdzięczny za nakierowanie mnie, w jaki sposób mogę zmniejszyć obciążenie procesora podczas animacji (jest to dla mnie obecnie priorytet), jak i za wszelkie inne uwagi ;)

ręczne podawanie lokalizacji bo na pewno Józefów to nie jest moje aktualne położenie. BTW tytuł okna "The HTML5 Herald" jest zamierzone?

Ręcznego dodawania lokalizacji nigdy nie będzie ;) takie zamierzenie apki, wybacz. Herald :D jak to ktoś powiedział "programiści są leniwi" oczywiście chodzi mi tutaj teraz o humorystyczne podejście do tematu ;) zmienię zmienię, ale to pierdoła jest.

no to w takim razie lokalizację masz z d**y pokazywaną :(

Wszystko zależy od dostawcy neta ;) u niektórych jest dobra, u niektórych jest zła. Założenie było, że tak ma działać i tak zrobiłem :P Masz jakąś radę na optymalizację animacji? Bo na telefonie teraz żre CPU jak Geslerówna 4ty obiad w ciągu godziny :(

Hmm, inne strony mi pokazują dobrą lokalizację "Kraków", a tutaj nagle dostaję "Dąbie". Chyba, że chodzi o dzielnicę bo faktycznie do dzielnicy "Dąbie" mam niedaleko. Ale w takim razie powinno też miasto pokazać

To już wina Open Weather Maps. Widocznie uznało, że taką lokalizację powinno pokazać. Także z tym nic nie zrobię ;)

Trochę nie rozumiem Twojego podejścia do tematu.

Dostajesz feedback od osób, które poświęciły czas na skorzystanie z Twojej aplikacji - zgłaszają Ci kiepskie funkcjonowania geolokalizacji. W tym momencie akceptowalna byłaby zmiana dostawcy danych albo dodanie funkcjonalności, która by ten obszar pokryła (tu: chociażby ręczne wprowadzenie lokalizacji - już nawet nie wspominam o krzyżowym checkowaniu danych od dwóch różnych dostawców API). Ty natomiast stwierdzasz, że tego nie planowałeś i zostanie tak, jak jest.

WTF? Gdyby to była produkcyjna aplikacja postąpiłbyś tak samo?

Gdyby to była aplikacja produkcyjna i klient wyraźnie określiłby swoje wymagania, to z pewnością odmówiłbym współpracy. Przecież nie będę robił czegoś z czym się nie zgadzam, prawda? :D

A tak serio. Dziękuję wszystkim za wypowiedzi i rady, a także uwagi. Jednakże wolałbym pozostać właśnie przy takim rozwiązaniu. Właśnie z racji, że robię to dla siebie szczególnie, chciałem tutaj zrobić swoją wizję i udało mi się. Jestem z tego zadowolony, jednak martwi mnie optymalizacja. Mam głęboką nadzieję, że Maciej Cąderek zawita jeszcze do tematu i poświęci trochę czasu na przepatrzenie kodu. Bardzo mi pomógł na początku mojej nauki za co mu serdecznie dziękuję :)

Nie wykluczam, że zrobię drugą apkę (bądź dla testu wprowadzę możliwość wpisywania lokalizacji w obecnej), w której będzie możliwość wyboru lokalizacji, nie ma z tym większego problemu.

W ramach wyjaśnienia odnośnie API jeszcze. Przepatrzyłem parę API, w tym DarkSky, AccuWeather, pisałem maile, jednak żaden dostawca nie spełniał wszystkich wymogów, które potrzebowałem. Chciałem, by dostawca sam dostarczył mi informację z jakiej lokalizacji pochodzi pogoda, czyli tak, jak ma właśnie Open Weather. Dark Sky nie zwracał niestety nazwy lokalizacji, a AccuWeather... To już osobny temat rzeka.

Inną sprawą. Jeżeli miałbym dostarczać informacje od dwóch dostawców, czyli API pogody i API google (lokalizacji). Co to da, skoro użytkownik może być w tym momencie okłamany? API google przykładowo zwróci prawdziwy wynik zaznaczonej, bądź wpisanej lokalizacji, przyjmijmy Katowice, podczas gdy dostawca pogody nie będzie miał tejże lokalizacji i zwróci wartości dla najbliższej możliwej lokalizacji, dajmy na to Mysłowic? Uprzedzam bardzo dociekliwych, TO JEST WYŁĄCZNIE PRZYKŁAD.

Lepiej by użytkownik był fałszywie przekonany, że dostaje dobre dane, czy lepiej, by dostał prawdziwe informacje?

Dzięki wszystkim i miłego dnia życzę! :)

Z tą nauką to bym się nie zatrzymywał :) To jeszcze nie koniec, dopiero wszystko przed Tobą :D - ES6 / (Webpack / grunt / gulp) / SASS / Jakiś framework (React / Angular)

A sądziłeś, że uznałem, że jestem na finiszu? :D W żadnym wypadku ;) ES6 wstępnie ogarnąłem parę dni temu (zaznajomiłem się z nim, na przyjaźń przyjdzie czas) ;) Webpack, grunt, gulp, tu mnie masz! Muszę przysiąść. CSS kuleje :( no cóż, nie wszystko na jeden dzień. Na razie mocno i to bardzo ciągnie mnie do node js i express.js... I angularJS.

Nie potrzebujesz znać wszystkiego od razu, po prostu wymieniłem dość popularne narzędzia wykorzystywane do budowania komercyjnych apek itp. Myślałem, że planujesz już spocząć na laurach :D

Ale jeżeli będziesz czuł się na siłach by wejść level wyżej (od Ciebie to tak naprawde zależy) to jeżeli mogę Cie nakierować:

Zacząłbym od ( zakładając, że wiesz czym jest "npm" ):

• Ecmascript powiedzmy od 6 wzwyż ( poczytaj o ficzerach ecmascripta, daje naprawdę dużo )

• Do punktu wyżej potrzebujesz również: Babel'a - transpiler, innymi słowy umożliwi Ci zbudowanie z modułów ( bo jak wiesz bądź nie, ES posiada cos takiego jak import/export - coś zajebistego) jednego pliku np. app.js który możesz potem wrzucić do swojego HTMLa (nie musisz już wrzucać do HTMLa 20 plików JS, albo jednego ogromnego - w zasadzie zbudowany plik nadal będzie duży, ale ty src będziesz miał w małych fajnych modułach)

I co tym zyskasz? W twoim pliku jest kod w jsie i to w dodatku w <script></script> który jest dość długi - tak szczerze, potrafisz tam coś bardzo łatwo odnaleźć? Ecmascript umożliwi Ci podzielenie takiego kodu na mniejsze, bardziej czytelne moduły właśnie wykorzystując export / import - dodatkowo ecma ma klasy które pozwolą Ci wprowadzić jeszcze większy porządek i łatwiejsze dziedziczenie :D (taka klasa po transpilacji to nic innego jak zwykłe funkcje - a funkcje to obiekty, należy to wiedzieć)

No i wybaczcie za odbieganie od tematu :) A apka bardzo fajna, podoba mi się :) , tylko tak jak pisali poprzednicy, ta nieszczęsna lokalizacja :D

Powodzenia w dalszym rozwoju!

Wiem, znam ES6 i modułowość. Do tej apki jednak nie chciałem tego używać. W głowie rodzi mi się pomysł na nową apkę z server side i angular JS w roli głównej. Ale na razie TYLKO rodzi mi się w głowie :P W projekcie na pewno będzie ES6, Webpack, express.js jak i wiele innych rzeczy :P

Wesołych świąt wszystkim! ;)