精华内容
下载资源
问答
  • 低码
    千次阅读 多人点赞
    2022-06-13 09:53:07


    上周在交流群里和一位低码厂商的技术负责人交流,他认为低代码作为开发工具类的产品,需要有从0到1体系化的教程才可以,而且还得有教师进行辅助。否则,学习低代码是有难度的,入门很难。

    对于技术负责人的见解,我也深有体会。因为大家习惯了用代码编程,一下子过度到可视化编程,有一个思路上的转变。我们使用代码编程的时候,前端是写标签,后端是写if/else、for循环来执行逻辑处理。

    那低代码如何体系化的学习呢?这里我们按照代码方式学习做个对照。

    1 搭建开发工具

    一般如果我们使用微信开发者工具,开发小程序需要安装工具。低码工具不需要安装,是在线进行编程。但和开发者工具一样,低码也是需要绑定小程序的。我们在开发者工具里一般是需要配置自己小程序的appid,如果使用了云开发的,还需要开通云开发。

    我们使用低码开发需要在小程序认证那块,绑定自己的小程序。
    在这里插入图片描述
    我这里一个绑定成功了,一个绑定失败了。失败的原因是小程序和我们的低码账号不是同主体,意思是必须以你自己的微信号申请,不能绑定别人的小程序。

    2 创建项目

    我们使用微信开发者工具,打开工具的时候就要求创建项目,所谓的创建项目是在你本地新建一个文件夹,然后按照小程序项目的要求生成对应的目录结构。比如有js、json、wxml、wxss等。

    低码中我们讲的创建项目是指创建应用,一个应用就相当于一个项目。不同于小程序,低码的外延更广,可以创建PC端的项目,也可以创建移动端的项目。移动端的项目不仅可以创建小程序,也可以创建H5。

    而且比小程序方便的是,低码是可以根据模板创建项目的。所谓的模板是指事先已经开发好的项目,就像我们从github上clone一样。当你clone完毕后整个工程的源代码就都下载到了本地。低码中依据模板新建是将做好的项目安装到你自己的空间里。这样你就有了一套成熟的模板,可以在此基础上进行修改。这样做无疑大大的提高了开发效率。

    在这里插入图片描述
    在这里插入图片描述

    3 功能开发

    微信小程序独创了一套语法,分别是wxjs、wxml、wxss。如果我们希望开发难免增加了不少难度,因为又得单独学习一套语法。低码的话组件是使用的react,低码编辑器里是用的javascript。后台方法是用的云函数,学习nodejs即可。总体你只要学会了Js开发低码应用是没啥问题的。

    低码中也有页面的概念,但是是可视化创建的。
    在这里插入图片描述
    页面开发的时候完全是可视化的拖拽,并不需要学习啥语法知识
    在这里插入图片描述
    如果需要给组件设置事件的,可以使用平台方法,也可以使用自定义方法
    在这里插入图片描述
    自定义方法是按照Js语法进行编程

    export default {
      async onAppLaunch(launchOpts) {
        //console.log('---------> LifeCycle onAppLaunch', launchOpts)
        const { OPENID, FROM_OPENID } = await app.utils.getWXContext()
        let userId = FROM_OPENID || OPENID
        if (!userId) {
          const { wedaId } = await app.cloud.getUserInfo()
          userId = wedaId
        }
        app.dataset.state.openid = userId
        console.log(app.dataset.state.openid)
        const result = await app.cloud.callModel({
          name: 'user_h4la7ee',
          methodName: 'wedaGetRecords',
          params: {
            "where": [
              {
                "key": "openid",
                "rel": "eq",
                "val": app.dataset.state.openid
              }
            ]
          }, // 方法入参
        });
        console.log(result.total)
        if(result.total ===1){
          app.dataset.state.islogin = true
          app.dataset.state.imageUrl = result.records[0].imageUrl
          app.dataset.state.nickName = result.records[0].nickName
        }
        console.log(app.dataset.state.islogin,app.dataset.state.imageUrl,app.dataset.state.nickName)
        const adminresult = await app.cloud.callModel({
          name: 'admin_qohkmr5',
          methodName: 'wedaGetRecords',
          params: {
            "where": [
              {
                "key": "openid",
                "rel": "eq",
                "val": app.dataset.state.openid
              }
            ]
          }, // 方法入参
        });
        console.log(app.dataset.state.openid)
        console.log(adminresult)
        if(adminresult.total===1){
          app.dataset.state.isadmin = true
        }
        console.log("isadmin",app.dataset.state.isadmin)
      },
      onAppShow(appShowOpts) {
        //console.log('---------> LifeCycle onAppShow', appShowOpts)
      },
      onAppHide() {
        //console.log('---------> LifeCycle onAppHide')
      },
      onAppError(options) {
        //console.log('---------> LifeCycle onAppError', options)
      },
      onAppPageNotFound(options) {
        //console.log('---------> LifeCycle onAppPageNotFound', options)
      },
      onAppUnhandledRejection(options) {
        //console.log('---------> LifeCycle onAppUnhandledRejection', options)
      }
    }
    

    4 后端实现

    小程序一般只能解决前端交互的功能,后端你必须自己开发功能,安装到服务器上还需要暴露接口。但是一般我们的后台服务都是需要鉴权的,不可能像网站一样公开使用。低代码提供了后端的云函数,直接使用就可以。如果官方提供的不满足要求,还可以自己编写代码
    在这里插入图片描述
    在这里插入图片描述

    /**
    * 使用 npm 包 request 发送http请求, 详细使用文档可以参考
    *  https://github.com/request/request#readme
    */
    const cloud = require('wx-server-sdk')
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV,
    })
    
    module.exports =async function (params, context) {
      // params 即为入参定义的结构, 可以在 request 的请求配置中使用 params
      try {
        console.log("cloud",params.templateid)
        const result = await cloud.openapi.subscribeMessage.send({
            "touser": params.openid,
            "page": 'my',
            "lang": 'zh_CN',
            "data": {
              "thing2": {
                "value": params.thing2
              },
              "date3": {
                "value": params.date3
              }
            },
            "templateId": params.templateId,
            "miniprogramState": 'trial'
          })
    
        console.log("result",result)
        return result
      } catch (err) {
        return err
      }
    };
    
    

    5 大龄人员想入门编程,年龄是个问题么

    有些人可能随着年龄的增长,一个是希望学个技能,另外也是看到IT行业薪水比较高,希望学习编程。问年龄是学习编程的限制条件么?如果只是兴趣,我还是建议你学习低码,因为工具解决了编程的门槛问题,也可以快速开发出应用来。如果是希望就业,其实低码也是一个不错的入门方向,毕竟老板们只是提出需求,你提供给他一套可用的软件即可。至于你是用拖拽开发,还是手写代码,老板是不太关心的。将来自己在某个行业积淀够了,养活自己不是太大的问题。

    总结

    我们今天用了一定的篇幅概要的介绍了一下使用低码是如何从0到1构建应用的。当然就像我开篇讲的,如果想要熟练开发出应用,找一套体系化的教程,外加老师的辅助还是有必要的。那些想跨行业进入软件开发领域的,不防尝试一下低码的解决方案,希望能给你带来不一样的体验。

    更多相关内容
  • 视频低码流控制技术探讨,可拥有不同的场景,把码流控制得很低。
  • 低码系列文章 #低码系列#低代码来了,程序员会失业吗? 整体设计 用户群体 对于基础功能的实现,不需要开发人员介入。业务人员通过可视化页面,即可完成设计。从这个角度上看,低码平台面向的用户是业务人员、系统...

    低码系列文章

    1. #低码系列#低代码来了,程序员会失业吗?

    整体设计

    用户群体

    对于基础功能的实现,不需要开发人员介入。业务人员通过可视化页面,即可完成设计。从这个角度上看,低码平台面向的用户是业务人员、系统管理员、实施顾问等角色。

    但是,是否具备持续的产品迭代能力,是衡量产品生命力的主要依据。产品能否与时俱进,能否满足逐渐复杂的用户需求,也是判断产品是否有竞争力的主要指标。低码平台要能够支持复杂的逻辑处理,支持开发人员的参与。这要求从这个角度上看,低码平台面向的用户是程序员、设计师等角色。

    主要目标

    低码平台相比传统开发模式,大部分的需求可以通过低码平台的可视化页面实现。无需开发人员介入,具备更高的开发效率和更低的开发门槛。应用发布也更快速,支持在线编译、打包、发布。

    1. 节省时间: 几乎所有人都可以开发应用,而无需等待开发团队来开发。
    2. 提升效率: 优化系统开发流程,提升软件开发效率
    3. 降低门槛: 通过可视化建模技术完成数据结构、流程、逻辑的定义与前端页面的搭建
    4. 快速响应: 维护升级方便,即改即用,快速响应业务变化与调整

    系统架构

    基于最先进的云原生技术搭建,整合了Kubernetes、微服务、Serverless、NoSQL 等最先进的技术架构,并提供了完善的自动化开发测试工具与运维管理工具。

    组成部分

    低码平台主要由以下几个部分组成:

    1. 基础设施: 提供公共的服务组件,实现常规通用的需求。如:系统配置、统一认证、日志处理,消息队列、缓存管理等。
    2. 可视化管理:基于元数据的业务建模,应用的流程设计,以及开发完应用的在线编译、部署,都需要通过页面的可视化来实现。
    3. 核心引擎: 抽象业务需求,满足具体应用设计,提供统一规范的应用引擎,是低码平台的核心。核心引擎主要包括:建模引擎、表单引擎、流程引擎、报表引擎、API引擎、代码引擎等。

    建模引擎

    基于模型驱动,内置功能强大的建模引擎,零代码也能快速创建智能化、移动化的企业应用程序。

    通过实体、数据结构、枚举等构建低代码数据模型。可视化定义数据之间的关联关系,平台自动生成数据库表和通用接口。

    表单引擎

    基于模板创建页面或在空白页面上通过拖、拉、拽组件的方式完成页面搭建。平台提供标准化组件,以及组件扩展能力,可维护自有组件库。

    流程引擎

    涵盖了流程设计、流程运行、管理维护、统计分析与流程优化等各类工具,帮助企业快速部署、有效监控并持续优化业务流程。

    低代码平台集成流程引擎,支持BPMN2.0规范的业务流程开发,并在此基础上进行了模型和符号标准化。
    可支持常规流程的快速开发,如请假、入职、离职等企业内常用流程。

    报表引擎

    无需开发人员帮助,业务人员也能配置出功能强大的统计报表。报表运行时自动按当前用户权限过滤报表数据,动态显示业务统计结果。

    可通过拖拽组件的方式实现折线图、柱状图、饼状图、散点图等。
    也可在有数BI产品上完成从数据到模型再到报表的设计,低代码可以直接将生成的复杂报表集成到应用中。

    API 引擎

    基于业务模型,动态生成业务数据的API接口。可以在第三方应用、小程序、手机端中调用。

    企业存量接口可通过低代码平台快速导入,并自动接入API网关。提供可视化定义接口能力,并将接口自动接入API网关。

    代码引擎

    可以使用传统方式编写代码,并可与可视化设计界面双向同步。对于可视化界面不能实现的业务功能,均可通过传统方式编写前后端代码实现。

    作者:在代码的世界里自由自在
    链接:https://blog.codeiy.com
    来源:微信公众号-在代码的世界里自由自在

    展开全文
  • 2022年1月5日,由云畅科技联合腾讯云启创新中心(湘潭)、湘潭大学数学与计算科学学院组织的腾讯万应低码实训营(湘潭大学专场)顺利开展内部作品评比并举行结业典礼及颁奖仪式,由实训营学员耗时1天完成搭建、上线...

    云畅科技

    2022年1月5日,由云畅科技联合腾讯云启创新中心(湘潭)、湘潭大学数学与计算科学学院组织的腾讯万应低码实训营(湘潭大学专场)顺利开展内部作品评比并举行结业典礼及颁奖仪式,由实训营学员耗时1天完成搭建、上线的“线上社团生活”获得全场最高分,至此,本期实训营圆满结营。

     

     

    湘潭大学数学与计算科学学院副院长刘红良、数学与应用数学系主任张娟、统计系主任韩国胜,腾讯云启创新中心(湘潭)总经理蔡智源,湖南云畅网络科技有限公司交付中心副总监胡杰出席活动现场。 

    校企合作再深化,产教融合绘新篇

    自2021年1月4日,湘潭高新技术产业开发区管理委员会、腾讯云计算(长沙)有限责任公司与云畅科技共同合作共建腾讯云启创新中心(湘潭)项目以来,云畅科技充分发挥自身技术优势及运营经验,基于「万应工场」深入开展校企合作、逐步推进产教融合,积极赋能地方数字经济发展、软件人才培养及产业数字化转型升级。

    此前,由云畅科技联合腾讯云启创新中心(湘潭)、湘潭大学数学与计算科学学院共同举办的“探索低代码开发新时代”主题讲座活动,聚焦数字时代与低代码的发展,结合万应工场低代码平台的运用实践和案例分享,校企专家、师生齐聚一堂,共同探讨如何用低代码创新技术落地应用、推动本地产教融合和产学研合作,得到了与会人员的一致好评,增进了大家对数字时代、低代码以及万应工场能力的认识和了解,激发了大家对于涌入数字经济热潮以及运用低代码平台进行应用开发的热情。本期实训营于2021年12月29日正式开营,是继三方成功召开“探索低代码开发新时代”主题讲座后实践产教融合、推进协同育人的进一步深化和探索。

     拒绝“纸上谈兵”,探索未来学习新模式

    聚焦项目化学习,培养案例实战搭建能力是万应实训营的一大特色。本期实训营活动一经推出,即收到了大量同学的报名信息,最终,来自湘潭大学数学与计算科学学院应用数学、统计学、大数据、数学类韶峰班专业的73名同学成为本期实训营学员,在讲师们的指导下,实操并掌握了用万应工场进行软件交付。

    在课程设置上,本期实训营课程兼顾理论及实践,设置了包含“万应低码平台功能讲解”、“企业级案例分析与搭建”、“指定课题搭建”、“实训营毕业讲演”等丰富课程,让同学们在实践之余,对低代码的产品价值能有更真切的实际感知,同时用寓教于乐的方式,助力培养、提升学员的产品思维和用万应工场进行产品开发搭建的交付能力。

     

    敏捷实现软件交付,学员作品大放异彩 

    课上,同学们参与了多个真实的企业级软件交付案例实践和数字化场景解决方案构建,1月5日,本期实训营正式展开内部作品评比。

    在经历仅1天的紧张搭建与上线工作后,实训营学员在会上按项目小组顺序依次对交付成果进行演示及功能解说,涌现出了如“二手拍卖平台”、“帮帮忙”、“多样兼职”、“线上社团生活”、“课堂小助手”等优秀创意作品。 

     

    图为学员搭建的小程序界面 

    通过一番紧张角逐和评委现场评分、商讨,最终,“线上社团生活”项目小组获全场最高分,获评“腾讯万应低码最佳搭建小组”。

    会后,腾讯云启创新中心(湘潭)总经理蔡智源、湖南云畅网络科技有限公司交付中心副总监胡杰在结业典礼暨颁奖仪式上,为优秀小组及优秀个人颁发了证书及奖品。

    学员受益良多,课程获赞无数 

    经过5天的理论学习与实践操作,实训营共70名同学顺利通过结业测试并获得相关证书。来自湘潭大学2018级数学与应用数学2班的伍珏同学在体验用万应工场进行软件交付后,感触良多:“在体验了用万应工场进行软件开发和交付后,我深刻感受到了低代码工具提速增效的产品价值,它的确能帮助我们节约很多时间。很开心能有机会参与这次实训营,让我体验了产品经理的完整工作流程、了解了产品搭建的整套工序,我学到了很多。”。

    本次实训营活动得到了湘潭大学数学与计算科学学院领导的高度重视和大力支持,并获得了充分认可,“万应低码实训的课程模式十分创新、独特,它运用低代码技术,聚焦于复合型的软件人才培养,不仅着眼于学生个人的未来发展需要,也是立足于当前时代发展的需要,对学生在未来学业、就业等方面的能力培养、竞争力提升都有明显帮助。”。

    腾讯云启创新中心(湘潭)始终高度重视地方软件人才培养,未来,腾讯云启创新中心(湘潭)将与更多高校合作,推动软件人才培养与产业数字化转型升级相适应,完善紧密对接产业链、创新链的万应低代码培养体系,使人才培养与产业发展共生。云畅科技也将以校企合作为契机,进一步优化校企共建、共育、共享等人才培养模式,为最终实现企业、学校、学生三方的互利共赢而不懈努力。

    展开全文
  • 开源 | 携程 Foxpage 前端代码框架

    万次阅读 2022-02-25 00:01:56
    作者简介Jason Wang,携程研发经理,目前主要负责代码类产品的设计和研发,关注代码行业的发展及相关解决方案在企业内部的落地。一、背景随着代码开发方式被越来越多的人接受和认可,...

    作者简介

     

    Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地。

    一、背景

    随着低代码开发方式被越来越多的人接受和认可,低代码得到了蓬勃发展,更被寄希望成为 IT 行业革命性的“新生产力”。据报道,全球低代码类产品市场规模在 2021 年超百亿美元,预计 2023 年将突破两百亿美元关口。


    1.1 低代码行业现状

    国外:Salesforece,Microsoft,OutSystems,Mendix 等,是处于领导者地位的资深玩家,产品功能强大,流程完善,生态健全。

    国内: 钉钉宜搭,明道云,织信,奥哲,简道云等,大都结合某个场景提供支持方案,还处于发展阶段。

    还有些玩家在企业内部发展,并未公开。各类玩家各有优势,关注的方向也各有差异。有的是结合某个行业定制,有的是结合单个使用场景深耕,还有的执着于提供应用开发的完整低代码方案。大部分是 SaaS 产品,其中部分会有私有化部署方案。


    1.2 暗藏的隐患

    按理说,市场上低代码产品功能已经足够强大,企业内部还在自研,甚至同一个业务线的不同使用场景或不同的技术栈也都有不同的低码类实现方案。据说某大厂内部的低代码类系统或工具高达上百个。

    其实这些系统或工具前端部分的核心功能和能力大体是相似的,就拿前端可视化页面搭建这部分来讲,从技术上看大家最终的实现方案和体验上都趋于相近或相同,自研的整个过程会有大量的重复性的工作,造成了人力资源的浪费。

    为什么会造成这样的局面?大家的本意是想借助低代码方案解决业务问题,但却发现行业基建太差,借助成品的方案也难以落地。只能一遍遍重复着低代码的基础能力和设施的建设,乐此不疲也无奈地重复造轮子。


    1.3 低码通用能力建设

    基于此我们做了一些调研,整理了市面上成熟产品可能存在的问题:

    • 功能臃肿,系统复杂,对接入和二次开发成本都较高

    • 不够开放,定制化程度高,部分的产品还有技术栈的约束

    • 场景支持单一,扩展较难,对一些碎片化的场景支持不友好

    既然大而全的低码产品不能用,那就给个小而美的低码框架吧。

    为了能让前端项目快速且低成本的体验到低代码带来的便利,带着市面上成熟的产品的问题,我们决定从建设前端低代码开发平台的角度去研发一套前端低代码框架,提供前端低代码类产品的通用部分能力,帮助开发者解决重复开发,重复建设的问题。

    同时也设立了一些需要完成的目标:

    • 有多场景,多端,多技术栈的支持能力

    • 产出多个场景下前端组件化的最佳实践

    • 提供前端低代码开发所需要的基础能力和设施

    • 打造一套围绕着前端低代码开发的工程化体系


    二、Foxpage 是什么?

    Foxpage 是一个轻量级的前端低代码框架,借助 Foxpage 可以让前端项目用低代码的方式进行迭代。Foxpage 重点在前端,关注前端页面的整个生命周期,希望成为一个易用,灵活,开放且百搭的开源框架。

    特性

    • 可视化,提供在线的可视化的前端页面搭建,所见即所得

    • 组件化,提供较为完善的组件制作流程和组件化方案,制作页面先从制作组件开始

    • 可扩展,提供多端,多技术栈及多种场景的支持

    • 国际化,提供一套国际化内容管理方案

    • 平台化,给开发者、编辑、运营等提供了一个在线合作的平台

    国际化和平台化为以后建设通用的前端低代码开发平台提供了基础。


    三、架构


    3.1 整体架构

    整个框架包含 Foxpage Admin,Foxpage API,Foxpage SDK,组件库等部分,下图描述了框架各模块及它们之间的关系。

    75d38c768173e0de3126cc4f44861524.png

    • Foxpage Admin :Foxpage 的管理后台,提供组织,应用,项目,页面&模板等管理功能

    • Foxpage API:Foxpage Restful API 主要用于为 Foxpage SDK 及 Foxpage Admin 提供的接口服务,开发者也可以使用其开发其他功能

    • Foxpage SDK :目前版本只提供了 Node SDK 及 JS SDK 用于 Node 端和浏览器端应用接入

    3.2 Node SDK 架构

    Node SDK 是提供给 node 端应用使用的开发工具包,通过 SDK 开发者能够快速接入和使用 Foxpage 框架。

    1767fdf8942eb2649fa38c54ecce0cde.png

    除了上面的介绍,Foxpage 整个项目还有 Foxpage CLI、Foxpage Debugger 及组件部分相关的介绍,有兴趣的同学可以前往官方文档查看。


    3.3 核芯设计

    Foxpage 核心部分是围绕着 Foxpage 需要提供支持多场景,多端,多技术栈的能力来设计的,可以算是对低代码开发实践的沉淀。

    72040af36f77b05e9e87c382435e369b.png


    DSL(Domain Specific Language)

    DSL 译为领域特定语言,作用是通过在表达能力上做的妥协来换取在某一特定领域的高效的。最常见的 DSL 有 Html,CSS,SQL,Regex 等。

    为了各类内容编辑高效性和一致性,我们基于 JSON 设计了一套 Foxpage 的 DSL,主要用作描述页面和组件等内容。再结合自身需求做了一些扩展,如为了加强 DSL 的动态能力加入了 “变量”,“条件” 等描述。特定的语法和语义需要提供对应的解析器,结合不同的应用场景提供定制功能,再针对具体的端提供对应 SDK 实现供应用接入。

    页面 DSL 的片段

    520d95c7ef09e56534b41406a563ea22.png

    上图 DSL 中描述了一个横幅组件,包含资源,属性,事件,条件渲染等信息,当然完整的页面描述还包含模板,页面,资源详情等描述。为了减少 DSL 的冗余,我们对公共部分做了最大程度的提取和复用。同时为了防止单份 DSL 内容过大,还支持了 DSL 模块化设计。运行时在 DSL 解析时会做合并,补全等操作。

    无头 CMS(Headless CMS)

    无头 CMS 与传统的 CMS 相比,不同之处在于其将内容和展示分离,达到“前后端分离”的目的,这样可以和前端的技术栈解耦,增强扩展性。

    这里主要提供了各类内容的定义、管理、存储和分发等功能,其实就是管理着各类 DSL 数据,视为框架的基建部分。参照文件系统的设计,提供了文件夹和文件等基础的功能。并可自由的新增文件类型,让整个系统变得更自由,更易扩展。同时还提供了 Restful API 方便了各端可以自由的获取到托管的内容,也使得各接入端拥有了动态更新能力。

    ca2e2ac919e9931eb0e116e9d3078117.png

    这样的设计也为前端项目想离线的使用 Foxpage 框架提供了基础,后续 Foxpage 也会为应用提供离线使用方案,使得整个框架变得更灵活。


    解释器(Interpreter)

    这里解释器的作用,是在应用的运行过程中去读懂并理解 DSL 然后再做对应的执行。广义上来说解释器主要包含资源管理器,DSL 解析器,渲染引擎三个部分

    可以简单看下解释器在 H5 页面渲染过程中所做的工作:

    131e186cb1480ee3fbf19b33415fe4ad.png

    这种解释执行的方式会带来一定的性能损耗,但是和它带来的高扩展能力和动态能力来比还是可以接受的。整个低代码的开发方式,本身也是牺牲一定的灵活性来换取开发效率的提升的,这要看怎么平衡和取舍。


    3.4 如何工作?

    举个邮件页面渲染服务(SSR API 以下简称 API)的例子来说明下工作过程。

    首先 API 项目需要接入 Foxpage Node SDK(以下简称 SDK)。当用户请求 API 获取邮件页面 HTML 文档时,SDK 会请求 Foxpage Restful API 获取邮件页面的内容信息(DSL),拿到页面 DSL 后会走解析流程,做一些预处理、数据绑定及资源文件加载(比如组件的 umd 文件)等工作。解析完成后 SDK 会根据解析后的对象做页面的构建和渲染(SDK 默认内置 Reactjs 框架,这里的邮件页面组件为 React 实现的),最终调用 Reactjs 框架的接口输出页面的 HTML 内容。

    3045ab8612f40be77108f535d507c8a6.png

    四、Why Foxpage?

    以下是 Foxpage 的技术目标,这也是框架核心的能力,降低成本同时提高生产力。

    • 提高效率,效率包括组件开发效率,页面开发效率,发布效率等

    • 降低成本,成本包括人员成本,开发难度,迭代成本,维护成本等

    • 质量保障,质量包括稳定性,“良品率”等 (这里的质量的保障是可持续性的,不应因业务的变化而降低或缺失,是一套通用的质量保障体系)

    目前前端开发还是一个“劳动密集型行业”,需要大量的开发资源堆叠去解决业务需求。虽然有了一些工程化的加持,但在面对成倍的开发需求增长时,效率和成本问题会凸显并放大。Foxpage 的出现可以一定程度上缓解这一问题,让前端开发多一种选择。

    4.1 低码开发模式

    开发从 “pro code” 到 “low code” 的转变。拿前端页面开发举例(为方便理解,结合制造业流程来说明),传统的开发方式是在线下制作组装,经过一系列工序后发布到线上交付。而低码的方式是在线可视化搭建页面,然后产出一张张施工图纸,在交给生产线做线上的自动化组装,最后线上交付。

    47ea3615592370cc9798b65eb402eda1.png

    这种变化带来的益处:

    • 降低开发门槛,有画图能力的人就能做页面开发

    • 提升交付效率

    • 页面质量更高

    4.2 工程化的支持

    从传统前端的工程化转变为围绕着低代码开发建设的新的工程化体系。不管是新的还是传统的工程化,最终目的都是为了高效且低成本的开发并保质保量的交付。低码的开发模式中同样需要一些工程化的支持,只是会换成另外一种形式而已。

    框架提供的基础能力:

    • 零件(组件):提供了一套零件生产工具及流程(脚手架、可视化调试工具,开发、调试及使用流程)

    • 图纸(页面结构内容):提供了画图工具(可视化编辑器),模板

    • 生产线(站点):提供了自动化生产设备(解析器,渲染引擎),自建物流(资源管理器)

    • 配套(平台):提供建设各类仓库所需要的场地(按组织,团队,应用提供了相应的独立的空间),交易市场(商店)

    Foxpage 作为一款前端低代码的基建产品,会持续的探索围绕着低代码开发的工程化体系,给低代码开发带来更好的体验。

    4.3 工作流的改变

    让各个职能可以在线合作,改变了传统线性接力式的工作流程,减少了各职能之间不必要的依赖,缩短开发工期。有人用游戏中的“圆桌范式”来形容这种工作关系。我觉得有点像“手术台”的形式,这种形式更强调合作。

    995dc7fe5bcf75596ba20733aba8d5da.png

    作为框架会有约束,但更多的是支撑。在享受低代码带来益处的同时也要适应它带来的一些变化及约束。


    五、组件化

    组件是低代码类产品非常重要的部分,可以说组件化的结果会直接影响项目低代码开发的体验。

    Foxpage 作为前端低代码框架,理论上是不涉及到业务部分的。开发者需要站在整个项目角度结合业务去考虑怎么组件化,如哪些模块需要组件化来降低重复开发的成本,哪些不适合组件化;组件的主体内容是静态数据,还是通过请求接口获取的动态数据;组件数据部分的复杂逻辑是否可以交给后端;哪些信息根据具体的业务是要做成可配置的会更灵活。

    组件的粒度粗细怎么控制?粒度越细可能越灵活,但是组合起来可视化搭建过程中就会越复杂,增加使用成本。如果做的过粗,复用度就会降低,增加开发成本等。开发者需要结合自身业务综合地去考虑这些问题。

    5.1 提供的支持

    当开发者按照自己的设计去完成组件化落地时,Foxpage 会提供一些支持。包括组件开发的脚手架,可视化调试,本地构建等工具及经过大量实践后整理出的一些相对完善的流程。

    我们关注组件化落地过程中整条链路上的开发和使用体验,从组件的定义,开发实现,调试,测试,部署,注册,可视化配置使用及效果分析。同时也会提供一些自己的实践供开发者参考。

    5270aa5f1db8d88cb09edd040072a4fb.png

    当然在对组件化做支持的过程中,会有一些原则:

    • 不去影响开发者现有的开发习惯

    • 不去改变前端项目现有的工程化体系,只基于现有的体系做补充支持

    • 不去破坏组件的通用性,组件不是为 Foxpage 特制的,不能影响组件在别的项目中使用

    除了用户需要为自身业务实现的组件外,Foxpage 会提供一些基础且比较通用的组件,同时还会结合行业比较流行的 UI 库做一些组件化实践,提供给用户多样的选择。

    5.2 不提供的支持

    Foxpage 不提供组件项目静态资源存储、部署及 CDN 内容分发相关的功能。对于静态资源存储,开发者可以按照自身的情况来选择通过云服务自建或者使用第三方托管服务。Foxpage 也不提供组件项目的 CI/CD 相关的功能,因为 Foxpage 本身没有对应的构建和部署环境。开发者可以借助市面上成熟的工具或服务来完成 CI/CD,整个过程 Foxpage 不会介入。当然作为低代码配套基建的重要部分,我们未来也会去提供这部分的实践。


    六、扩展性

    扩展能力是 Foxpage 框架最重要的能力之一,主要体现在对多场景,多技术栈,多端等的支持上。

    在了解扩展能力之前,我们再回过头看看 Foxpage 的 DSL 部分。DSL 本身除了用作描述之外没有承担任何其他的职责,实体是一份 JSON 格式的数据。技术上不涉及到任何的编程语言,框架,运行环境等。它的能力会体现在对应的场景的具体实现上。

    拿建筑行业举例来说 DSL 就好比施工图纸,它是一门工程语言,建筑工人可以根据施工图纸在不同的环境和地点,选用不同的建筑材料搭建出建筑物。也正是因为如此才使得框架有了支持多场景,多技术栈,多端的可能。

    那扩展能力具体是怎么体现出来的呢?我们可以先从 DSL 的视角,通过对 Web 页面的制作和渲染这个过程的简单剖析,看下 Foxpage 是怎么运作的,其中涉及到扩展的几个关键点已标注。

    13f172e77891b2f521c62ba1c3e75a1e.png

    注 1:DSL 部分可以随意的扩展,只要提供对应 DSL 的解析器即可。

    注 2:Foxpage Node SDK 内置 Reactjs 框架,主要负责页面的构建和渲染。如果想用其他的前端框架,可以提供 SDK 中对应的渲染引擎部分的实现即可。理论上可以选用任何你想用的前端框架,这是对多前端技术栈的支持能力的体现,当然要做到多技术栈支持还有其他工作需要做,如可视化,客户端渲染等环节也要有对应技术栈支持。框架后面也会提供对 Vuejs 的支持。

    注 3:对多端,多场景的支持,Foxpage 提供了对服务端的 Node SDK 和浏览器端的 JS SDK 的实现。不同端的实现会有差异,但大体都包含资源管理,DSL 解析器,渲染引擎。其核心架构中的无头 CMS 的设计,使得整个框架拥有了更强的扩展性。针对不同的端或场景可以提供对应的的实现。具体可以参考文档进阶之路频道中 Node SDK 实现部分。

    注 4:我们在 DSL 的解析,页面的构建及渲染的过程中预置了钩子并暴露出了很多钩子函数(图中的只是一部分例子),结合框架提供的插件机制,开发者可以很方便的介入到整个运行过程中去,结合业务需求做一些定制,这样大大提高了可扩展性。

    从上图的运行的过程中看,整个框架都是围绕着 DSL 来建设的,可以这么说 DSL 的描述能力有多强,框架扩展的能力就有多强。


    七、可视化搭建

    可视化积木式的搭建其实是网页低代码开发的一个很基础的能力,Foxpage 也提供了相应的功能,与其他同类的产品不同的地方是我们提供了好几种可视化编辑器,有针对富文本类的,Markdown 类的,有页面类的,有画图类的等等,根据不同的要编辑的内容的类型可以选择对应的编辑器。

    这一部分我们也预留了常用的接口,甚至可以开放给用户定制内容编辑器,这也是 Foxpage 支持多场景能力的体现。当前 Foxpage 内置的只有针对网页内容的可视化编辑器,后续会考虑继续开发其他类型的内容编辑器。

    ffd1b004ada0d6b0d331e80a7a88e495.png

    可视化能力不仅体现在编辑的过程,还会在一些如历史版本快照,组件在线预览,页面点击曝光埋点等功能上有所体现。目前可视化核心部分已经组件化,这样可以给任何其他需要可视化功能的模块带来便利的,一致的可视化体验。


    八、平台化

    Foxpage 提供支持多应用的开发和管理,是 SaaS 产品的一种“多租户”的模式,在面对多个前端项目要使用 Foxpage 框架时,无需部署多套服务。同时为了各个应用之间的信息流通分享,还提供了商店模式,通过商店可以上架应用,页面模板,组件,变量等内容,从而大大的提高的各类内容的复用度。

    开发者在完成一个前端项目低代码框架接入工作后,可以将自己项目的应用上架商店,通过这种方式开放自己应用的前端低代码开发权限,这个时候其他使用低代码开发的用户(可以是编辑,运营或开发者,以下简称用户)也可以在你的应用上做低代码开发。

    这个过程中开发者变成了提供某一个项目的低代码开发的服务者,开发者接入低码框架后让项目拥有了低代码开发的能力,通过平台将这种能力赋予用户,这个过程中开发者相对于用户来说变成了服务方。

    开发者还可以专门开发组件,提交到商店后供其他的开发者在自己的应用中使用。使用低码开发的用户可以将自己开发的作品,如搭建的 xxx 页面上架到商店供其他用户克隆使用等等。

    Foxpage 为各种角色提供了一个在线合作的平台,同时提供在线协作能力,提高各个角色之间的合作效率。


    九、项目实践

    Foxpage 已经在 Trip.com 内部多个项目中使用,且已经稳定运行多年。这里结合几个有特点的项目来介绍下项目实践,这些项目本身的页面数非常多且结构各异,页面内容变更非常频繁。应用也都是 MPA(Multi-page applicaiton)多入口应用,业务需求决定需要支持多种渲染模式 SSR,CSR,SSG。

    其实每一个项目的低代码实践,不仅仅只是解决单个项目的问题,而是解决了这一类项目的问题。下面三个实践都各有特点,在实践的过程中也遇到了各种问题,特别是在对组件化的支持上和不同系统之间的对接上,总之就是框架结合具体业务场景落地上还有各自的路要走。这里不做详细介绍只简单让大家对 Foxpage 的使用场景有个直观的感受。


    9.1 促销页面

    为了营销需求而搭建的落地页面,有各种各样的玩法,主要有产品促销,好友拉新,秒杀,抽奖等活动。

    需求特点:

    • 短,活动有一定的时间范围,一般不会太长,由其性质决定;

    • 频,活动的需求有确定性的,周期性的和临时性的,需求繁多,玩法各异;

    • 快,一般活动上线时间都会有要求,可能配合一个热点事件,如果是突发类的,需要快速响应;

    • 高,看活动需求,每个活动都可以看成单个大小不一的项目,支持成本比较高;

    接入 Foxpage 后:

    6e9e0629b64e9c3325c3312abd81d793.png

    案例:Trip.com Eventsale 系统

    简介:Eventsale 系统是 Trip.com 的活动配置系统,包含活动的基础信息,促销信息,玩法信息,活动页信息等配置。其中页面搭建能力由 Foxpage 提供。

    现状:截至 2021 年中为止,大约有数千张的活动页面通过活动配置系统制作完成。


    9.2 SEO 页面

    为了搜索引擎优化提供的一些页面。大部分页面的主体内容都是动态生成的,不同的关键词页面的结构和内容都不一样。页面模块需要有一定的动态性,会根据模块点击和曝光动态排序以及控制是否展示。

    接入 Foxpage 后:

    3b102bc2a3fa975a3371de9cfddf80ab.png

    案例:Trip.com SEO 管理平台

    简介:SEO 管理平台管理着 Trip.com Hot 频道的内容,包括关键词管理,页面 TDK 信息,结构信息,内容等。其中页面搭建能力由 Foxpage 提供。

    现状:截至 2021 年中为止,SEO 平台目前由 Foxpage 框架生成的页面大概有 百万级的页面,页面部分的主要模块都是通过算法动态生成。


    9.3 邮件页面

    在邮件页面发送这个场景中,传统的方式是前端切图,将 HTML 交付给到后端,后端再结合模版引擎做数据绑定,然后调用发送渠道发送。这个过程中前后端没有分离,前后端合作低效。结合 Foxpage 方案后很好地解决了痛点。

    680737e12714ee20bdc41d1087ee4cf0.png

    案例:Trip.com MessageHub 系统

    简介:MessageHub 系统是 Trip.com 触达用户的消息系统,包含短信,邮件,站内信等内容的管理和发送。其中邮件页面搭建能力由 Foxpage 提供。

    现状:截至 2021 年中为止,通过邮件配置系统制作的各类邮件页面大约数千张左右, SSR 服务平均每天调用量在几百万次,静态页面渲染耗时 99 线在 60ms 左右。

    9.4 更多的前端使用场景

    适用的场景除了我们已经实践过的其实还有很多,大家可以继续探索。

    a8a8c3d618b1b4a8c6f3a90cbb0a84a3.png

    • 网页搭建:后台系统页面(表单,表格,菜单),数据可视化看板,贺卡,调研问卷,弹窗广告,富文本页面,Markdown

    • 图片制作:海报

    • D2C:各类 Pro code 生成,橱窗代码

    9.5 不适用的场景

    主要是从体验和使用成本角度总结出以下不适用场景:

    • 交互逻辑复杂的前端项目

    • 定制化程度高且不易组件化的前端项目

    • 页面内容或结构不会频繁变化的前端项目

    两个需要用户注意的事项:

    • 在线搭建不等于在线写代码,不要把低代码类产品变成了在线的 IDE

    • 不要为了低代码而低代码,有些项目使用低码的方式不仅成本高,而且体验也差

    低代码虽好却并非适合所有的项目,根据实际情况谨慎使用。


    十、未来规划

    目前 Foxpage 低代码框架才完成基础部分的功能开发,离一个成熟完善的低码框架还有很长的路要走,2022 年我们将从以下几个方面梳理规划:

    10.1 框架迭代

    1)版本 1.0(2022 H1):提供低代码开发所需的基础功能,将于上半年发布 1.0 版本

    2)版本 1.x(2022 Q2):提供对国际化,系统权限,Debugger 工具,自定义组件等的支持

    3)版本 2.0(2022 Q4):对 Foxpage Admin UI 改造,重点会在交互部分,视觉部分也会升级,同时做功能上的简化和流程上的优化

    4)版本 2.x:提供对系统集成,Serverless 方案,页面数据分析等的支持

    10.2 场景拓展

    除了网页制作部分已有的使用场景,还会探索图片生成,主要会在海报制作方向

    10.3 配套建设

    1)组件:

    • 继续丰富基础组件库;

    • 提供邮件场景下的组件化最佳实践;

    • 对市面成熟的 UI 库支持

    2)静态资源服务:结合云服务的对象存储服务,提供静态资源服务建设的最佳实践

    3)托管服务:结合云服务提供 SaaS 产品


    深入了解

    如果你想更深入的了解 Foxpage,可以移步至项目文档,同时推荐下面几篇文章供阅读:

    Foxpage 在 Node 应用中的落地实践

    Foxpage 低码下的组件化实践(一)

    Foxpage Node SDK 资源管理 

    Foxpage Node SDK 插件化

    【推荐阅读】

    804a895e7c2413b49ff355b4cec9c054.png

     “携程技术”公众号

      分享,交流,成长

    展开全文
  • 这种可以快速靠拖拽生成小程序的平台原来是腾讯云开发出的,叫云开发低码。进去官方文档一看。原来不仅仅支持拖拽生成小程序,还可以生成H5,网页。 上面是官方给出的简介,我这里提取下关键点 1,拖拽式 2,自带...
  • LDPC密度奇偶校验

    2016-05-10 20:33:10
    密度奇偶校验
  • 有哪些好用的代码开发平台(2)

    万次阅读 多人点赞 2022-03-02 13:14:58
    2022年国内外有哪些好用的代码零代码平台
  • 编者按:火爆的代码平台究竟是什么?它有什么特殊的魅力一直吸引着大众的注意?本文将带你走近代码,盘点国内典型的十大代码平台。 概要: (1)什么是代码平台 (2)国内的代码平台盘点 (3)选型...
  • 到底是何方神圣?——撑开ERP物料管理保护伞!
  • 值得关注的5款代码平台推荐

    千次阅读 2022-05-11 12:16:38
    这里匠为您推荐 5 款海外目前流行的内部系统代码平台并进行评测,为您在企业代码平台的选择上助一臂之力。​ 匠是一款对开发者友好的代码平台,在支持多种数据源的同时提供了一套开箱即用的组件,帮助您...
  • iVX代码平台系列详解 -- 概述篇(三)

    万次阅读 多人点赞 2022-08-16 09:12:00
    iVX最好用的代码平台
  • 密度奇偶校验_LDPC_改进译码算法研究
  • 基于MATLAB的密度奇偶校(LDPC)验编码与解码的仿真 ldpc的编解码原理,仿真源程序和仿真图,基于matlab软件下 设计参数对LDPC性能的影响 码长 列重 迭代次数 源码和仿真图
  • 海康大华摄像头GB/T28181接入国标视频平台如何选择主流还是子流1、打开摄像头配置接入页面2、搭建GB28181视频直播平台 1、打开摄像头配置接入页面 如果摄像头支持流选择,在GB28181平台接入的配置页面,可以...
  • 前端代码调研与总结

    万次阅读 2022-01-21 14:47:48
    近些年来,代码的概念逐渐流行了起来,而代码产品也越来越多的出现在我们的身边。代码可以叫做可视化搭建,或者叫效能工具等等。像国外的Mendix,国内的宜搭、苍穹、简道云、amis等等。基于这种新型的开发方式...
  • 六位代码专家联合撰写,代码内参推荐 《代码指南 》这本书深入分析代码100问,系统讲解代码应用开发课程100节,十大行业3000模板,应用参谋全面助力企业数字化转型
  • 什么是代码开发?

    千次阅读 2021-11-09 21:04:42
    代码开发是一种通过可视化进行应用程序开发的方法,使具有不同经验水平的开发人员可以通过图形化的用户界面,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序。代码开发平台使非技术开发人员可不必编写...
  • 什么是代码(Low-Code)?

    万次阅读 多人点赞 2020-11-17 15:28:22
    那么在后疫情时代,究竟需要什么样的新技术,才能真正解放IT生产力,加速社会数字化转型,Make The World Great Again?我认为是代码(Low-Code)。
  • 阿里推出一款代码平台,开源了

    万次阅读 2022-03-14 17:06:49
    最近的阿里的一款代码开发平台又上了 Github 热榜。 为什么说又一款呢? 类似的代码平台已经很多了,阿里现在还要开源了这个平台。 截止目前,该项目虽然上了Github 热榜,但是获得的 Star 并不多。 项目初期,...
  • 受环境影响大,比如光线暗时识别率 若二维码中间放置了自定义 logo,有一定概率无法识别到该二维码   uniapp 官方文档也提到: App的扫引擎,使用业内开源的通用扫库,扫效率比不过微信、支付宝等商业扫...
  • 推荐一个基于 Vue 的代码平台

    千次阅读 2021-06-17 00:51:58
    发现了一个开源的代码平台项目,用户仅仅通过简单的拖拉拽就能生成一个页面。交互方式类似于创客贴、Processon平台。这个项目基于 Vue.js 技术栈,先来看这个开源项目有什么功能,平...
  • 采用捷码低代码+捷应用市场上大量丰富的、成熟的智慧交通现成应用,通过适度的成本二开,即可面向复杂多变的智慧交通业务场景需求,提供可靠的应用解决方案。
  • 自2021年开课以来,来自全国各地的280多名软件开发工程师通过为期3天共6课时的捷码低代码培训课程,在捷码低代码平台上通过拖拽可视化组件,快速搭建实用的数字化业务系统,并以优异成绩毕业,获得了捷工程师认证...
  • 本文简述白码低代码开发平台的功能及作用! 白码低代码平台的功能 快速构建应用程序 可视化无代码设计器:使用可视化开发来促进业务和IT协作以快速构建应用程序。 强大的代码工具:处理为您的企业提供支持的...
  • 首先不要把分辨率与清晰度挂钩,也不要把码率与清晰度挂钩,只有当母源一致的情况下才能对比...最后无论什么片什么分辨率均与母源有直接关系,比如长出现码率的某国发行的BLURAY比某国发行的高码率BLURAY清晰度...
  • 什么是代码?白详解

    万次阅读 2020-05-12 10:27:47
    将会详细介绍代码是什么。  什么是代码:  什么是代码?代码是一种快速设计和开发软件应用程序并且手动编码最少的方法。它可以为技术人员提供更快,更可靠的价值。通过在图形界面中使用可视化建模来...
  • 千次阅读 2021-07-26 03:09:29
    制1.数字系统用数字信号完成对数字量进行算术运算和逻辑运算的电路称为数字电路,或数字系统。由于它具有逻辑运算和逻辑处理功能,所以又称数字逻辑电路。人类已经进入到了数字时代,数字系统在我们日常生活中愈发...
  • 条码技术,在当前时期已经非常成熟,成本,灵活度高,条码识别便宜的扫描枪30元左右。 一、条形简介_条形基本常识_条形基本原理 1.条形,又称条码,一般又称一维; 广义的条形是一维+二维码。 一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 723,941
精华内容 289,576
关键字:

低码