Jak powinny być zbudowane duże aplikacje JavaScript?

Niedawno pokazano mi niektóre wtyczki JavaScript napisane dla OBIEE Mobile App Developer, a także niektóre niestandardowe biblioteki dla różnych projektów.

Pochodząc z OOP, jestem trochę zdezorientowany co do struktury tych projektów. Widzę pliki o długości tysięcy linii. Jestem przyzwyczajony do dzielenia rzeczy na pliki i klasy, ale rozumiem, że jest to inny framework - po pierwsze, rozmiar pliku to problem - ale musi być lepszy sposób, aby to wszystko zrobić?

Długość skryptów wpływa nie tylko na czytelność i łatwość konserwacji, ale także na ogólne zrozumienie działania programu.

Jaka jest struktura dużych aplikacji? Jakieś ogólne wzorce projektowe OOP do tego?

Jeśli nie znasz wzorców JavaScript, mogę powiedzieć, że wiele dużych aplikacji i bibliotek używa Revealing Module Pattern , ale istnieje wiele innych wzorców, których możesz użyć w zależności od potrzeb.

Wzorzec modułu ujawniania powinien jednak dać ci dobry sposób na dzielenie dużych plików i logiczne ich organizowanie; Jednak podczas pracy z dowolnymi wzorami projektowymi w JavaScript należy pamiętać, że może to być bardzo mylące. Spróbuj użyć tego , nowa , prototyp , .call()i .apply()mądrze.

Przy pracy nad dużymi projektami mogą one być również przydatne:

• Jeśli to możliwe, przełącz się na TypeScript lub ES6.
• Napisz kod modułowy . Istnieją różne sposoby i biblioteki stron trzecich, ale każda z nich jest lepsza niż nic.
• Użyj narzędzia Run Run / Build System do automatyzacji zadań.
• Przeczytaj o wzorach projektowych . To może być dobry początek. Jak powiedziałem powyżej, Wzorzec modułu ujawniania jest bardzo przydatny, szczególnie jeśli uważasz, że potrzebujesz czasu na opanowanie wszystkich popularnych wzorców.
• Napisz testy jednostkowe . Praca z dynamicznym językiem może być trudniejsza. Testowanie kluczowych części aplikacji może zaoszczędzić dużo czasu.
• Użyj IDE lub edytora tekstu, który może pomóc zarówno w pisaniu kodu, jak i wykrywaniu błędów. WebStorm to dobry wybór. Wysublimowany tekst też.
• Jeśli twoje IDE nie oferuje debugera, spróbuj opanować debuger swojej ulubionej przeglądarki internetowej.
• Użyj bibliotek. W zależności od charakteru projektu, spróbuj zastosować najlepszy kod innej firmy, jaki możesz znaleźć. Jeśli piszesz aplikację internetową, spójrz na Angular , React i starą wersję backbone.js . Jeśli piszesz aplikację Node.js, nie spiesz się, aby przeszukać repozytorium NPM . Zdziwisz się, ile pakietów już robi to, co właśnie miałeś zrobić.
• Nawet jeśli jesteś jedyną osobą, która pracuje nad projektem, nadal używaj systemu kontroli wersji, takiego jak Git i postępuj zgodnie ze standardem kodowania, który nie jest zbyt rygorystyczny i uparty, ale nadal stanowi dobrą wskazówkę, którą Twoi koledzy z zespołu chętnie podążać.
• Nawet jeśli zdecydujesz się na TypeScript lub ES6, nadal rozumiejąc bezklasowe OOP JavaScript, Prototypowe OOP może być przydatne, szczególnie podczas debugowania.

Jestem programistą C ++ i ostatnio zacząłem tworzyć strony internetowe. Portuję dużą aplikację komputerową do środowiska sieciowego. Konstruuję kod JavaScript dokładnie tak, jak ustrukturyzowałem kod C ++, używając tych samych wzorców. Mam w sumie około 25-30 plików, ale w końcu zmniejszę je do 3-5, odpowiednio pogrubiając i pomniejszając je wszystkie.

Dla mnie to tylko język się zmienił, na lepsze lub gorsze, ale nie ten paradygmat. JavaScript, pomimo wszystkich wad i frustracji, jest przyjemnym połączeniem funkcjonalności i stylu OOP. Do tej pory wszystko działało dobrze.

