Microsoft-ov alat za testiranje veb stranica sa otvorenim izvorom zasnovan na Lint-u pomaže u obezbeđivanju i optimizovanju veb aplikacija. Jedan od korisnijih elemenata modernog okruženja za razvoj je i jedan od najstarijih razvojnih alata. Prvobitno razvijen kao deo YACC-a (još jedan kompajler kompajlera), prvi linter je bio ekvivalent gramatičkoj proveri za C-kôd. Ime mu potiče od pahuljičastih vlakana vune, Lint je isticao sintaksne i programske greške i problematičan kôd.
Lintujte sve
Tokom godina, Lint je dao svoje ime čitavoj gomili alatki za lintovanje, uglavnom fokusiranih na svetove C i C ++, ali sa verzijama za druge jezike i programske modele. Dobro dizajniran linter prolazi kroz vaš kôd pre prevođenja, tako da možete da ispravite greške i optimizujete ga. Savremeni linter je dodatak prevodiocu (mada mnogi moderni prevodioci, posebno alati kao što su .Net-ov Roslyn, nude linting funkcije kao deo višefazne operacije), izvršava se odvojeno da bi se istakle mnoge klase mogućih problema sa kodom, uključujući neinicijalizovane promenljive , loše formatiranje i probleme sa licencama. Takvi linteri mogu čak pomoći da preradite svoj kôd.
Oni su naročito korisni za interpretirane i deklarativne jezike, gde nema prevodioca da označi greške, što sprečava slučajno objavljivanje JavaScripta punog grešaka na Vebu, ili propuštene Python greške na javnom Jupyter Notebook-u. Povezivanje lintera sa alatima kao što je Visual Studio Code smanjuje rizik od grešaka i olakšava čitanje i traženje grešaka u kodu.
Predstavljamo Sonarwhal
Jedan deo moderne razvojne platforme za koji su očajnički potrebne dobre alatke za lintovanje je Veb. Ne samo da korisnički doživljaj vaših aplikacija gradite u HTML-u i JavaScript-u, već koristite CSS za stilizovanje i koristite čitav niz API-ja JavaScript pretraživača. To nije samo uobičajena mreža: iste tehnologije takođe koristite u progresivnim veb aplikacijama (PWA), koje rade kao samostalne aplikacije preuzete iz Microsoft Store-a. Tu nastupa Sonarwhal, nudeći usluge lintovanja koje se uklapaju u tok razvoja za Veb. Nedavno je objavljena Verzija 1.0.
Projekat otvorenog koda pod pokroviteljstvom JS Fondacije, Sonarwhal stiže iz tima za razvojne alatke Microsoft Edge. Imenovan po sonarskim sposobnostima visoke rezolucije malog arktičkog kita narvala (engl. narwhal), uzima pravila, svoja podrazumevana ili vaša vlastita, i primenjuje ih na kôd vašeg sajta, izveštava o problemima kako bi pomogao u izgradnji boljih, bržih i sigurnijih lokacija. Narval Nellie je maskota projekta iz crtanog filma.
Počnite sa Sonarwhal-om
Postavljanje Sonarwhal-a je lako; sve što vam je potrebno je relativno ažurna kopija Node.js (bilo šta novije od trenutnog dugoročnog izdanja podrške) i NPM. Možete ga pokrenuti direktno iz NPM spremišta preko npx, mada ako želite da prilagodite skup pravila, možete da ga instalirate lokalno putem NPM komandne linije. Pošto se instalira, čarobnjak vas vodi kroz osnovnu konfiguraciju, spremnu za pokretanje iz vaše izabrane komandne linije. Budući da je alat zasnovan na terminalu, možete pokrenuti Sonarwhal svuda gde možete pristupiti terminalu. Još ne postoji Code ekstenzija za Sonarwhal, što je šteta, jer bi integrisani veb linter bio veoma korisno sredstvo za bilo koga ko koristi kôd za izgradnju veb aplikacija.
Testiranje sajta je sasvim lako. Jednom kada je instaliran i konfigurisan, upišite:
„sonarwhal
Konfigurišite Sonarwhal
Podrazumevani konfiguracioni fajl Sonarwhal sadrži većinu testova koji će vam verovatno biti potrebni, ali imate mogućnost da instalirate druge konfiguracije ili da dodajete sopstvena pravila. U šest kategorija ima više od 30 pravila, za testiranje niza različitih svojstava sajtova i aplikacija. Izvršavanje Sonarwhala je jedan način da se postave ključna pitanja o vašoj veb aplikaciji i njenom sadržaju: Da li su vaše slike optimizovane za veb? Da li koristite najnovije bezbednosne zakrpe u vašim JavaScript bibliotekama?
To nije samo sredstvo za testiranje živih veb lokacija i usluga. Ugrađeni raščlanjivači mogu da rade sa lokalnim sadržajem kako bi testirali ključne konfiguracione fajlove niskog nivoa razvojnih alata za veb, uključujući transpajlere kao što su Babel i TypeScript, ili pakere modula kao što je Webpack. Koristeći raščlanjivač u programu Sonarwhal, možete testirati da li će alat koji koristite generisati kôd ili module kakve očekujete i da li će oni izazivati probleme kada se objave. Model Sonarwhal-ovog raščlanjivača vam omogućava dodavanje raščlanjivača za nove servise ili za funkcije specifične za aplikaciju.
Sonarwhal pristupa vebsajtovima putem konektora, koji za učitavanje sadržaja koriste automatske funkcije u modernim pretraživačima. Moraćete da instalirate sve pretraživače potrebne konektoru, kao što su Chrome ili Edge. Konektori mogu da se konfigurišu da koriste različite stringove korisničkog agenta, kao i prisiljavanje određenih postavki zaglavlja; na primer, kontrolu keširanja i prihvaćenih jezičkih resursa.
Raščlanjivači, pravila i rezultati
Kada se sajt učita, spreman je za analizu. Dodatni raščlanjivači bave se specifičnim tehnologijama, tako da je za JavaScript na raspolaganju jedan raščlanjivač baziran na popularnom ESLint-u. Možete da dodajete pravila preko raščlanjivača, ili preko vlastitih karakteristika Sonarwhal-a.
Srce Sonarwhal-a je njegov skup pravila. Ona sadrže testove koje se odnose na vaš veb sajt, a možete ih uključiti i isključiti, ili prilagoditi strogost u njegovim konfiguracionim fajlovima. Podrazumevana konfiguracija nudi izbor pravila, tako da možete odabrati da testirate HTTP opcije, kao i HTML, bezbednost sajta i podršku za PWA funkcije. Mnogi testovi zahtevaju dobro poznavanje mogućnosti veb servera, kao i HTML i JavaScript. Međutim, nakon što ste testirali sajt, podaci iz izveštaja vam pomažu u podešavanju sadržaja i servera za najbolje i najbezbednije performanse.
Rezultati se dobijaju u bilo kojem od nekoliko formata. Jedna opcija vam daje podatke u neobrađenom JSON formatu, idealnom za upotrebu u drugim aplikacijama. Dok JSON nije čitljiv za ljude, druge opcije prikazuju rezimee, listu specifičnih problema kodova, ili tabelu podataka o greškama. Možete čak spustiti podatke rezultata u Excelov radni list. Model formatiranja je proširiv, tako da možete da pravite vlastite modele i ponudite ih drugim korisnicima.
Sonarwhal kao usluga
Sonarwhal dokumentacija uključuje alat za onlajn skeniranje veb sajta, pa možete da procenite kako možete da ga koristite za prepravljanje i ispravljanje postojećih sajtova. Uključio sam ga na moju ličnu veb stranicu, koju sam napravio pomoću šablona sa javne platforme za objavljivanje na Vebu. Možda biste pomislili da to znači da će moj sajt imati minimum grešaka, ali to nije bio slučaj. Ne samo da je prijavio 77 bezbednosnih grešaka (uglavnom zbog slika koje su se nudile preko HTTP-a, a ne HTTPS-a), bio je i značn broj grešaka performansi – uključujući niz slika koje nisu optimizovane za veb pa su zato znatno usporavale sajt.
(Primer izlaza iz Sonarwhal lintera:
https://images.idgesg.net/images/article/2018/04/sonarwhal-100755774-large.jpg)
Da bi ubrzao stvari, Sonarwhal-ov skener uključuje linkove ka odgovarajućoj dokumentaciji, sa objašnjenjem problema i mogućim načinima za njihovo rešavanje. Dokumentacija se takođe fokusira na način optimizacije ispravaka; na primer, da se u iOS PWA-ijima koristi samo jedna ikona 180 x 180 piksela, jer iOS rukuje skaliranjem ikona na starijim uređajima i između telefona i tableta.
Veb je važan deo načina na koji svi mi gradimo aplikacije, a to je nešto što previše često zanemarujemo. Sa alatom kao što je Sonarwhal, možete puno toga da naučite o svojim sajtovima i serverima, što može poboljšati način na koji nudite veb sadržaj. Izgradnjom boljeg veba, učinićete ga sigurnijim i odzivnijim, nešto što će pomoći da vam se korisnici češće ponovo vraćaju.
Izvor: InfoWorld