Bootstrap

pytanie zadane 5 grudnia 2016 w Nasze projekty przez Horace17 Obywatel (1,070 p.)
edycja 5 grudnia 2016 przez Horace17

Witam !

Od kilku dni dłubię sobie w NodeJS, jak i w JS/JQuery/Bootstrap. Wcześniej nie miałem do czynienia z tymi technologiami, poza podstawami podstaw HTML/CSS/JS. Napisałem prostą aplikację, której zadaniem jest wygenerowanie skryptu do SQL/MySQL, który będzie umieszczał nasze dane z arkusza kalkulacyjnego do w bazie danych. Jeśli ktoś nie ma jakiegoś przykładowego arkusza, to tutaj daję przykładowy plik. Prosiłbym o ocenę kodu samej strony. To, czy generowanie takiego skryptu ma sens, nie ma znaczenia, po prostu taki pomysł miałem. Jeśli ktoś by chciał również ocenić backend, proszę pisać, wrzucę kod na GitHub(obecnie mam na BitBucket).

Link do strony : https://hopo-generator.herokuapp.com/

@edit Link do GitHub: https://github.com/Baakoma/hopo-generator

Z góry dziękuję za wszelkie komentarze. Pozdrawiam !

1	komentarz 5 grudnia 2016 przez kubaapk Nałogowiec (44,270 p.) Od razu wrzucaj repo na gh i linkuj ;)

komentarz 5 grudnia 2016 przez Horace17 Obywatel (1,070 p.)

Wrzucone, niestety coś popsułem i nie ma commitów.

Już nawet wiem co, ale kij z tymi commitami :)

komentarz 5 grudnia 2016 przez MichuDev Pasjonat (20,300 p.)

Git jest przydatny, zawsze masz starszą wersję kodu do której możesz wrócić jak coś rozwalisz.

3 odpowiedzi

odpowiedź 5 grudnia 2016 przez MichuDev Pasjonat (20,300 p.)

Kodu backend nie można ocenić, jak dasz do ocenimy.

SQL to standard, który nie jest w 100% implementowany przez każdą bazę relacyjną, każda baza ma swój dialekt więc lepiej pisz z jaką bazą / bazami ten kod jest zgodny ;)

Najbardziej podoba mi się to, że wchodząc wiemy co to robi, nie trzeba nigdzie zjeżdżać, klikać. Dodałbym przeciąganie plików przez Drag & Drop. Użytkownika aplikacji nie interesuje autor, bardziej to co robi. Możesz napisać o sobie niżej i mniejszą czcionką. Instrukcja jest ważniejsza dla niego niż autor.

Kolejna sprawa to semantyka: w header dałbym h1 a w nim tytuł. Reszta powinna być w main.

komentarz 5 grudnia 2016 przez Horace17 Obywatel (1,070 p.)

Wrzucone na GitHub, link wyżej.

komentarz 5 grudnia 2016 przez Horace17 Obywatel (1,070 p.)

Wprowadziłem pierwsze zmiany, co do Drag & Drop muszę poczytać, nie miałem z tym do czynienia.

komentarz 6 grudnia 2016 przez MichuDev Pasjonat (20,300 p.)

Więc ocena - najszybciej jak się da:

Stosuj dobre formatowanie i się jego trzymaj są narzędzia formatujące, poczytaj o editorconfig - pliku do konfigurowania wielu edytorów w celu jednolitego formatowania. Zarówno w HTML jak i CSS jak i JavaScript.
DRY - Don't repeat yourself czyli nie powtarzaj się. W twoim kodzie można znaleźć wiele powtórzeń (szczególnie na frontendzie). W przypadku backend nie potrzebujesz 16, 17 i 18 linii w pliku app/index.js.
Funkcje powinny być krótkie, oraz jeszcze krótsze niż są (Clean Code)!
W przypadku wystawienia aplikacji na produkcję np. tak jak ty na Heroku PaaS (chmura platform as a service), powinieneś minimalizować pliki które wysyłasz do klienta. Poczytaj o czymś takim jak build tools.
W ramach ćwiczenia postaraj się dodać więcej rozszerzeń plików arkuszy kalkulacyjnych np. CSV lub formaty danych takie jak XML, JSON, YAML. Zobaczysz wtedy w praktyce czy twoja struktura jest elastyczna. Również można spróbować od drugiej strony - dodać wsparcie dla innej bazy danych np. PostgreSQL, SQLite, MongoDB...
Pisz testy jednostkowe - nie trzeba tłumaczyć czemu w 2016 roku. Oprócz nich możesz pisać testy integracyjne i inne. Jednak testów jednostkowych powinno być najwięcej z testów.
Pamiętaj również o SRP.