Wreszcie, jedną z rzeczy, które wcześnie zdałem sobie sprawę, było to, że JavaScript pozwala na pisanie o wiele bardziej zwięzłego kodu niż C ++, więc czasami posiadanie dużej liczby LOC pochodzących z języka innego niż JS może wynikać z trzymania się starego sposobu działania. Po rozwiązaniu tego problemu nie widzę niczego, co naprawdę powinno być inne. Projekt i algorytmy są mimo wszystko agnostyczne.

Oczywiście różni się znacznie w zależności od projektu, ale ogólnie przyjętą praktyką jest to, że w przypadku rzeczy, które mają funkcjonować jako biblioteki lub moduły, umieszcza się je w jednym dużym pliku i używają enkapsulacji, aby zapobiec jego wewnętrznemu („prywatnemu”) ) interfejs przed wyciekiem na zewnątrz. Jest to również pomocne dla programistów, którzy chcą korzystać z biblioteki / modułu - jednego pliku, aby dodać do konfiguracji aplikacji lub fragmentu nagłówka zamiast całej hierarchii folderów i plików do skopiowania i wklejenia. Odzwierciedla to również fakt, że przy minimalizacji i sprzedaży pakietowej w witrynie produkcyjnej najprawdopodobniej wszystkie zostaną połączone w jeden plik, aby zmniejszyć liczbę żądań HTTP.

Twój własny kod aplikacji nie musi być zgodny z tą praktyką i prawdopodobnie nie powinien. Ponieważ Twoja aplikacja jest jedyną, która z niego korzysta, musisz tylko dodać pliki raz i prawdopodobnie możesz liczyć na platformę, która poradzi sobie z minimalizacją i pakietowaniem.

Podczas pracy nad kodem różne komponenty są zwykle dzielone na moduły, z których każdy zazwyczaj implementuje jedną klasę, a każdy z nich znajduje się w osobnym pliku. Podczas produkcji pliki te są następnie łączone w jeden plik (stąd tysiące linii kodu, który widzisz) przy użyciu czegoś takiego jak Browserify ( http://browserify.org/ ) lub RequireJS w celu zmniejszenia liczby żądań HTTP, ale także w celu zapewnienia, że ​​zależności są ładowane we właściwej kolejności

Jeśli chodzi o sposób implementacji klas dla tych modułów, to trochę różni się od OOP w podstawowej mechanice, ale nie różni się tak bardzo na powierzchni. ES6 wprowadził nawet classsłowo kluczowe, więc powinno wyglądać znajomo. Ten artykuł na temat MDN jest przydatny na początek: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

Używam (Petri's) elementów sieciowych i adnotacji do organizowania lub „strukturyzacji” oprogramowania dla moich formularzy PDF - programów JavaScript, które używają interfejsu API Acrobat / JavaScript. Być może może być przydatny w twojej sytuacji.

Schemat służy do ustalenia relacji wejściowo-wyjściowych elementów netto i dwóch widoków adnotacji. W oparciu o schemat i widoki formularzy możliwe jest systematyczne tworzenie programów JavaScript do aplikacji formularzy PDF. Zatem „czytanie” kodu źródłowego sprowadza się do sprawdzenia, czy jest on zgodny ze specyfikacjami: diagramem i dwoma widokami formularza.

Implementacja mojego oprogramowania wykorzystuje konstruktory i prototypy. Jeśli wydajność stanie się problemem, zastąpienie prototypów członkami instancji może poprawić wydajność kosztem większego wykorzystania pamięci. Używane są również tablice. Jeśli wydajność staje się problemem, stosowane są bezpośrednie odniesienia.

Niektóre właściwości są tworzone przy użyciu eval; w przypadku obiektów o bardzo wielu właściwościach zmniejszyłoby to ilość kodu w pliku źródłowym - i ograniczyło pisanie przez programistę.

Nadal jest możliwe i zalecane, aby pisać JavaScript w sposób OOP, do którego jesteś przyzwyczajony. Oto dobra książka, która zawiera najważniejsze wzorce projektowe w JavaScript.

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Istnieje również wiele struktur JavaScript, w których głównym celem jest możliwość podzielenia kodu na różne pliki i moduły. Jeśli konkretny framework, w którym pracujesz, wymaga posiadania całego kodu w jednym pliku, zdecydowanie powinieneś się przełączyć.