10年老前端,分享20+严选技术栈

大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。


我是2015年入行的,到今年2025年刚好10年。

前面5年,我在长沙做前端,换了多份工作,做过小公司技术负责人,切图仔,游戏前端,前端讲师,合伙创业,也组织过多次前端线下交流,与同行一起游古镇,夜爬衡山。

后面5年,我一直待在农村,除了自驾游,一概闭门不出,电话,视频,语音等一概不接,谨守心神,安安静静地做一个网络键盘侠。

由此可见,我是一个比较偏执的人,要么很活跃,要么很安静,在技术上面来说,我也是如此偏执。

那么分享一下我现在的技术栈和背后的思考,希望可以给需要的朋友带来一些参考。

Bun

地址bun.sh

我已经半年没用 Node.js 了,本地机器和服务器上面都把 Node.js 完全删除了。

我用 Bun 来做后端接口开发,内置了 Mysql,Redis,Websocket 等等,无需任何外部依赖实现完整的后端开发。

而且还支持直接打包整个前端项目为一个 exe 文件,点击就能在本地跑一个服务,你说离不离谱 (强不强大),这还只是冰山一角,更多功能可以自行探索。

befly

地址github.com/chenbimo/be…

音译 蜜蜂飞舞,是我8月份耗时20天为 Bun 量身打造的后端 API 接口框架原型。

没有任何外部依赖,使用方便,当然,限制也多,但是如果只是在这个框架里面干活,那是出奇地高效。

 看机会

技术大厂→跳板_机会,前端-后端-测试等,待遇和稳定性还不错,感兴趣可试试~~

MoonBit

地址www.moonbitlang.cn

做前端或 js 后端的性能优化和加密,生成的 Wasm 处于目前行业领先水平,我正在用它重构我所有产品的核心逻辑和通用方法。

是我目前除了 JS 外,最想熟练掌握的一门语言。

Vue

地址vuejs.org

我只写 Vue,更准确地说,我只写 Vue3,其他的框架一概不碰,一个同类型的技术只需要熟练其一即可。

tdesign-vue-next

地址tdesign.tencent.com/vue-next

腾讯出品的 Vue3 UI 库,是我目前写 web 的主要 UI 框架,我之前一直用的是字节的 arco-design-vue,可惜已经快半年没动静了。

pinyin-pro

地址pinyin-pro.cn

与拼音相关的库我就用这个。

Uniapp

地址uniapp.dcloud.net.cn

不说那些有的没的,论小程序快速出活,除了 Uniapp 还有谁?更何况它打包 APP 也方便。

至于所谓的 BUG 嘛,其实绝大部分项目 Uniapp 都能胜任,硬是要拿部分项目的 bug 来否定整个 uniapp,还是有失偏颇的。

不过,还是要吐槽一句,官方开的坑太多了,很难想象这么分支,精力,人力能不能跟得上。

wot-design-uni

地址wot-design-uni.cn

我现在写 Uniapp 项目只用这个 UI 框架,更新勤快,组件丰富,作者友好,有问必答,爱了爱了。

uni-helper

地址uni-helper.js.org

补全了 uniapp 生态的短板,提供了一系列的工具来让 uniapp 的开发体验达到 web 开发的效果,用爱发电,大爱无疆。

unibest

地址unibest.tech

开箱即用的 uniapp 模板,精心打造的魔法城堡,有用到很多 uni-helper 的很多生态库。

date-fns

地址zh.javascript.info

日期操作我只用这个,几百个日期操作函数,堪比日期届的 lodash。

es-toolkit

地址zh.javascript.info

lodash 已经4年多没更新了,es-toolkit 是 lodash 的精神续作,目前已经兼容 lodash,可以迁移过来了。

echarts

地址zh.javascript.info

图表库我只用 echarts,目前 v6 版本已发布,更好用,更强大了。

leafer-ui

地址zh.javascript.info

国产图形库的黑马,我一直想用这个做我的图形化产品,可惜一直没挤出更多时间,随时准备把这个用上。

tyme4ts

地址6tail.cn/tyme.html

与农历相关的操作我就用这个,开源,免费,好用。

eruda

地址eruda.liriliri.io/zh/

