技术经验分享:idyll开源生成交互式web的标记语言试用

简介: 技术经验分享:idyll开源生成交互式web的标记语言试用

"

说明

Idyll is an open-source markup language and toolkit for producing //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjg1MDQ5Ng==.html

interactive web pages

You give Idyll a markup file , and it compiles that file to a full bundle of HTML , Java Script , and CSS that can run in anyone' s web browser

Idyll can be used to create explorable explanations , and to add interactivity to blog engines and content management systems . The tool can generate standalone webpages or be embedded inside of an existing page , and can be fully themed to match your stylegui

大体意思:

IDYLL是一种用于生成交互式网页的开源标记语言和工具箱。

给I定dyll一个标记文件,可以将该文件编译成可以在任何人的Web浏览器中运行的HTML、Java脚本和CSS的完整包。

IDYLL可以用来创建可探索的解释,并增加博客引擎和内容管理系统的交互性。该工具可以生成独立的网页或嵌入现有页面中,并且可以完全主题以匹配您的样式GUI。

简单试用

安装

npm install -g idyll

基本使用

idyll create

效果

构建&&运行

构建

idyll build

运行

可以直接打开 build 目录

或者

idyll watch 构建同时使用dev server

查看效果

publish 到idyll 的pub server

可以直接访问demo

添加自定义组件

注意组件的名称 custom--component //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjgzOTc4NA==.html

components/ 目录

components/custom-apps-component.js

const React = require('react');

class CustomAppsComponent extends React.Component {

render() {

const { hasError, idyll, updateProps, ...props } = this.props;

return (

[span class=""hljs-name"">div {...props}>

[span class=""hljs-name"">h1 >荣锋亮 demo react 自定义组件

);

}

}

module.exports = CustomAppsComponent;

使用:

index.idyll 添加

【CustomAppsComponent /】

效果:

说明

idyll 使用起来比较简单,同时直接组件化开发(直接使用react 组件),对于图表的支持也是很不错的,默认demo

就有集成d3的简单例子,同时还可以方便的集成到web app 中

参考资料


"
image.png
相关文章
|
10天前
|
SQL 缓存 搜索推荐
后端技术在现代Web开发中的应用与挑战
本文将深入探讨后端技术在现代Web开发中的重要性,涵盖从基础架构到性能优化的多个方面。通过分析当前主流后端技术的优缺点,并提供一些实用的解决方案和建议,帮助开发者更好地应对日常开发中的挑战。
29 1
|
1天前
|
前端开发 JavaScript 安全
深入理解Python Web开发中的前后端分离与WebSocket实时通信技术
在现代Web开发中,前后端分离已成为主流架构,通过解耦前端(用户界面)与后端(服务逻辑),提升了开发效率和团队协作。前端使用Vue.js、React等框架与后端通过HTTP/HTTPS通信,而WebSocket则实现了低延迟的全双工实时通信。本文结合Python框架如Flask和Django,探讨了前后端分离与WebSocket的最佳实践,包括明确接口规范、安全性考虑、性能优化及错误处理等方面,助力构建高效、实时且安全的Web应用。
9 2
|
4天前
|
前端开发 API Python
WebSocket技术详解:如何在Python Web应用中实现无缝实时通信
在Web开发的广阔领域中,实时通信已成为许多应用的核心需求。传统的HTTP请求-响应模型在实时性方面存在明显不足,而WebSocket作为一种在单个长连接上进行全双工通信的协议,为Web应用的实时通信提供了强有力的支持。本文将深入探讨WebSocket技术,并通过一个Python Web应用的案例分析,展示如何在Python中利用WebSocket实现无缝实时通信。
14 2
|
6天前
|
SQL 缓存 数据库
构建高效Web应用:掌握Python中的ORM映射技术
在Web开发中,数据库操作至关重要,但直接编写SQL语句会增加代码复杂度并降低效率。对象关系映射(ORM)技术通过将对象模型映射为数据库表,使开发者能以面向对象的方式处理数据,提升开发效率和代码可维护性。本文以Python和SQLAlchemy为例,介绍ORM的基本概念、安装方法及使用技巧,并展示其在提升Web应用性能方面的优势。通过ORM,开发者可以简化数据库操作,专注于业务逻辑实现,提高开发效率和代码质量。
24 1
|
15天前
|
安全 JavaScript Java
后端技术在现代Web开发中的实践与挑战
本文旨在探讨后端技术在现代Web开发中的关键作用,分析其在数据处理、业务逻辑实现和系统安全等方面的重要性。通过阐述常见的后端技术和框架,如Node.js、Django和Spring Boot,展示它们在实际项目中的应用。同时,文章将讨论后端开发所面临的主要挑战,包括性能优化、扩展性和维护性问题,以及如何应对这些挑战。最终,通过对实际案例的分析,总结出一套行之有效的后端开发最佳实践,为开发者提供参考。
47 5
|
15天前
|
人工智能 关系型数据库 数据安全/隐私保护
后端技术在现代Web开发中的应用与挑战
本文将深入探讨后端技术在现代Web开发中的重要性,通过分析其在数据处理、业务逻辑实现和安全性保障方面的应用,揭示后端技术的核心价值。同时,本文还将讨论当前后端开发面临的主要挑战,如高并发处理、数据安全、微服务架构的复杂性等,并给出相应的解决方案。无论是后端开发者还是对后端技术感兴趣的读者,都可以通过这篇文章获得启发和指导。
|
26天前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
53 7
|
14天前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
22天前
|
关系型数据库 Java MySQL
"解锁Java Web传奇之旅:从JDK1.8到Tomcat,再到MariaDB,一场跨越数据库的冒险安装盛宴,挑战你的技术极限!"
【9月更文挑战第6天】在Linux环境下安装JDK 1.8、Tomcat和MariaDB是搭建Java Web应用的关键步骤。本文详细介绍了使用apt-get安装OpenJDK 1.8、下载并配置Tomcat,以及安装和安全设置MariaDB(MySQL的开源分支)的方法。通过这些步骤,您可以快速构建一个稳定、高效的开发和部署环境,并验证各组件是否正确安装和运行。这为您的Java Web应用提供了一个坚实的基础。
33 0
|
28天前
|
Java Maven Apache
Struts 2 配置不再难!跟着这篇详解从零搭建开发环境
【8月更文挑战第31天】要搭建Struts 2开发环境,需先安装JDK,然后下载并解压Struts 2二进制包,将其核心库`struts2-core`添加到项目类路径中。使用Maven或Gradle时,可在配置文件中添加依赖。接着,在`web.xml`中配置Struts 2过滤器及其映射。`struts.xml`通常位于`src/main/resources`目录下,用于定义动作映射和拦截器等核心配置。最后,通过配置类路径下的`log4j.properties`文件,可以设置Struts 2的日志记录级别及输出方式。完成以上步骤后,即可开始基于Struts 2框架进行Web应用开发。
46 0