Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update single-page-applications.md #300

Merged
merged 1 commit into from
Aug 13, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions packages/nuejs.org/docs/single-page-applications.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ include: [form, button]
---

# Single-page applications `Coming soon`
Ultimately Nue brings the UX development model and the global design system to the world of single-page applications. This makes a better system architecture and a clearer coding style, and a more enjoyable way to build new things:
Ultimately Nue brings the UX development model and the global design system to the world of single-page applications. This makes for a better system architecture, a clearer coding style and a more enjoyable way to build new things:

[image.gridpaper]
small: /img/single-page-app.png
large: /img/single-page-app-big.png
width: 500

With Nue, you can use the same development approach to build both content-heavy applications and single-page applications. This is a breath of fresh air also not just for the UX developer, but also for the application developer, who can switch to writing clean code without the "ugly" front end stuff. Just pure JavaScript, tested on the server side and served with a clean, documented API.
Nue allows you to employ the same development approach to build both content-heavy applications and single-page applications. This brings a refreshing change, not only for UX developers but also for application developers, who can focus on writing clean code without dealing with the "messy" front-end elements. It's all about pure JavaScript, tested on the server side, and delivered through a clean, well-documented API.


[.note]
Expand All @@ -20,27 +20,27 @@ With Nue, you can use the same development approach to build both content-heavy


## Separation of concerns
Today, the codebases single-page applications are enormous. It's not unusual to see projects with hundreds, even thousands of JavaScript components where the markup, styling, and logic are mixed together forming a massive canvas of "spaghetti code". Projects like **Vite** are specifically built to solve the issues that come with with these massive component-heavy codebases.
Today, the codebases of single-page applications are enormous. It's not unusual to see projects with hundreds, even thousands of JavaScript components where the markup, styling and logic are mixed together forming a massive canvas of "spaghetti code". Projects like **Vite** are specifically built to solve the issues that come with these massive component-heavy codebases.

Nue is different. It splits you codebase in two: the application and the user interface. This split makes a big difference in how you code looks:
Nue's approach is different. It splits you codebase in two: the application and the user interface. This split makes a big difference in how you code looks:


### Application code
The application code becomes a separate entity with no complexities from the UI layer: there is no knowledge of views nor state and the code is absent from framework-specific concepts like hooks, refs, or events. And there are no extra domain-specific idioms like *JSX* or *Tailwind*.

This dramatically simplifies the code and makes it easier to read and maintain. The application can be an isolated *NPM* module, that can be tested separately.
This dramatically simplifies the code, making it easier to read and maintain. The application can be an isolated *NPM* module, that can be tested separately.

But most importantly: you can use the exact same application code for different frontends like Console, Slack agent, or the mobile app.
But most importantly: you can use the same application code for different frontends like Console, Slack agent, or the mobile app.

You can even use a true typed language like *Rust* or *Go* and compile the application to *WASM* like *Figma* does. Decoupled application logic opens new doors for front-end developers.


### User interface code
When styling and the application code are decoupled from the UI, the code becomes simple enough for UX developers to manage and scale. Instead of creating custom components for the various contexts, the UX developer can use native HTML inputs, buttons, and other elements to build the layout. Together with the global design system, you'll end up with a dramatically simpler codebase. You need less time and effort to implement new things.
When the styling and the application code are decoupled from the UI, the code becomes simple enough for UX developers to manage and scale. Instead of creating custom components for the various contexts, the UX developer can use native HTML inputs like buttons and other elements to build the layout. Together with the global design system, you'll end up with a dramatically simpler codebase. You need less time and effort to implement new things.

You can re-use the same global CSS code that is already present on your content-heavy website. This further reduces the amount of code you need to write.
You can re-use the same global CSS code that is already present in your content-heavy website. This further reduces the amount of code you need to write.

But most importantly: your styling code, its motion, and other effects are shared by both systems and are fully compliant with your design system.
But most importantly: your styling code, its motion and other effects are shared by both systems and are fully compliant with your design system.


## Get notified
Expand Down