请教一个前端进阶问题

[hyyou2010]

我可以写这种点菜或商城 demo 网页：
https://github.com/maxyou/ele-h5-like
https://github.com/maxyou/xiaomi-store-client
可以写这种论坛网页：
https://github.com/maxyou/purebbs
技术上包含 react/redux-sage/graphql/typescript 等等

但我感觉这些从网页角度太过简单，假定我希望达到二线中型互联网公司还算不错的前端程序员的水平，我下一步该干什么？下一个实践项目推荐什么？

大家觉得 Gatsbyjs 怎样？是不是一个应用实践好方向？
或者 WebGL/Three.js/3D 呢？倒不惧数学。
或者模仿一下头条首页之类？

[chengxy]

看了一下，感觉页面样式好丑啊,CSS 果然没存在感。

[Pastsong]

软件工程很多时候实现功能并不是最主要的，重要的是“工程”

[cococoder]

多造轮子，自己写 promise,react,redux，react-router，挨个实现一遍

[seki]

gatsby 意思不大，也还不够工程，配置全靠抄和猜

一些建议
加入权限和帐号体系
多写一些逻辑复杂的页面，比如各类后台管理系统
多加一些页面，探索一下如何组织代码可以避免重复劳动
写测试

[seki]

可以分成两个方向，重视页面效果的写 css 的，还有重视逻辑的糊 crud 的，你可以先挑一个感兴趣的方向去研究

[hyyou2010]

@cococoder 请教，写这些对于实际工作直接帮助大吗，或主要是提升能力？

@seki 感谢。那个 purebbs 论坛几乎全是 crud 操作，看来我应该选一个重视页面效果的，不知道模仿头条首页是不是一个好选择？

[seki]

@hyyou2010 我也不知道二线互联网公司是什么情况，实际工作内容也是分几个方向的，写 crud 的程序员基本用不上那些 css 动画的奇技淫巧，反过来也是的

论坛我觉得你还没做到头。比如真正的论坛是有很多类角色的，超级管理员，管理员，版主，普通用户，能访问的页面和能做的操作都不一样

[qq007523]

别进阶了，基础很重要

[rabbbit]

中级不知道,可以完整的还原京东 /淘宝首页等复杂页面样式的话算初级.

[learnshare]

demo 不能太丑，良好的审美也是前端该有的能力

[chuxiaonan]

说说我的想法吧
@seki 的想法很不错 多角色多权限体系，用户鉴权、角色区分、前后端互信、免密登录、多端登录、单点登录等等 这里面可以深挖的业务和技术细节很多
另外 作为前端程序员 CSS 真的不能太对付啊。。。页面美观也是很重要的。。。

要做π型人才 而避免做 T 型人才
何谓π型人才？技术 业务两条腿走路，还要做到知识面够广 思维够宽 而不是“我觉得我做得已经够多了 还有什么可做的？”

[zzyyzz1992]

java spring boot 全家桶了解一下

[lamada]

面试一下就知道需要什么了，还是楼主是学生？

[woshixiaoqianbi]

找个网站 psd 图 从切图开始实现一个整站 不用功能实现太细，
技术不在多,动手之前想一想每个业务适用什么技术

[luoway]

我觉得中级主要在 js 上，实现一个 echart 或者 ueditor 足够了。
话说饿了么那个，我最近才做过类似项目，难点不在表面基本功能实现，而在细节上：例如饿了么分享过的首屏骨架屏方案。
UI 初中高级谁都能做，而做得比别家好，还能让别人服气，这才是区别。

[hyyou2010]

感谢诸君指导！

说来前端也有各种细分支，有时候就迷茫。写个人作品时就追求了功能实现，CSS 动画效果之类能省就省了。

@chuxiaonan
角色权限确实有太多内容，我只写了 admin/版主 /user 三个角色，权限配置都没加，可以做的内容太多了。我想的是成熟的后端框架可能就支持这些，自己写太耗费时间了。

@zzyyzz1992
那个论坛写到现在就不想写了，感觉后端选择不妥，继续写下去成本太高，的确应该换成 spring boot 之类，有充足的第三方库来支持。

@luoway
写一个 echart ？那应该很难吧？

@lamada
说得对，可能面试一下就知道了。考虑去打扰别人一下。

[murmur]

这个样式真的丑，自己没设计就完全照抄一个别人的东西，反正 做练习

[iMusic]

实现 echart 或者 ueditor 才中级吗，

emmmm...沉默时今晚的康桥

[luoway]

@iMusic 是的。毕竟做练习，结果往往很难完整实现。

[yamamotoahua]

兄弟你这 css 梦回 1998 啊。。
基础最重要，purebbs 不看样式还可以，建议加个 loading 啥的优化下

[OSF2E]

做产品，在细分、垂直领域做产品，集合实业做产品，技术产品供应链找到适合自己的位置，结合计算机技术以外的专业水平的知识做产品。这么说吧，九几年的时候，中国科学院计算技术研究所随便抓一个研究员，都能独立写出一个类 unix 系统，但直到现在一个拿得出手的国产操作系统到现在都没做出来，全特么是 linux 换皮大法，不是技术不到位，而是全特么把精力放在折腾各种技术指标上去了，老是想跳过调研市场需求、科学的产品设计等流程……简单点说，依葫芦画个瓢就想去赚钱……之前的军工也是，汽车行业也是……比比皆是

[seki]

不想写后端就搭个现成的论坛，然后用它的 api 咯
比如 discourse

