{"id":21672870,"url":"https://github.com/shushanfx/front-to-anywhere","last_synced_at":"2026-02-06T10:08:51.272Z","repository":{"id":245826961,"uuid":"811634207","full_name":"shushanfx/front-to-anywhere","owner":"shushanfx","description":"从前端出发，能走多远","archived":false,"fork":false,"pushed_at":"2024-10-15T15:33:50.000Z","size":692,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T04:09:29.835Z","etag":null,"topics":["frontend","fullstack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shushanfx.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-07T01:53:17.000Z","updated_at":"2024-10-15T15:33:54.000Z","dependencies_parsed_at":"2024-08-29T16:00:20.298Z","dependency_job_id":"8a94bf3f-03e9-4aa1-94ec-466376ce95b6","html_url":"https://github.com/shushanfx/front-to-anywhere","commit_stats":null,"previous_names":["shushanfx/front-to-anywhere"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shushanfx%2Ffront-to-anywhere","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shushanfx%2Ffront-to-anywhere/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shushanfx%2Ffront-to-anywhere/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shushanfx%2Ffront-to-anywhere/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shushanfx","download_url":"https://codeload.github.com/shushanfx/front-to-anywhere/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514222,"owners_count":21116903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frontend","fullstack"],"created_at":"2024-11-25T13:33:28.294Z","updated_at":"2026-02-06T10:08:51.219Z","avatar_url":"https://github.com/shushanfx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 从前端出发能走多远\n\n## 专题目录\n\n- [写在前面](./docs/chapter01.md)\n- [分布式会话系列](./docs/分布式会话/01-如何在spring中实现分布式会话.md)\n\n  - [分布式会话简介](./docs/分布式会话/readme.md)\n  - [1.如何在 spring 中实现分布式会话](./docs/分布式会话/01-如何在spring中实现分布式会话.md)\n  - [2.spring 如何实现分布式会话](./docs/分布式会话/02-spring如何实现分布式会话.md)\n  - [3.nodejs 如何实现分布式会话](./docs/分布式会话/03-nodejs如何实现分布式会话.md)\n  - [xx1-spring redis 分布式会话的存储格式](./docs/分布式会话/xx1-spring%20redis分布式会话的存储格式.md)\n\n## 写在前面\n\n2022 年 11 月 15 日，虽然在意料之中，但是靴子终于落地了：我们被裁了。互联网的寒冬肆意呼啸，冰冻了一批又一批人，大环境下能苟活已经很不错了。没有冰冻到你时，你觉得自己是寒冬的旁观者，寒冬降临到你头上时，你才感受到切肤之痛，这就是我当时真实的感受。当然，造成的影响就是北漂生活就此结束，我换了一个城市工作和生活。\n\n如今，2023 年 11 月，一年时间很快过去，我的工作生活相对稳定了。虽然当前的工作与技术相关，但是深度和广度要求不高，担心多年的技术底子最终无用武之地，也担心知识随着时间的推移终究淡忘。于是，我下定决心，要把技术记录下来。\n\n既然已经决定记录，问题便接踵而至：以什么形式的去记录？围绕什么主题展开？既然自我标榜是一名“前端”开发者，那我就从前端入手，同时，我又觉得如果仅仅是前端知识终究圈定了范围，属实是`画地为牢`了，那么一定要涉及一些前端之外的东西。于是，我定了一个专题`前端出发能走多远`：从前端开始，不忘记自己是一个前端开发者，它奠定了我的技术低调，“远”体现了两层含义：一是我的技术能挖掘多深，二是我的视界有多大，在深挖的过程中，我能否 360° 全面旋转。我觉得这个工作就好比挖土，挖得多深是离地深度，挖得得宽是土方体积，前者决定层次，后者决定质量。\n\n希望这是一个很好的专题。这是在为自己打气，也在为我自己定目标。\n\n言及至此，我有必要介绍一下我自己和我的前端之路。12 年毕业之后，开启“北漂”之路，从`java web`开始，2 年时间入了 web 之门，同时也埋下了全栈的执念（那时候也确实没有全栈的说法）。之后加入一家做搜索引擎的公司，参与搜索前端，这是我的技术的快速成长期，我确实体会到技术的乐趣，我能每天汲取新的知识，上午学习，下午处理工作，甚至有时连中午吃饭都是耽误的。之后，加入了一个视频网站，时间不长，却花了比较多的在构建工具的建设。再之后又回到之前的搜索引擎的公司，参与搜索结果的落地页建设，我开始思考如何从 0 到 1 去构建工程，更多的参与一些前端工程化的工作。疫情之后，我来了北漂之行的最后一家公司——所谓的某厂，在这里我可以以更大更广的视角去审视前端页面和前端工程，将前后端彻底打通，`微前端`、`低代码`、`前后端同构`、`云原生`、`大数据`等概念和实践轮番登场，确实让我看到了大厂的深厚底蕴。\n\n很幸运，我赶上了互联网浪潮的涨潮。从 jQuery 一统天下到 React、Vue、Angular 三分帝国，而今后起之秀 Svelte、Solid 的加入，外部环境不管如何，前端的技术迭代周期已经打开，而且战况预发激烈。分析上述各框架的内在，jQuery 的直接操作 DOM 变得越来越不被接受，通过数据驱动才是取胜之道，但是虚拟 DOM 存在性能损失，让后来者 Svelet 和 Solid 之流又不得不考虑重新回归到直接操作 DOM，所幸历史只是轮回并没有开`倒车`，开发者依然只需关注数据流动（变化）。\n\n由此看来，前端技术本质上是依托基本技术原理的上下波动，在激进和保守之间徘徊。比如当年前后端分离如火如荼，边界划分如边境的争夺——寸土必争，前端工程师好不容易逃脱 JSP、ASP、PHP 等动态语言的掌控。然而多年以后，前后端同构仿佛又让一切回到原点，所幸的是这次的主角是 Node.js——使用 javascript 作为编程语言。所以依然是前后端的分、前后端的合，究其原因可能也仅仅是四个字——降本增效。\n\n在很多人来看来，前端就是一个画页面做交互的。我不能说这个说法错误，只能说这个说法只看到了冰山之一角。前端后端之区分本质上是一个边界的划分，前端更加专注于快速的页面呈现和极致的交互体验。这里面我提到了两个关键字：`快速`和`极致`，简单来说如何把页面效果快速的呈现给用户，这个用户对于产品的第一印象，之后如何保证丝滑的体验。这是用户所能体验和感受到的，但其内部确实有很多的技术细节，简单列举一下：\n\n- 页面资源如何加载？资源又如何组织？如何生成？\n- 如何快速加载资源？如何快速实现首屏渲染以减少白屏时间？\n- 如何设计页面主题风格，按钮风格？如何设计动画效果？\n- 如何持续优化用户体验？如何确保不同展现终端的一致体验？\n- 数据怎么流动？页面行为如何组织？\n- 如何确保网站的稳定性？如何保证部署的稳定性？\n\n看似一个个简单的页面，背后有这复杂的体系支撑。前端不仅仅是页面的实现，还包括围绕页面的周边技术，从一个页面出发，所能扩展的全部边界。\n\n此刻，我想着我的专题`前端出发能走多远`，希望对那些入了坑和还未入坑的人有所帮助，我们共同走得更远！\n\n## 关于本工程\n\n本工程积累我对技术一些探讨和个人的一些感悟，不足之处，请大家批评指正。\n\n文章放置在`docs`目录下，每篇文章都是一个`md`文件，文章的目录结构如下：\n\n```shell\ndocs\n├── *.md\nimages\n├── *.png\n├── *.jpeg\n├── *.gif\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshushanfx%2Ffront-to-anywhere","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshushanfx%2Ffront-to-anywhere","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshushanfx%2Ffront-to-anywhere/lists"}