简介
Edge 是一个简单、现代且开箱即用的 Node.js 模板引擎。Edge 的写法与 JavaScript 十分相似。只要你会 JavaScript,你就会写 Edge。
Hello {{ user.username }}!
Hello world
This is a hello world example in Edge.
{{ user.subscription?.plan || 'Not subscribed' }}
JavaScript Expressions
Edge is capable of evaluating any JavaScript expression.
@let(payments = await user.getPayments())
You have made {{ payments.length }} payments so far.
Async/await
You can also make use of async/await keywords within your templates.
@if(user.hasSubscription)
Hurray! You have access to over 280 videos.
@else
Videos are available only to subscribers.
@end
Conditionals
Writing conditionals is similar to JavaScript.
@each(comment in post.comments)
@include('partials/comment')
@end
Loops
You can loop over Arrays and Objects using a unified syntax.
@accordion()
@accordion.item({ title: 'What is Edge?' })
Edge is a template engine for Node.js
@end
@accordion.item({ title: 'Why should I use Edge?' })
Because you need a template engine 🤷🏻♂️
@end
@accordion.item({ title: 'How can I support Edge?' })
By becoming a sponsor on Github
@end
@end
Components
Edge has components as well. They allow re-using markup with an isolated state.
为什么还需要一个模板引擎?
很多人不会问这个问题,因为 Node.js 生态里那些流行的模板引擎要么已停止维护,要么在过去几年几乎没有创新。
而另一方面,我们持续演进并在 AdonisJS 内部使用 Edge 已近七年。下面是 Edge 精心挑选的一些特性。
- Edge 没有限制——你可以在其中书写任意 JavaScript 表达式。
- 准确的错误堆栈。
- 心智模型简单,无需学习自定义方言。
- 组件层,支持插槽(slots)和 provide/inject API。
- 与 Iconify 集成图标。
- 可扩展的 API。Edge 80% 的功能都是基于公开 API 实现的。
Edge 与 Vue.js / React / Svelte 的区别?
Edge 是一个后端模板引擎,与 Vue.js 或 React 这类前端库完全不同。
- Edge 没有响应式(Reactivity)。
- 它不依赖任何 DOM 实现,甚至不局限于 HTML。
- 你无需编译 Edge 模板,它们在运行时编译。
更恰当的对比是 Nunjucks vs. Edge 或 Pug vs. Edge。
Edge 与 JSX 的区别
虽然 JSX 很优秀,但从技术上讲它并非模板引擎。JSX 是一种用于 XML 的 JavaScript 语法扩展,常见于 React 等框架中,许多 Web 开发者用它来生成 HTML。
而 Edge 是一个模板引擎,可以嵌入到任意标记语言中,无论是 Markdown、JSON、YAML,当然还有 HTML。
我喜欢 JSX 的诸多理由,包括类型安全(配合 TypeScript 时)。但 JSX 有时会显得啰嗦,且为了兼顾所有人而略显底层。另一方面,Edge 对于那些钟爱模板引擎简洁语法和富有表现力的开发者来说,是一个极佳的选择。
我为什么应该使用 Edge?
如果你喜欢后端模板引擎的简洁,并且一直在寻找一个现代、清新、又不会强迫你学习一门新语言的模板引擎,那么 Edge 就是为你准备的。
如果你沉浸在自己的 <your-frontend-framework> 生态中,那你并不需要 Edge。想象一下,你压根不会打开这个网站 😉
下一步
招募贡献者
我们正在寻找贡献者,帮助为主流代码编辑器创建语法高亮扩展。
如果你决定为某个代码编辑器构建扩展,请通过 在 Github 上提 issue 告诉我们。你可以阅读 语法规范 指南来进一步了解 Edge 语法。
赞助商
List of individuals and companies publicly sponsoring Harminder Virk on Github. If you are sponsoring and cannot see your name, ensure your sponsorship is not private.