而我的工作方向主要在C端，心想C端有那么香吗？我估计当你做过C端后，你才知道B端是多么爽。 这个问题可以延伸下，如果你在选择一份工作时，你是选择C端方向还是B端呢？...知识面 C端更容易接触到大前端，因为C端渠道众多，所以涉及到的技术栈也很多，小程序、app、flutter、rn，但有个弊端就是web技术会明显减少，接触客户端的时间会更多，时间长了感觉自己都要脱离web...提效 C端提效方面主要是进行跨端复用，一套代码多端跑，发版上要依赖各种动态化方案，但鱼和熊掌不可兼得，提效和性能是永远也无法逃避的问题。...不过这里我个人觉得在跨端和提效上小程序是最佳选手，虽然社区生态差了点，但看在提效的份上，我忍了。 B端提效主要是组件库，低代码，使用搭建工具来解决某一个特定场景下的问题，来提高开发效率。...不过这里也有很多可以做的事儿，比如：如何提搞稳定性，就要做监控告警，有监控告警了就要减少误报，提高告警准确率，还有如何更快的定位问题，解决问题，处理问题时间短了，才能减少线上损失，这里我想到了阿里的三板斧
你有没有遇到过这种情况： 1、当想在app中增加一个功能时，不知道是提给客户端开发还是h5开发？ 2、当前端界面出现一些bug时，不知道是客户端的问题还是h5的问题？...3、当想让app和h5之间同步一些信息时，不知道是否能实现？ 如果你存在以上疑惑，那本文章正是你需要的，下面将讲解几种app的类型、app与h5的通信原理、如何区分页面用原生开发还是h5开发。...01 app的基本类型 app大致分为4种类型： 1、native app 定义：指的是本地化应用，纯原生开发的app，简称NA 优点：原生的UI体验比较好，点开app不需要网络请求就可以直接展示UI，...2）假如是js app，react native封装了2个系统共用的核心控件，当然如果想用安卓或者ios独有的控件也是可以的。可到react native官网查看支持的控件。...在混合型开发模式中，当产品经理提一个需求时，怎么知道是用native合适还是h5合适？native的用户体验比较好，不需要网络请求就可以直接展示出来。
这里附上这个项目的github地址: https://github.com/sanyuan0704/react-ssr 欢迎大家点star,提issue，一起进步！...二、实现React组件的服务端渲染 刚刚起的express服务返回的只是一个普通的html字符串，但我们讨论的是如何进行React的服务端渲染，那么怎么做呢？...part3: 同构项目中引入Redux 这一节主要是讲述Redux如何被引入到同构项目中以及其中需要注意的问题。 重新回顾一下redux的运作流程： ?...让我们来分析一下客户端和服务端的运行流程，当浏览器发送请求时，服务器接受到请求，这时候服务器和客户端的store都是空的，紧接着客户端执行componentDidMount生命周期中的函数，获取到数据并渲染到页面...当服务端拿到store并获取数据后，客户端的js代码又执行一遍，在客户端代码执行的时候又创建了一个空的store，两个store的数据不能同步。 那如何才能让这两个store的数据同步变化呢?
组内对于 React Native 的实践已经快一年了，我们组主要负责的是美团外卖 M 端的前端业务，涵盖了美团外卖的 CRM、供应链、合同和结算等系统，我们的用户主要是美团的 BD，也就是广大的地推团队...但是经过一段时间的时间后，发现这样带来的后果是当功能的粒度上如何做划分，是一个问题，有的功能模块比较大， 如果都放在一个里面就会造成过于臃肿的问题。...基础服务层 基础服务是独立于业务的，主要是负责升级和上线相关的事务。...React Native 的组件也分为两种 Native Modules: 主要是对原生功能的一些封装，不涉及到对 UI 的操作，例如 Cookie、Toast、设备信息等。...Code Push 热更新：这也是 React Native 具备的一个特点，当没有 Native 端代码的更新，只有 JavaScript 的更新的时候，可以通过热更新的方式进行，这里的热更新简单来说就是通过对本地的
解决了什么问题 服务端状态有以下特点： 存储在远端，本地无法直接控制 需要异步 API 来查询和更新 可能在不知情的情况下，被另一个请求方更改了数据，导致数据不同步 现有的状态管理库（如 Mobx、Redux...等)适用于管理客户端状态，但它们并不关心客户端是如何异步请求远端数据的，所以他们并不适合处理异步的、来自服务端的状态。...而 React Query 就是为了解决服务端状态带来的上述问题而出现的，除此之外它还带来了以下特性： 更方便地控制缓存 把对于相同数据的多个请求简化成一个 在后台更新过期数据 知道数据什么时候会「过期...query会自动把这些isLoading,isError请求中间态处理好，我们不必写重复逻辑，另外配合Suspense提对一点对于loading场景的处理,Suspense也支持的不错，特别是局部Loading...Query状态管理，但是有性能问题，其实本质还是利用Context透传，我们知道Context处理prop drilling问题，但是有性能问题，详情可查看这篇文章 精读《React — 5 Things
你可知道，我们这两年是如何过来的吗？！ 就在2024/04/25，我们可以通过npm install react@beta在本地安装React19了。...这允许用户在不必等待整个页面在服务器端渲染完成的情况下,更早地看到页面的某些部分。 如何使用服务器组件 ❝默认情况下，React 中的所有组件都是客户端组件。...在 React 19 中，我们使用 useMemo、forwardRef、useEffect 和 useContext 的方式将会改变。这主要是因为将引入一个新的 hook，即 use。...针对，其内部是如何实现的，我们后期会有专门的文章来介绍，这里就不在过多解释了。 useFormStatus() hook 在 React19 中，我们还有新的 hooks 来处理表单状态和数据。...当我们想要知道表单提交的状态并相应地显示数据时，它会很有用。 useFormState() hook React19 中的另一个新 hook 是 useFormState。
基于我之前了解的一点点ssr 原理就直开干，在实现的过程中的坑还真不少，但是也没有什么太难得东西，主要是我采用的是 react router5 ，对这个新版的路由使用不太熟悉，又和 react router3...: 访问过的路由中的 state 可按需设置本地缓存,页面二次访问可无接口请求 开放: 代码完全开放，纯白盒，完全可以作为个人的 ssr 学习参考资源 快速开始 如何让krs 在你的机器上快速的跑起来？...this.hasSpaCacheData){// 页面如果是客户端的需要重新获取数据 Index.getInitialProps(this.props.krsOpt).then(...生产环境构建 npm run build 然后可以本地模拟查看：npm run build:start 生产环境部署 这个很简单，只需要运行 根目录的 app.js 即可 pm2 start app.js...krs 做到了现在，基本的功能已完成，但是仍然可能存在一些问题和待改善的空间，所以我会长期的进行维护和更新这个项目。 看到的小伙伴如果有兴趣可以帮助一起改进，提建议。
服务器在需求评审后，客户端开发第一周前，提供接口文档。 客户端开发周期为两周，客户端开发第5个自然日API提测，客户端开发第5天发迭代提测包，第二周结束发提测包。...例如统一版本排期的时间表、确定项目中各个角色的交付时间，让PM、UI、客户端RD、服务端RD和QA，各角色都能够清晰的知道自己接入的时间点，并在规定的时间点交付内容。...外卖动态化能力建设的思路主要是：核心流程页面区域动态化，区域动态化方案采用外卖自研的Mach动态化框架，核心流程采用区域动态化，保证页面的稳定性及用户体验，非核心流程页面MRN化（Meituan React...具体技术细节可参考《React Native在美团外卖客户端的实践》一文。 目前外卖低PV的MRN页面数量已达：56/67。...这个环节是个人行为和整体交付产生对接的环节。在这个环节我们要确保个人的行为不影响整体的流水线的进行。如何保障，我们采用的手段主要是本地检查+CI检查+集成测试。
本项目实现的功能有： 用户登录 用户注册 单人聊天 多人聊天 表情发送 文件传输 发送语音 视频通话 本项目采用的技术有： React & Antd 开发前端界面 Electron...，用户注册登录 如何测试本项目 本项目测试所需要的条件根据不同的功能有所不同，主要是因为局域网中视频通话需要使用https，下面进行简单的说明，不保证按照本说明便可以正常运行该项目 简单测试，请直接运行安装包...=https://{ip}:3001，使用上面一样的命令运行客户端 在第二台设备中打开网页https://{ip}:3000(之前界面不要关闭，因为自己签发的https证书不受信任，关闭之后可能不能连接到服务端...)，然后登录进去；本地亦是如此 进入客户端或者服务端界面的时候都有可能出现下面的情况，请选择advanced中的continue 建议在本地端发送数据给第二台设备(视频不太稳定)...演示效果 简单讲解： 作为一个聊天程序，用户之间需要进行聊天，一个是写死对方的地址，然后直接发送消息，另一个就是通过第三方进行消息的中转，我们只需要知道服务端的地址即可，当然，我们也可以通过服务端知道了对方的地址
随着React-Native的火爆，以及Native和Web开发本身的一些痛点，近期团队考虑将iOS App中部分界面迁移到React-Native上，本文主要谈谈开发过程中遇到的一些问题及解决方案。...，基于以下几点： 图片在本地，加载速度快 替换本地图片即可完成更新 同时，带来了另一个问题：JS中引用图片时，实际只知道图片相对于JS的路径，最终应用安装到哪个路径下是不知道的。...，将相关资源打入安装包，请求响应快，更新依赖客户端。...，解压到本地，下次访问时，即可访问最新的代码。...接口扩展 JS-OC之间的通讯机制，这里已经写的很清楚了，主要是双方保存了同样一份模块注册表。
，基于以下几点： 图片在本地，加载速度快 替换本地图片即可完成更新 同时，带来了另一个问题：JS中引用图片时，实际只知道图片相对于JS的路径，最终应用安装到哪个路径下是不知道的。...，将相关资源打入安装包，请求响应快，更新依赖客户端。...，解压到本地，下次访问时，即可访问最新的代码。...接口扩展 JS-OC之间的通讯机制，这里已经写的很清楚了，主要是双方保存了同样一份模块注册表。...从目前的Css代码迁移到React-Native，感觉有很多适配工作。 最后 9月会跟着iOS的版本，带一部分React-Native的代码到外网，搜集到数据后，后面会在iOS慢慢铺开使用。
我记得不知道什么时候曾听人说过，新技术要想克服用户社区转换的惰性，必须比现有技术好上 10 倍才行。...2 轻装上阵：Svelte 带来的代码精简与效率提升 虽然 React 相比很多前辈技术有所进步，但它仍然需要编写相当多的样板代码（哪怕是不使用 Redux 的情况下，我们也知道要避开它）。...顺便提一下，最近我看了一个演讲，其中一位开发者认为他有一个 “绝妙” 的想法，即在 onMount 处理程序中渲染内容以加快服务器端渲染的速度。听到这种将计算推送到客户端的做法，我只能摇头叹息。...更值得一提的是，Svelte 5 的一些新语法与 React 更为相似，因此如果你正在从 React 迁移，Svelte 5 会比 Svelte 4 更容易上手。...，无论你如何自我安慰。
第三是业务工程的配置比较冗长，带来的问题是工程配置比较耗时，很多时候存量系统不敢升级，因为不知道这么长的配置加了一些东西，是否会出现比较严重的后果。...整体流程：首先是启动，通过Vite，比如createServer拉起页面，抹平Webpack差异；环境变量的抹平，保证客户端Webpack存量项目，将Webpack客户端的环境变量注入到Vite端；对配置文件...common.js的模块如何指向对应的esmodule目录等，最后我们会屏蔽一些认知成本，把Vue、React和公司依赖包内置到Vite预编译内容中。...| 3.2 提效率 提效率的一个例子是“一分钟内部署”，这里主要解决我们高频的测试环境部署流程冗长问题。...，单纯做单点的工程优化（如本地构建优化）效果不一定好，可能到后来只是在卷几秒的差异。
参考的资料和使用的工具 做这次实践阅读了不少文章，文章提到过的内容我这里就不再赘述了，后文主要是做补充。...它有2个分支，一个是react分支，目前只是提供纯前端的boilerplate。另一个是react-isomorphic，同时包括前端和后台的boilerplate。有什么问题可以给我提issue。...，请记得将store也吐一份到标签里，因为客户端的js中也需要用到。...事件挂载 后台渲染完后，给客户端吐出html字符串，这时还没有任何事件的绑定，需要客户端的代码进行事件挂载，这里需要注意2点： 保持dom结构一致 否则会报错或者触发重新渲染 将部份事件放到componentDitMount.../node_modules/, }, { test: /\.css$/, loader: "ignore-loader", // ignore-loader对css/scss输出空内容
相对于发送HTML，服务器现在发送的是 data，并且在客户端上发生“data到HTML”的转换步骤（这就是为什么还要同时发送代码告诉客户端如何执行所述的转换操作）。 这里有很多含义。...另一方面，如果您正在构建一个纯静态网站（如博客）， 在服务器生成最终的 HTML 是完全没问题的。 真相是，大多数的 web apps 都裁倒在了服务器与客户端中间，问题是要知道裁在哪儿。...Redux 不仅能汇聚你的数据，同时也能对操作数据强制执行一些准则。 ? 假设 Redux 是一间银行：你不能去你的本地分行然后直接手动修改你的存款余额（“来，我可以给你在后面加上几个零”）。...再提一下，你还是可以跟 Wes 一起学习他的 Redux 课程，都是免费的！ 或者，你可以看 Redux 作者 Dan Abramov 在 egghead.io 的视频，也是免费的！...即使我们没有踏进整个 Node 的生态，但处理任何一个 web app 都很重要的一点就是：数据是如何从服务端到客户端的。
前言 我们都知道, Vue和React是构建客户端应用程序的框架。...默认情况下，可以在浏览器中输出自定义组件，进行生成 DOM 和操作 DOM, 也就是我们常说的客户端渲染, 并且我们大部分主流的场景都是SPA(单页面)应用, 而随着 SPA尤其是 React、Vue、...对于服务端渲染的页面，服务端可以直接将带数据的内容通过 HTML 文本的形式返回，搜索引擎爬虫可以轻易的获取页面内容，而对于客户端渲染的应用，客户端必须执行服务器返回的 Javascript 才能得到正确的网页内容...其原理主要是通过使用 Headless Chrome 在内存中执行 Javascript，并在得到完整内容后，将内容返回给客户端。...cli来启动服务了,我们只需要在命令行执行如下命令: rendertron 之后控制台会打印本地服务启动的地址,比如localhost:3000 这个时候我们只需要在地址后面输入我们想渲染的网站即可:localhost
总结 本场分享主要是美团首页在native端的开发提效，先对现有业务痛点进行分析，并提出理想流程，设定目标，最终形成统一的解决方案，我理解最核心的是解决了的产研的配合效率低下(开发流程排除了客户端开发人员...，做到了一次开发模版，多次复用的能力，既提升了产研的沟通效率，也减少了客户端的重复开发，最终达到工程提效的目的。...描述跨端模版 上一章节讲的是原子化项目创建流程，本节主要讲解如何描述生成的卡片以及生成的卡片如何适配跨端。...客户端：统一规范、发布 服务端：存储、分析、消费接口 前台：使用文档、展示使用数据以及运营能力 如何使用 还是逃脱不开JSON描述，前端组件能力服务化，可以通过拷贝粘贴、NPM或者JSON的形式，现阶段也只有选择...React，原因如下 从四个方面选择React，分别是社区生态、应用规模、设计演进以及技术趋势 使用react的数量，增长势头也比其他框架语言增速更快 React的问题，是一个基于视图层的框架，并不是一个应用框架
小伙伴们，是时候开始 React Query 之旅了。你还不知道这个库吗？完美，你来对地方了 介绍 React Query 是什么？...它是一个针对 React 应用的状态管理器，可以简化许多任务，例如处理 HTTP 请求状态、在客户端保存数据以防止多次请求、使用 hooks 共享数据等等。...通过该关键字，React Query 能够存储结果并在应用程序的不同部分中使用它。该关键字用于标识查询，你还可以使用 React Query 客户端通过代码重置查询或更改值。...Dev tool 接下来，你将学习如何调试和检查 React Query 应用程序中发生的一切。...React Query 团队知道这一点，并决定构建一个工具来帮助那些想要使用 React Query 进行工作的开发者。
Q1 你的技术栈主要是react，那你说说你用react有什么坑点？ 1、JSX做表达式判断时候，需要强转为boolean类型，如： ? 如果不使用 !!b 进行强转数据类型，会在页面里面输出 0。...对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。...描述二叉树的几种遍历方式？ 先序遍历：若二叉树非空，访问根结点，遍历左子树，遍历右子树。 中序遍历：若二叉树非空，遍历左子树；访问根结点；遍历右子树。...redux有action、reducer的概念，action为唯一修改state的来源，reducer为唯一确定state如何变化的入口，这使得redux的数据流非常规范，同时也暴露出了redux代码的复杂...DNS解析得到实际IP，然后缓存服务器会向实际IP地址请求资源，缓存服务器得到资源后进行本地保存和返回给浏览器客户端。
如何通过技术手段，在有限的客户端人力资源下，支持更多的业务需求，解决有限的研发资源跟不断变大的业务需求量之间的矛盾呢？...当有一个新的页面产生时，我们应该如何做取舍？...开发阶段 客户端以周维度进行开发，每周确定下周可提测的内容，根据提测内容是否为动态化的业务、下周是否在版本迭代周期内，决定跟版发布或周发布。...如何在资源有限的情况下不断提升开发效率是一个永恒的话题。美团外卖客户端通过借助美团基建MRN，推动混合式架构来提升效率。...iOS 开发是否要采用 React Native 开源React Native组件库beeshell 2.0发布 ESLint 在中大型团队的应用实践 CAT 3.0 开源发布，支持多语言客户端及多项性能提升
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
