it-swarm-eu.dev

Jaké technické podrobnosti by měl programátor webové aplikace zvážit před zveřejněním webu?

Jaké věci by měl programátor implementující technické podrobnosti webové aplikace zvážit před zveřejněním webu? Pokud Jeff Atwood může zapomenout na HttpOnly cookies , sitemaps , a cross - padělání žádosti o místo vše na stejném webu , na co důležité věci bych také mohl zapomenout?

Přemýšlím o tom z pohledu webového vývojáře, takže někdo jiný vytváří vlastní design a obsah webu. Takže i když použitelnost a obsah může být důležitější než platforma, vy programátor máte v tom jen malé slovo. Co si musíte dělat starosti, je to, že vaše implementace platformy je stabilní, funguje dobře, je bezpečná a splňuje všechny další obchodní cíle (jako to nestojí příliš mnoho, trvá příliš dlouho, než se staví, a řadí se stejně dobře do společnosti Google jako podpora obsahu).

Přemýšlejte o tom z pohledu vývojáře, který odvedl nějakou práci pro aplikace typu intranet v důvěryhodném prostředí, a chystá se jeho první výstřel a uvedení potenciálně populární stránky pro celý velký špatný světový web.

Také hledám něco konkrétnějšího, než jen vágní „webové standardy“. Myslím, že HTML, JavaScript a CSS přes HTTP jsou do značné míry dané, zejména když jsem již uvedl, že jste profesionální webový vývojář. Takže jdeme nad to, Které standardy? Za jakých okolností a proč? Poskytněte odkaz na specifikaci standardu.

2187
Joel Coehoorn

Myšlenka je taková, že většina z nás by měla již znát většinu toho, co je na tomto seznamu. Ale mohou existovat jen jedna nebo dvě položky, na které jste se doposud nedívali, úplně nerozuměli nebo možná nikdy o nich neslyšeli.

rozhraní a uživatelské zkušenosti

  • Uvědomte si, že prohlížeče implementují standardy nekonzistentně a ujistěte se, že váš web funguje ve všech hlavních prohlížečích přiměřeně dobře. Při minimálním testu proti nedávnému Gecko engine ( Firefox ), engine WebKit ( Safari a některé mobilní prohlížeče), Chrome , podporované IE prohlížeče (využijte Application Compatibility VPC Images ) a Opera . Také zvažte, jak prohlížeče vykreslují váš web v různých operačních systémech.
  • Zvažte, jak by lidé mohli používat web jinak než z hlavních prohlížečů: například mobilní telefony, čtečky obrazovky a vyhledávače. - Některé informace o přístupnosti: WAI a Section 508 , Vývoj mobilních zařízení: MobiForge .
  • Postup: Jak implementovat aktualizace bez ovlivnění vašich uživatelů. Mějte k dispozici jedno nebo více testovacích nebo pracovních prostředí pro implementaci změn v architektuře, kódu nebo zametání obsahu a zajistěte, aby mohly být nasazeny kontrolovaným způsobem, aniž by došlo k narušení všeho. Mají automatizovaný způsob nasazení schválených změn na živé stránky. Toto je nejúčinněji implementováno ve spojení s použitím systému pro správu verzí (git, Subversion atd.) A automatizovaného sestavovacího mechanismu (Ant, NAnt atd.).
  • Nezobrazovat nepřátelské chyby přímo uživateli.
  • Nevkládejte e-mailové adresy uživatelů do obyčejného textu, protože se dostanou do spamu.
  • Přidejte atribut _rel="nofollow"_ k uživatelsky generovaným odkazům , abyste se vyhnuli nevyžádané poště .
  • Sestavte na svůj web uvážené limity - Patří sem také zabezpečení.
  • Naučte se, jak to udělat progresivní vylepšení .
  • Přesměrování po POST , pokud bylo POST úspěšné, zabránit opětovnému odeslání aktualizace.
  • Nezapomeňte vzít v úvahu dostupnost. Je to vždy dobrý nápad a za určitých okolností je to právní požadavek . WAI-ARIA a WCAG 2 jsou dobré zdroje v této oblasti.
  • Přečtěte si Nenuťte mě myslet .

Zabezpečení