有时候写 h5 页面,要在手机上面进行调试,写 uniapp 的 app 项目好像也能用到,这个调试起来很好用,完美还原了浏览器控制台的体验。

wang-editor-next

地址wangeditor-next.github.io/docs

副文本编辑器我还是更喜欢 wang-editor (双越老师作品),这个 wang-editor-next (由cycleccc主要维护) 是 wang-editor 的精神续作,可以无缝迁移。

md-editor-v3

地址imzbf.github.io/md-editor-v…

markdown 编辑器,开箱即用,这是我比较喜欢的一个。

javascript-obfuscato

地址github.com/javascript-…

目前给 js 做混淆加密的不二之选。

JavaScript

地址zh.javascript.info

这是用来对标 TypeScript 的,从业10年,我一行 TypeScript 都没写过。

如今,在 AI 的加持下,把测试用例写好,bug 也没有想象中那么多,至于类型提示嘛,我没用过,听说 jsdoc 不错。

SCSS

地址sass-lang.com

与 Vue 一样,我只写 SCSS,不碰 Less,Stylus,Css-module 等等。

之前也用过 unocss,但是自己的场景有限,用不到太原子化的东西,所以 tailwindcss 更别提了,scss 已经足以满足我的所有需求。

Mysql

地址www.mysql.com

数据库存储部分,简单,方便,易用还便宜,腾讯云的轻量 Mysql 只需要 30元/月,优惠后,一年只要不到 300 块。

我用正规的云数据库是多少钱呢?2500元/年,比我服务器还贵!

怎么说呢,业务起步阶段,还是省点钱吧。

Redis

地址redis.io

缓存领域当之无愧的无冕之王,我用这个来补充 Mysql 的短板。

好了,以上就是我目前常用的技术栈,如果感兴趣,可以给我一键三连~

——转载自:前端之虎陈随易

