隐居以求其志,行义以达其道
前端路线图
前端路线图

前端路线图

以下前端技术路线图是来自GitHub非常火爆的develop-roadmap项目。

原链接:https://roadmap.sh/frontend

最下面有别人翻译的繁体中文版

Desktop ApplicationsElectronBonus ContentTauriLinters and FormattersPrettierESLintyarnHTMLFront-endLearn the basicsWriting Semantic HTMLForms and ValidationsConventions and Best PracticesCSSFloatsPositioningDisplayBox ModelCSS GridFlex BoxLearn the basicsMaking LayoutsFor resources and other roadmapshttps://roadmap.shVisit the Beginner VersionAre you just getting started?Responsive design and Media QueriesJavaScriptSyntax and Basic ConstructsLearn DOM ManipulationHoisting, Event Bubbling, Scope,Prototype, Shadow DOM, strictUnderstand the conceptsLearn Fetch API / Ajax (XHR)ES6+ and modular JavaScriptInternetHow does the internet work?What is HTTP?Browsers and how they work?DNS and how it works?What is Domain Name?What is hosting?AccessibilitySEO BasicsBasic Usage of GitGitHubRepo hosting servicesCreate account and Learn to use GitHubVersion Control SystemsWhat are they and why you should use onePackage ManagersnpmBitbucketGitLabWeb Security KnowledgePersonal Recommendation / OpinionI wouldn’t recommendOrder in roadmap not strict (Learn anytime)Alternative Option – Pick this or purpleCORSHTTPSContent Security PolicyOWASP Security RisksGet at least a basic knowledge of all of theseCSS PreprocessorsCSS ArchitectureBEMBuild ToolsTask Runnersnpm scriptsWebpackWebpackRollupRollupParcelParcelModule BundlersPick a FrameworkReactAngularVue.jsModern CSSStyled ComponentsCSS ModulesEmotionApolloStatic Site GeneratorsGatsbyJSNext.jsNuxt.jsVuepressJekyllCSS FrameworksCSS first frameworksthat don’t come withJS frameworkcomponents by default.BootstrapBulmaYou can fill all your testingneeds with just these.react-testing-libraryJestCypressTesting your Appsand Functional tests and learn how to writethem with the tools listed on the right.Learn the difference between Unit, Integration, Type CheckersTypeScriptProgressive Web AppsService WorkersStorageLocationNotificationsDevice OrientationPaymentsCredentialsWeb SocketsLearn different WebAPIs used in PWAsServer Sent EventsPRPL PatternRAIL ModelPerformance MetricsUsing LighthouseUsing DevToolsCalculating, Measuringand improving performanceServer Side Rendering (SSR)ReactNext.jsAngularUniversalVue.jsNuxt.jsMobile ApplicationsReact NativeNativeScriptFlutterHugoIonicGraphQLRelay ModernWeb ComponentsHTML TemplatesCustom ElementsShadow DOMPostCSSSassStyled JSXWebpackesbuildParcelViteEleventypnpmSvelteSolid JSPlaywrightRemixRemixFlutterAstroSvelteSvelte KitAuthentication StrategiesJWT, OAuth, SSO, Basic Auth, Session Auth etcJS based and better to use with yourframework based JavaScript apps.TailwindMaterial UIMantineRadix UIChakra UIDaisyUIContinue Learning with following relevant tracksNode.js RoadmapTypeScript RoadmapPerformance Best Practices

繁体中文版链接:https://github.com/goodjack/developer-roadmap-chinese