Hed*_*din 6 agile wysiwyg frontend methodology reactjs
让我们假设我是一个不错的JS程序员.我可以轻松地做React.js开发.我也可以在某种程度上编写HTML和CSS.但是,我不能从头开始构建一个网页,即定义HTML结构(比如React组件或纯HTML),添加一些CSS并获得全闪亮的响应式现代外观花式网页.因此,我与一位设计师合作,他使用某种黑魔法(或者可能是WYSIWYG工具,或像wix.com这样的服务)来制作网页原型.
所以,我得到的是一堆html文件,图像,CSS样式,也许还有一些javascript.
现在我需要将所有这些转换为React的组件层次结构.我相信我能做到这一点,在工作完成后,我会从技术和美学的角度来看一个闪亮的新网站.但是,我们都知道我们在敏捷环境中工作.后来,设计师要我改变一些东西.他说,'添加黑色边框'.这里的事情失控了.我应该这样做(手动查找css中的样式并添加边框)？如果需要更改更复杂怎么办？喜欢交换页眉和页脚？他应该这样做吗？(再次重新生成那些源htmls/css/images)之后会发生什么？我应该对整个网站进行区分,以了解已经发生了哪些变化并重新实现整个组件结构以反映变化？是否有任何可接受的方法来解决这个邪恶的圈子？也许一个工具将输入丑陋的html代码映射到正确完成的React代码？或许我完全错了,我应该自己学习设计艺术？
编辑:好的,因为每个人都误解了这个问题,这里是较短的版本.如果Templater更改了React站点中已经实现的模板,除了手动区分和修补源css/html文件的所有更改之外,我该怎么办？
你听起来有点粗略.如果你想建立一个网站,你必须知道CSS和HTML,特别是维护它.设计师可能永远不会永远在你身边,你最终会陷入困境.
您描述的流程类型,设计人员创建所有结构并为您提供完整的html和css代码,仅适用于jQuery时代.您的脚本插件非常简单,并且不需要太多更改,因为它与实际的html分离,您可以使用dom ID进行定位.
它在Uber如何运作,但我确信在很多其他公司中,设计师负责设计,但就是这样,其余部分取决于你.你必须在他之后再做一次实际的实施.
由于复制可能非常困难和近似,您可以使用Invision,设计人员将在其中创建模型,但您作为开发人员可以获取元素的所有css属性,使集成更容易(如果wix具有同样的功能).
如果您的设计人员更新了设计的一部分,您就可以直接了解更改的内容以及需要更新的组件.这是拥有代码而不是从其他人那里获取代码的好处之一(特别是如果它是自动生成的).
通常，我会要求 Templater/HTML 将他们的工作放到 ReactComponents 中，为此我设置了一个简单的空 React Application，带有 Routes 定义，并使用它们，它肯定会为您节省大量时间，因为您可以应用一些逻辑并行或重新考虑应用程序的某些部分，并要求更改。
为了真正高效，他们应该首先创建一个纯组件库，其中每个组件及其样式都与应用程序的其余部分隔离，让他们将默认值放在里面，然后让他们使用 props，之后纯组件完成后，您可以使用容器和逻辑来编排您的应用程序。
当您从设计器/html 编码器仅获得平面 html 和 css 页面时，您提到的第一个流程就可以了。
如果您打算使用 React/Angular/Vue 等创建这些页面......
您不需要设计师提供任何 JavaScript。
您需要采取的步骤：
1) 从设计师处获取 html 和 css 2) 在纸上设计组件的块：页眉、导航栏、侧边栏、mainContent、页脚、PostsList、Post、CommentsList、Comment 等 3) 开始一一构建这些组件
*假设我们正在使用react
4）确保每个组件都是独立的，并且可扩展，以便将来轻松更新。5）确保你有测试！学习 TDD 6) 发布您的应用
下一个更新周期...
1) 您的设计器为您提供新设计的页面 2) 您可以使用设计器 html 和 css *部分并在代码中使用它们 3) 确保正确扩展组件或更新 4) 测试仍应正常工作
在开始深入研究所有工作之前，请注意以下几点：
但前面还有很多工作要做，所以祝你好运，这很有趣！:)
| 归档时间： |
|
| 查看次数： |
4006 次 |
| 最近记录： |