https://docs.discourse.org/

[ericgui]

我非常奇怪的一个地方在于，你的前端其实实现了 ssr
但是你用的是 webpack-dev-middleware，但这玩意是 dev only

所以。。。。

当然了，你要说这个能不能用，当然可以用的
但就是感觉很奇怪

如果你足够牛，把这个改造为一个 production -ready 的东西，就非常牛逼了，大大简化了 ssr

[ericgui]

我指的是 purebbs

[lhx880619]

threejs webgl 如果要走就是图形方向啦 水太深 感觉会比较偏门 了解下 做做 demo 就行 不用深入

[xianxiaobo]

找个 UI 库用一下吧，页面样式感觉停留在上个世纪

[CasualYours]

https://roadmap.sh/frontend
建议你到 dribbble.com 上找一些 web 原型图，去实现它。

[sl1673495]

写的 ts 全是 any
写的 css 太丑

[jrtzxh020]

这样式 连我审美这么差的人多觉得难看。。

[hyyou2010]

感谢大家指导，界面美化的确从未考虑，没抄，没设计，出于练习考虑也尽量没用 UI 库。以后 UI 这方面需要大力加强。

[Ixizi]

可以写个 web 的 photoshop 或者视频编辑器啥的

[ahonn]

其他的就不说了，作为前端还是需要审美的。你这最多算糊页面，还糊得不好看..
先不要考虑进阶，先踏踏实实搞基础吧..

[hyyou2010]

@ericgui
感谢指点，这里恰好想多问两句。

实际上我对 SSR 非常不在行，不可能去刻意实现 SSR。在你之前有个 cnodejs.org 社区的朋友也奇怪，为什么类似“http://purebbs.com/#/detail/10009”这样的网页刷新之后也可以打开，据说 SPA 是打不开的，其实我一直不懂也不解，为什么就不能打开呢？刷新后先加载客户端，客户端再获取数据，不就是这么个普通过程嘛？

那个 webpack-dev-middleware 我不知道是干什么用的，似乎创建 webpack 项目的时候缺省就有，我刚刚在 package.json 里删除了，也可以照常运行，然而查看 package-lock.json 发现里面还有，而这个文件是 webpack 创建的，删除后再自动创建也有这个 webpack-dev-middleware。

我目前知识深度远不到钻研这些细节的程度，能力不足以去深挖了。

[hyyou2010]

@CasualYours
感谢，你的建议具有可行性，我一下子就看到一张漂亮的网页： https://dribbble.com/shots/7572171-Meal-Prep-Delivery-Service-App/attachments/365047?mode=media
我应该能够实现这个。

[hyyou2010]

@lhx880619 谢谢，有点偏，但感觉比较长久，前端的其他技术变化太快，淘汰太快了。
@Ixizi 谢谢，我绝对没有这个水平，那个 ffmpeg 都看得我头昏。
@yamamotoahua 感谢，个人练习作品，省略了太多，最近看 Apollo-react 真是现成就提供 loading 标志，也许应该加进去试试看。

[Ixizi]

@hyyou2010 那可以自己实现一个 webpack/babel/vue/react 之类的轮子

[LWXYFER]

其实进阶的话，不只是代码与技术的问题，很多业务并没有那么深入，更多需要关心项目管理，协作，沟通等等问题。当然技术进阶的话，还是造轮子，或者在垂直领域发力（ WebGL，编辑器等等）

[hewelzei]

我和你相反，写的项目大部分时间都花在 UI 设计和 css 样式上了

[gaigechunfeng]

@hewelzei 其实我也感觉是，做外包项目，主要是 UI 和 css。 不去大厂，没机会研究这么深。

[Beliver]

1：当你初学的时候，你考虑的只是如何实现功能
2：实现功能之后，你考虑的是如何进行功能优化，交互优化，执行效率优化，性能优化
3：所有框架的本质都是为了解决问题而生的，当你有能力了，可以试试自己造轮子
4：数据结构算法领域，
5：后端、数据库，服务器技术栈领域
6：团队的协作，沟通。执行，解决问题能力也尤为重要。
最后，学习，能为公司解决问题的能力才是最重要的，技术永远也只是手段！

[Alsmile]

给你推荐一个开源绘图项目，不妨拿这个练练手，学习如何分层、开发公用库。基于 typescript + canvas 写的，易集成、方便自定义图形库，支持微服务架构图、流程图、时序图、活动图、类图、动画，可以实现 SCADA 等，详细介绍：
https://juejin.im/post/5d6c88726fb9a06b0e54ab35

[hyyou2010]

@Beliver 感谢指导！
@Alsmile 你这个就太厉害了，期待我到一定程度的时候再学！

[ericgui]

@hyyou2010 cnodejs 上的那个也是我。。。。。哈哈。。。。。

[hyyou2010]

@ericgui
哈哈，世界好小。那个 ssr 的问题我是完全不清楚，也没空钻研，取舍之后得看其他的。

[ericgui]

@hyyou2010 那好，我就简单给你科普一下 SSR： 最大的用途是用于 SEO 和链接分享，便于内容传播。

论坛、博客等尤其需要

[hyyou2010]

比如直接访问： http://purebbs.com/#/detail/10009
那么过程是：1，加载客户端，2，客户端根据 url 去服务器获取数据，再显示。这里为什么可能有 SPA 什么不显示的问题？

[houchangxiaowang]

@Alsmile 链接挂了，可以重新帖一下吗