komentarz 6 grudnia 2016 przez Horace17 Obywatel (1,070 p.)

1. Z tego co wyczytałem, to chodzi o kilka właściwości edytora, czy nie na ten temat czytałem ? http://editorconfig.org/

2. Właśnie z tego zdaje sobie największą sprawę, niestety, gdy chce coś na szybko wprowadzić, to wszystko się sypie ;/ Mógłbyś podpowiedzieć jak powinien wyglądać mniej więcej mój skrypt JQuery ? Raczej o sam zarys, bo szczerze, to nie do końca wiem jak to rozplanować. Na chwile obecną mamy tam zlepek funkcji, w tym 1 pseudo-globalna zmienna i nie wiem jak to ubrać ładnie ;/

3. Z tego co wiem, to funkcja powinna wykonywać tylko jedną rzecz, ale ciężko mi sobie to wyobrazić. Jakieś podpowiedzi dotyczące rozbicia np. pliku generator.js ?

4. Słyszałem o WebPack, Gulp i Grunt, którego z tych polecasz ? Wydaje mi się, że dla mnie będzie najlepszy Gulp.

5. W C# do tego można by wykorzystać DI(interfejs np. generator, itd.), ale w JS nie wiem jak miało by to wyglądać ;/ Na pewno zależy to też od jakości kodu, więc pewnie jak przepisze kod na czysto, to może na coś wpadnę. Mógłbyś prosić o jakieś pomysły ?

6. Spotkałem się z tym trochę w backendzie, ale nie jestem pewny jak testować frontent.

7. -> 2-3

Od których zagadnień polecasz rozpocząć ?

komentarz 6 grudnia 2016 przez MichuDev Pasjonat (20,300 p.)

Tak to ta strona.
Nie skrypt jQuery, tylko JavaScript (jQuery jest tylko biblioteką do operacji na DOM). Bardzo prosto: "use strict"; - na początku skryptu (włączenie trybu strict), nie trzymaj wszystkiego w globalnym scope), twórz małe funkcje, które mówią co robią. Nie mieszaj warstw - logika w jednym miejscu, wyświetlanie w innym, komunikacja w innym itp, oraz pojedyncza odpowiedzialność klas i metod. Stosuj wzorce projektowe. Poczytaj o: DDD, SOLID, GRASP. Jeśli język Java nie stanowi dla ciebie problemu polecam książkę od wujka Boba - "Czysty Kod".
Zdefiniuj co robi twoja funkcja jeśli w definicji użyłeś spójnika "i" to znaczy, że musisz ją podzielić. Jeśli sprawdza i wyświetla dane (nawet jak zdefiniowałeś to bez "i"), to robi 2 rzeczy.
Wybierz który chcesz, każdy ma inną zasadę działania: Grunt i Gulp bazują na przetwarzaniu dowolnych plików, Gulp używa do tego kodu, a Grunt konfiguracji. Gulp jest szybszy od Grunta, ale ma mniej pluginów. Webpack to module bundler, który pozwala na użycie require("module"); w przeglądarce z możliwością importowania stylów itp. Wszystko na koniec jest jednym plikiem JavaScript, który można zmniejszyć.
Jeśli będzie ten sam interfejs to dla JavaScriptu nie ma różnicy co to jest, ponieważ jest dynamicznie typowany. Jeśli w klasach do obsługi bazy danych umieścisz te same metody, ale o innych implementacjach.
Jeśli spotkałeś się w JavaScript w backend z testami, to podobnie jest na frontendzie. Poczytaj o Jasmine.

odpowiedź 5 grudnia 2016 przez Horace17 Obywatel (1,070 p.)
edycja 5 grudnia 2016 przez Horace17

odpowiedź 6 grudnia 2016 przez spokojny Nałogowiec (28,630 p.)

Myślałem że do Node.js promowane jest MongoDB. Strona ok, ale jeszcze jej trochę brakuje do wykończenia.

komentarz 6 grudnia 2016 przez Horace17 Obywatel (1,070 p.)

Z tego co czytałem, to jest promowane MongoDB jako baza danych, tylko zauważ, że na stronie nie składuje żadnych danych, tylko po prostu generuje zapytania MySQL :) Jakieś pomysły co można lepiej wykończyć ?