渝农服农业产业互联网平台 - 产品需求文档(PRD) 文件版本: V1.0 日期:2023年10月29日 项目名称:渝农服小程序 文档编号:PRD-YNF-V1.0 1. 文档概述 项 内容 项目名称 渝农服小程序 项目简介 一款赋能乡镇农资店,整合土地、农资、技术、金融、劳务、销售全产业链资源的农业综合服务平台。 目标用户 1. 农户/种植户 2. 乡镇农资店(升级为服务站) 3. 大宗农产品采购商 核心价值 为农户提供“种什么、怎么种、卖给谁、钱在哪”的一站式解决方案;为农资店增收提效。 阅读对象 项目经理、UI/UX设计师、前端/后端/测试工程师、运营团队 2. 整体功能清单(Mind Map) ```mermaid mindmap root((渝农服小程序 V1.0)) 核心功能 土地资源 信息发布 地图找地 需求悬赏 线下带看 农资集采 严选商城 SPU/SKU管理 订单管理 物流跟踪 AI农技 病虫害识别(AI+人工) 智能问答 专家问诊 劳务调度 用工发布 劳务报名 人员管理 我的 我的地块 我的订单(土地/农资) 我的劳务 我的佣金 服务端管理后台 总平台后台 全局数据看板 用户与权限管理 内容与资讯管理 财务与分润管理 区县管理后台 本区县数据看板 服务站管理与审核 订单与用工审核 服务站工作台(PC/小程序) 土地信息审核 客户管理 佣金提现 农资代下单 ``` 3. 核心功能模块详细说明 3.1 土地资源模块 · 功能描述: 用户可发布、浏览、查询土地流转信息。 · 需求详情: · 信息发布: 发布者需填写土地位置、面积、价格、性质(耕地/林地)、照片、视频、联系方式。信息提交后,由土地所属乡镇的服务站审核(若无服务站,则由平台审核)。 · 信息展示: 列表式与地图式(集成腾讯地图API)两种浏览方式。支持按面积、价格、地理位置筛选。 · 收费模式: · 线上: 用户支付信息费后,可查看发布者的直接联系方式和高精度位置。 · 线下: 用户可选择“联系带看”,需求直接派发给属地服务站,由服务站提供带看服务并收取中介费,平台与服务站分润。 3.2 农资集采模块 · 功能描述: 自营式农资电商平台。 · 需求详情: · 平台严选: 平台统一招商、选品、定价、上架(SPU/SKU管理)。确保品质,杜绝假货。 · 购买流程: 标准电商流程(浏览-加购-下单-支付-售后)。支持农户自行下单,或到线下服务站由店员代下单。 · 物流: 与物流厂商合作,提供物流跟踪功能。 · 分润机制: 农户每笔订单,其所属区域的服务站自动获得佣金,可在其后台查看。 3.3 AI农技模块 · 功能描述: 提供病虫害智能识别与解决方案。 · 需求详情: · AI识别: 用户拍照上传,系统调用第三方AI接口(如百度飞桨)进行初筛,返回识别结果和初步解决方案。 · 人工审核: 识别结果自动推送至平台专家库(可由资深农艺师兼职),专家进行最终审核并修正方案,确保准确。 · 药方与购药: 最终方案中可包含推荐药品,并直接链接到农资集采模块的对应商品,实现“即识即买”。 3.4 劳务调度模块 · 功能描述: 连接用工方与劳动力。 · 需求详情: · 用工发布: 种植大户/企业可发布用工需求(时间、地点、工种、人数、薪资)。 · 劳务报名: 劳动力(由服务站组织管理)可在线报名。 · 管理: 服务站可看到本区域的用工需求,并推荐合适的劳动力人选。平台提供打卡、评价机制。 3.5 权限与分润后台 · 功能描述: 不同角色有不同视图和权限,分润系统自动化。 · 需求详情: · 权限隔离: 服务站只能查看和操作其所属乡镇的数据。总平台可查看全局。 · 分润系统: 后台可配置不同业务(土地、农资、劳务)的分润比例。每一笔交易完成后,系统自动计算佣金并计入相应服务站的账户,可申请提现。 --- 渝农服农业产业互联网平台 - 技术架构方案 技术栈选型(建议) 层面 技术选型 说明 前端 微信小程序 + Uni-app 开发一套代码,可发布到微信、支付宝、H5等多个平台,降低成本。 后端 Java (Spring Boot) 或 Go (Gin) 适合复杂的业务逻辑和高并发场景,生态成熟,人才好找。 数据库 MySQL + Redis MySQL存储核心业务数据;Redis用作缓存(热点数据、会话)和消息队列。 图片/文件存储 腾讯云COS 或 阿里云OSS 专业、可靠、低成本的对象存储服务,无需自建服务器。 AI服务 百度飞桨PaddlePaddle 调用其现成的农作物病虫害识别API,快速实现功能,避免自研。 地图服务 腾讯地图LBS 用于土地位置选择、展示、附近服务网点查找等功能。 服务器部署 腾讯云 或 阿里云 采用云服务器(CVM)、负载均衡(SLB)、云数据库(CDB)等产品,保证稳定与弹性伸缩。 运维监控 Docker 实现环境标准化,简化部署。配合Prometheus+Grafana进行监控。 系统架构图 ``` [用户端] | | (HTTPS/WebSocket) v [负载均衡 (SLB/Nginx)] // 流量分发,保证高可用 | +------------------+------------------+ | | | v [Spring Boot/Go 应用服务器集群] // 处理核心业务逻辑 | | | +------------------+------------------+ | | | v [Redis Cluster] v [MySQL Cluster] // 缓存与核心数据存储 | | | v [腾讯云COS/AliOSS] // 存储图片、视频等静态资源 | v [第三方服务] | +-- 百度飞桨AI API +-- 腾讯地图API +-- 短信服务API +-- 支付API(微信支付/支付宝) ``` 数据库核心表设计(部分) · 用户表 (t_user): user_id, phone, user_type(农户、服务站、采购商), service_station_id(关联所属服务站) · 服务站表 (t_service_station): station_id, name, location, owner_user_id, status · 土地信息表 (t_land): land_id, title, area, location, images, status, publisher_id, auditor_station_id(审核的服务站) · 农资订单表 (t_order): order_id, user_id, total_amount, status, station_id(佣金归属站) · 佣金记录表 (t_commission): commission_id, order_id, station_id, amount, status ---
09-22
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值