The following article comes from the front-end laboratory, the author is great
There are already many frameworks for the front end, such as Ract, Vue, Angular, Svelte, etc.
But recently a new framework has come out, a new thing that claims to be likely to change the way you develop your network -Nue.JS
Nue.JS
Nueis a toolset that makes front-end development more enjoyable. The official claim is that this is a complete overhaul of ecosystems such as Vue, React, and Svelte, as well as web development frameworks such as Vite, Next.js, and Astro.
Features
-
Nue uses progressive enhancement, separation of concerns, and Semantic Web design to deliver new levels of performance, better scalability, and a vastly improved development experience.
-
Nue is a very small JavaScript library, only 2.3kb compressed.
-
Nue does not have abstract concepts such as hooks, effects, props, portals, watchers, provides, injects, and suspension. Knowing the basics of HTML, CSS, and JavaScript makes it easy to get started.
-
Eliminates the "hell" caused by TCP slow start algorithm and progressive enhancement
-
Using HTML-based template syntax
-
Has a responsive and heterogeneous component model, suitable for creating various types of applications
-
Allows multiple components to be defined in a single file to simplify dependency management
-
Simplified tool chain: It includes the render function for server-side rendering and the compile function to generate browser-side components. It can run normally in the development environment without the need for complex packaging tools such as Webpack or Vite.
Install and use
createnue
# 下载项目
git clone https://github.com/nuejs/create-nue.git --depth 1
# 进入到项目内
cd create-nue
# 安装依赖
npm install
# 启动服务
npm run start
After the service is started successfully, you can access:http://localhost:8080
nue syntax
Nue uses HTML-based template syntax:
<div class="{ type }">
<img src="{ img }">
<aside>
<h3>{ title }</h3>
<p :if="desc">{ desc }</p>
<slot/>
</aside>
</div>
Control flow:
<b :if="type == 'A'">A</b>
<b :else-if="type == 'B'">B</b>
<b :else-if="type == 'C'">C </b>
<b :else>Not A/B/C</b>
cycle
<li :for="(item, index) in items">
{ index }: { item.text }
</li>
Custom syntax
Components are HTML fragments whose component names are given in the @name attribute
<div @name="media-object" class="{ class }">
<img src="{ img }">
<aside>
<h3>{ title }</h3>
<p>{ desc }</p>
</aside>
</div>
You can also use any extension you want on the component file, use .nue the extension.
event handling
Define instance methods
<dialog>
<button @click="close">Close</button>
<script>
close() {
this.root.close()
location.hash = ''
}
</script>
</dialog>
modifier
Nue provides some convenient shortcuts to handle common DOM event manipulation functions. For example, @submit.prevent
<form @submit.prevent="onSubmit"></form>
<a @click.stop.prevent="doThat"></a>
<form @submit.prevent></form>
The following modifiers are supported:
-
prevent prevents the default behavior of an event from occurring
-
stop to prevent further spread of the incident
-
selfevent.target only triggers handlers on the element itself
-
once event is triggered at most once
-
enter captures "Enter" and "Return"
-
delete captures "Delete" and "Backspace" keys
-
esc captures "Esc" and "Escape"
-
space captures "spacebar", " ", "spacebar"
-
up captures "up" and "up arrow"
-
down captures "Down" and "ArrowDown"
-
left captures "left" and "left arrow"
-
right captures "right" and "right arrow"
nue target
nue aims to create an ecosystem and is an engineering attempt to bring long-term solutions to widespread front-end fatigue.
nueThe release plan is as follows:
-
Nuekit: for building websites and web apps with less code
-
Nuemark: A markdown style for rich and interactive content
-
Nue CSS: A cascading style alternative to CSS-in-JS, Tailwind, and SASS
-
Nue MVC: Users build single-page applications
-
Nue UI: for creating reusable components for rapid UI development