výkon

  • V případě potřeby implementujte ukládání do mezipaměti, rozumějte a používejte HTTP ukládání do mezipaměti správně a také HTML5 Manifest .
  • Optimalizace obrázků - nepoužívejte obrázek 20 KB pro opakující se pozadí.
  • Komprimujte obsah podle rychlosti, viz brotli , gzip/deflate (deflate je lepší).
  • Kombinujte/zřetězte více stylů stylů nebo více skriptových souborů, abyste snížili počet připojení prohlížeče a zlepšili schopnost gzip komprimovat duplicitu mezi soubory.
  • Podívejte se na Yahoo výjimečný výkon web, spoustu skvělých pokynů, včetně zlepšení front-end výkonu a jejich YSlow tool (vyžaduje Firefox, Safari, Chrome nebo Opera). Rychlost stránky Google (použít s rozšíření prohlížeče ) je dalším nástrojem pro profilování výkonu a optimalizuje vaše obrázky také.
  • Použijte CSS Image Sprites pro malé související obrázky, jako jsou panely nástrojů (viz bod "Minimalizovat požadavky HTTP")
  • Použijte SVG obrazové skvrny pro malé související obrázky, jako jsou panely nástrojů. SVG zbarvení je trochu složitější. Můžete si o tom přečíst zde .
  • Rušné weby by měly zvážit rozdělení komponent napříč doménami . Konkrétně ...
  • Statický obsah (tj. Obrázky, CSS, JavaScript a obecně obsah, který nevyžaduje přístup k cookies) by měl jít do samostatné domény , která nepoužívá cookies, protože všechny soubory cookie pro doménu a její subdomény jsou zasílány s každou žádostí do domény a jejích subdomén. Jednou z dobrých možností je použití sítě pro doručování obsahu (CDN), ale zvažte případ, kdy by toto CDN mohlo selhat zahrnutím alternativních CDN nebo lokálních kopií, které lze místo toho doručit.
  • Minimalizujte celkový počet požadavků HTTP potřebných k tomu, aby prohlížeč vykreslil stránku.
  • Vyberte si template engine a renderujte/předkompilujte jej pomocí běžců úloh, jako je doušek nebo grunt
  • Ujistěte se, že je v kořenovém adresáři souboru _favicon.ico_, tj. _/favicon.ico_. Prohlížeče to automaticky vyžádají , i když ikona není v HTML uvedena vůbec. Pokud nemáte _/favicon.ico_, bude to mít za následek spoustu 404 sekund, což vyčerpá šířku pásma vašeho serveru.

SEO (optimalizace pro vyhledávače)

  • Použijte adresy URL vhodné pro vyhledávače, tj. Použijte _example.com/pages/45-article-title_ místo _example.com/index.php?page=45_
  • Při použití _#_ pro dynamický obsah změňte _#_ na _#!_ a poté na serveru _$_REQUEST["_escaped_fragment_"]_, co googlebot používá místo _#!_. Jinými slovy, _./#!page=1_ se stává _./?_escaped_fragments_=page=1_. Také pro uživatele, kteří mohou používat FF.b4 nebo Chromium, je history.pushState({"foo":"bar"}, "About", "./?page=1"); skvělý příkaz. Takže i když se adresní řádek změnil, stránka se znovu nenačte. To vám umožní použít _?_ namísto _#!_ k udržení dynamického obsahu a také informovat server, když odešlete e-mailem odkaz, že jsme za touto stránkou, a AJAX nepotřebuje podat další žádost navíc.
  • Nepoužívejte odkazy, které říkají "klikněte sem" . Ztrácíte příležitost SEO a pro lidi s čtečkami obrazovky to ztěžuje věci.
  • Mají XML sitemap , pokud možno ve výchozím umístění _/sitemap.xml_.
  • Použijte _<link rel="canonical" ... />_ , pokud máte více adres URL, které odkazují na stejný obsah, lze tento problém vyřešit také z Google Webmaster Nástroje .
  • Použijte Nástroje pro webmastery Google a Bing Nástroje pro webmastery .
  • Nainstalujte Google Analytics přímo na začátku (nebo open source analytický nástroj jako Piwik ).
  • Zjistěte, jak fungují robots.txt a vyhledávače.
  • Přesměrovat žádosti (pomocí _301 Moved Permanently_) požadovat _www.example.com_ na _example.com_ (nebo naopak), aby se zabránilo rozdělení hodnocení Google mezi obě stránky.
  • Vězte, že tam mohou být špatně chovaní pavouci.
  • Pokud máte netextový obsah, podívejte se do rozšíření souboru Sitemap společnosti Google pro video atd. O tom jsou dobré informace v odpověď Tim Farley .

technologie

  • Pochopte HTTP a věci jako GET, POST, relace, soubory cookie a co to znamená být „bez státní příslušnosti“.
  • Napište svůj XHTML / HTML a CSS podle W3C specifikace a vyrobit ujistěte se, že validují . Cílem je vyhnout se módu prohlížeče a jako bonus vám usnadní práci s netradičními prohlížeči, jako jsou čtečky obrazovky a mobilní zařízení.
  • Pochopte, jak se v prohlížeči zpracovává JavaScript.
  • Pochopte, jak se načítají JavaScript, šablony stylů a další zdroje používané vaší stránkou, a zvažte jejich dopad na vnímaný výkon. Nyní je široce považováno za vhodné přesouvat skripty na konec vašich stránek, s výjimkou případů, jako jsou analytické aplikace nebo podložky HTML5.
  • Pochopte, jak funguje karanténa JavaScript, zejména pokud máte v úmyslu použít prvky iframe.
  • Uvědomte si, že JavaScript může a bude deaktivován, a že AJAX je tedy rozšíření, nikoli základní linie. I když většina uživatelů to teď nechává, pamatujte, že NoScript je stále populárnější. Přestože moderní prolézací roboti podporují indexování obsahu generovaného skriptem, zvažte použití vykreslování na straně serveru pro jiné prohledávací roboty nebo uživatele, kteří zakázali JavaScript.
  • Naučte se rozdíl mezi 301 a 302 přesměrováním (toto je také problém se SEO).
  • Dozvíte se co nejvíce o své implementační platformě.
  • Zvažte použití Obnovit šablonu stylů nebo normalize.css .
  • Zvažte rámce JavaScriptu (jako jQuery , MooTools , Prototype - , Dojo nebo YUI 3 ), což při použití JavaScriptu skrývá mnoho rozdílů v prohlížeči pro manipulaci s DOM.
  • Když vezmeme v úvahu vnímaný výkon a rámce JS společně, zvažte použití služby, jako je například Google Libraries API , aby načítala rámce, aby prohlížeč mohl použít kopii rámce, který již uložil do mezipaměti namísto stahování duplicitní kopie z vašeho webu.
  • Neotevírejte kolo. Před provedením jakéhokoli hledání vyhledejte součást nebo příklad, jak to provést. Existuje 99% šance, že to někdo udělal a vydal verzi OSS kódu.
  • Na druhou stranu nezačínáme s 20 knihovnami, než se rozhodnete, jaké jsou vaše potřeby. Zejména na webu na straně klienta, kde je téměř vždy v konečném důsledku důležitější udržovat věci lehké, rychlé a flexibilní.

Oprava chyby

  • Pochopte, že strávíte 20% času kódováním a 80% jeho údržbou, takže podle toho kódujte.
  • Nastavte dobré řešení hlášení chyb.
  • Mají systém pro lidi, aby tě kontaktovali s návrhy a kritikou.
  • Dokumentujte, jak aplikace funguje pro budoucí podpůrný personál a osoby provádějící údržbu.
  • Provádějte časté zálohy! (A ujistěte se, že tyto zálohy jsou funkční) Mají strategii obnovy, nejen strategii zálohování.
  • K ukládání souborů použijte systém řízení verzí, například Subversion , Mercurial nebo Git .
  • Nezapomeňte provést vaše akceptační testování. Mohou pomoci rámce jako Selen . Obzvláště pokud plně automatizujete své testování, snad pomocí nástroje pro kontinuální integraci, jako je například Jenkins .
  • Ujistěte se, že máte dostatečné protokolování pomocí rámců, jako je log4j , log4net nebo log4r . Pokud se na vašem živém webu něco pokazí, budete potřebovat způsob, jak zjistit, co.
  • Při protokolování se ujistěte, že jste zachytili jak zpracované výjimky, tak neošetřené výjimky. Reportujte/analyzujte výstup protokolu, protože vám ukáže, kde jsou klíčové problémy na vašem webu.

Ostatní

  • Implementujte monitorování a analytiku na straně serveru i klienta (jedna by měla být spíše aktivní než reaktivní).
  • Používejte služby jako UserVoice a Intercom (nebo jiné podobné nástroje), abyste byli neustále v kontaktu s vašimi uživateli.
  • Sledovat Vincent Driessen 's Git větvící model

Spousta věcí není nutně vynechána, protože nejsou užitečnými odpověďmi, ale proto, že jsou buď příliš podrobné, mimo dosah, nebo jdou příliš daleko pro někoho, kdo hledá přehled věcí, které by měli vědět. Prosím, klidně to upravte také, pravděpodobně jsem vynechal nějaké věci nebo udělal nějaké chyby.

2655
victoriah