Daisy Rees

Daisy Rees

1569912405

Why Is Nuxt.js the Best Choice for Your Next Web Application?

If you’re a Vue.js developer, by now you’ve probably heard of Nuxt.js. But you might not know what all the hype is about. You’re probably asking, “Why do I need a framework for a framework?” Vue already makes the development of JavaScript apps easier. What’s the idea behind Nuxt.js?

In this article, we’ll cover the 10 reasons why you might want to use it in your next project.

Why Is Nuxt.js the Best Choice for Your Next Web Application

What is Nuxt.js?

Nuxt.js is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps.

Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development. The goal with Nuxt is for it to be flexible enough for you to use as a main project base. Because most of what Nuxt does happens during the development phase, you get a lot of features with only a few extra kilobytes added to your JavaScript files.

Let’s explore the reasons why you might consider Nuxt for your next Vue project.

1. Create universal apps without the hassle

One of the biggest selling points of Nuxt.js is that it makes creating universal apps easier.

What is a universal app?

A universal app is used to describe JavaScript code that can execute both on the client and the server side.

Many modern JavaScript frameworks, like Vue, are aimed at building Single Page Applications (SPAs). There are a lot of advantages to having a SPA over a traditional website. For example, you can build very snappy UIs that update fast. But SPAs also come with disadvantages such as long load times, and Google struggles with them because there’s no content initially on the page to crawl for SEO purposes. All of the content is generated with JavaScript after the fact.

A universal app is about having an SPA, but instead of having a blank index.html page, you’re preloading the application on a web server and sending rendered HTML as the response to a browser request for every route in order to speed up load times and improve SEO by making it easier for Google to crawl the page.

Nuxt.js helps you write universal apps more simply

Building universal applications can be tedious because you have to do a lot of configuration on both the server side and client side.

This is the problem Nuxt.js aims to solve for Vue applications. Nuxt.js makes it simple to share code between the client and the server so you can focus on your application’s logic.

Nuxt.js gives you access to properties like isServer and isClient on your components so you can easily decide if you’re rendering something on the client or on the server. There’s also special components like the no-ssr component which is used to purposely prevent the component from rendering on the server side.

Lastly, Nuxt gives you access to an asyncData method inside of your components you can use to fetch data and render it on the server side.

That’s the tip of the iceberg of how Nuxt helps you with creating universal applications. Click here to learn more about what Nuxt offers for rendering Universal applications.

2. Statically render your Vue apps and get all of benefits of a universal app without a server

The biggest innovation of Nuxt comes with its nuxt generate command. This command generates a completely static version of your website. It will generate HTML for every one of your routes and put it inside of its own file.

For example if you have the following pages (Nuxt’s term for routes):

-| pages/
----| about.vue
----| index.vue

Nuxt will generate the following folder structure for you:

-| dist/
----| about/
------| index.html
----| index.html

The benefits to doing this are very similar to the benefits of universal applications. There’s markup there to make loading the page faster and to help search engine and social media crawlers crawl the website.

The difference is that you don’t need a server anymore. Everything gets generated during the development phase.

It’s powerful because you get the benefits of universal rendering without the need for a server. You can just host your app on GitHub Pages or Amazon S3.

Read more about this on the Static Genereated (Pre Rendering) section of the Nuxt.js docs.

3. Get automatic code splitting (pre-rendered pages)

Nuxt.js is able to generate a static version of your website with a special Webpack configuration.

For each route (page) that is statically generated, the route gets its own JavaScript file too, with just the code that’s needed to run that route.

This can really help with speed because it keeps the size of the JavaScript file small relative to your entire application’s size.

4. Setup via the command line with the starter template

Nuxt.js provides a starter template called starter-template that gives you all the scaffolding that you need to get started with a project with a good folder structure for organization.

Make sure you have vue-cli installed, and run the following command:

$ vue init nuxt-community/starter-template <project-name>

From there just cd into the application and run npm install and you should be good to go.

Click here to learn more about setting up a project with the command line.

5. Get great project structure by default

In many small Vue applications you end up managing the structure of the code as best as you can in multiple files. The default Nuxt.js application structure gives you a great starting point for organizing your application in an understandable way.

Why Is Nuxt.js the Best Choice for Your Next Web Application

Here are a few of the main directories that it sets you up with:

  • components — A folder so you can organize your individual Vue components.
  • layouts — A folder to contain your main application layouts.
  • pages — A folder to contain your app’s routes. Nuxt.js reads all the .vue files inside this directory and creates the application router.
  • store — A folder to contain all of your app’s Vuex Store Files.

Click here to learn more about all of the folder structures that Nuxt.js provides for you.

6. Easily set up transitions between your routes

Vue has a wrapper <transition> element that makes it simple to handle JavaScript animations, CSS animations, and CSS transitions on your elements or components.

If you need a refresher on Vue’s <transition> element and transitions in general, we wrote an article about them here.

Nuxt.js sets up your routes in such a way that each page gets wrapped in a <transition> element so you can create transitions between pages simply.

Click here to see an example of how Nuxt.js helps you with page transitions.

7. Easily write Single File Components

In many small Vue projects, components are defined using Vue.component, followed by new Vue({ el: ‘#container’ }) to target a container element in the body of every page.

This works well for small projects where JavaScript is only used to enhance certain views. But in bigger projects it can become difficult to manage.

All of these problems are solved by single-file components with a .vue extension. In order to use them, you have to set up a build process with tools like Webpack and Babel.

Here’s an example of a single-file .vue component

Why Is Nuxt.js the Best Choice for Your Next Web Application

Nuxt.js comes pre-configured out of the box with Webpack for you so you can start using .vue files without having to set up a complicated build process yourself.

To learn more about Single File Components visit the Vue documentation here.

8. Get ES6/ES7 compilation without any extra work

Alongside Webpack, Nuxt.js also comes pre-packaged with Babel. Babel handles compiling the latest JavaScript versions like ES6 and ES7 into JavaScript that can be run on older browsers.

Nuxt.js sets up Babel for you so all of the .vue files and all of the ES6 code that you write inside of the <script> tags compiles down into JavaScript that will work on all browsers.

Click here to learn more about Babel.

9. Get setup with an auto-updating server for easy development

Compared to setting up this process yourself or the change-refresh-change-refresh process that we web developers are used to, developing with Nuxt.js is a breeze. It sets you up with an auto-updating development server.

While you’re developing and working on those .vue files, Nuxt.js uses a Webpack configuration to check for changes and compiles everything for you.

You can run the command npm run dev inside of a Nuxt.js project and it will set up the development server.

Why Is Nuxt.js the Best Choice for Your Next Web Application

10. Access to everything in the Nuxt.js community

Lastly, there’s a GitHub collection called Nuxt Community that compiles helpful libraries, modules, starter kits, and more to make it even easier to create your app. Look through here to see if what you need is available before coding it yourself.

Why Is Nuxt.js the Best Choice for Your Next Web Application

To sum it all up

All of these features make the development of Vue.js apps a much nicer experience. Even if you don’t need a universal app and want to stick with an SPA, there are still benefits to using Nuxt.js. It can be your project’s main base with benefits like .vue files, ES6 compilation, and many more features.

#nuxt-js #vue-js #javascript #web-development

What is GEEK

Buddha Community

Why Is Nuxt.js the Best Choice for Your Next Web Application?

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

  • babashka >= 0.4.0
  • Clojure CLI >= 1.10.3.933
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

Rahim Makhani

Rahim Makhani

1626154510

Get the best web app that can fulfil your business needs

A web app is a type of app that can help you to represent your business. A web app is everything you need for your company’s growth because you can promote your business with its help. With its use, you can show the customers what products you have and come to know about your firm.

You can hire Nevina Infotech to develop your web app for your business. We are the most famous company for developing web apps because we also provide web application development services. We have a great team to work with to build your web app.

#web application development company #web application development services #web app development company #custom web application development company #web app development services #web application development agency

Rahim Makhani

Rahim Makhani

1621483980

Get the best web app for your Business FUTURE

The web app is application software that runs on the webserver. You can easily use the web app by searching it in the web browser through Google or any other search engine, or you can also add shortcuts of the web app to your smartphone.

Web app for your business helps you to reach new customers and enables them to know about your firm and the services you provide and can know about your organization’s feedback and rating. It can also help you with the advertisement of your app among all.

Do you want to develop a web app for your business? Then it would help if you collaborated with Nevina Infotech, which is the best web application development company that will help you develop a unique web app with the help of its dedicated developers.

#web application development company #web application development services #web app development company #custom web application development company #web app development services #custom web application development services

Rahim Makhani

Rahim Makhani

1626238039

Find the best web app development company for your Startup

A web app is the best way to promote their business for startups. You can’t verbally go and tell everyone to visit your company, but your website or web app can do that. A web app can represent your company, and the visitors who are visiting your website or web app will get knowledge about your firm. Doing this can help you to increase your customer rate.

Nevina Infotech is the best web app development company to choose for developing your web app for your startup. We have a great team of web developers to work with. Our developers are dedicated and enthusiastic in their work.

#web application development company #web application development services #web app development company #custom web application development company #web app development services #custom web application development services

Daisy Rees

Daisy Rees

1569912405

Why Is Nuxt.js the Best Choice for Your Next Web Application?

If you’re a Vue.js developer, by now you’ve probably heard of Nuxt.js. But you might not know what all the hype is about. You’re probably asking, “Why do I need a framework for a framework?” Vue already makes the development of JavaScript apps easier. What’s the idea behind Nuxt.js?

In this article, we’ll cover the 10 reasons why you might want to use it in your next project.

Why Is Nuxt.js the Best Choice for Your Next Web Application

What is Nuxt.js?

Nuxt.js is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps.

Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development. The goal with Nuxt is for it to be flexible enough for you to use as a main project base. Because most of what Nuxt does happens during the development phase, you get a lot of features with only a few extra kilobytes added to your JavaScript files.

Let’s explore the reasons why you might consider Nuxt for your next Vue project.

1. Create universal apps without the hassle

One of the biggest selling points of Nuxt.js is that it makes creating universal apps easier.

What is a universal app?

A universal app is used to describe JavaScript code that can execute both on the client and the server side.

Many modern JavaScript frameworks, like Vue, are aimed at building Single Page Applications (SPAs). There are a lot of advantages to having a SPA over a traditional website. For example, you can build very snappy UIs that update fast. But SPAs also come with disadvantages such as long load times, and Google struggles with them because there’s no content initially on the page to crawl for SEO purposes. All of the content is generated with JavaScript after the fact.

A universal app is about having an SPA, but instead of having a blank index.html page, you’re preloading the application on a web server and sending rendered HTML as the response to a browser request for every route in order to speed up load times and improve SEO by making it easier for Google to crawl the page.

Nuxt.js helps you write universal apps more simply

Building universal applications can be tedious because you have to do a lot of configuration on both the server side and client side.

This is the problem Nuxt.js aims to solve for Vue applications. Nuxt.js makes it simple to share code between the client and the server so you can focus on your application’s logic.

Nuxt.js gives you access to properties like isServer and isClient on your components so you can easily decide if you’re rendering something on the client or on the server. There’s also special components like the no-ssr component which is used to purposely prevent the component from rendering on the server side.

Lastly, Nuxt gives you access to an asyncData method inside of your components you can use to fetch data and render it on the server side.

That’s the tip of the iceberg of how Nuxt helps you with creating universal applications. Click here to learn more about what Nuxt offers for rendering Universal applications.

2. Statically render your Vue apps and get all of benefits of a universal app without a server

The biggest innovation of Nuxt comes with its nuxt generate command. This command generates a completely static version of your website. It will generate HTML for every one of your routes and put it inside of its own file.

For example if you have the following pages (Nuxt’s term for routes):

-| pages/
----| about.vue
----| index.vue

Nuxt will generate the following folder structure for you:

-| dist/
----| about/
------| index.html
----| index.html

The benefits to doing this are very similar to the benefits of universal applications. There’s markup there to make loading the page faster and to help search engine and social media crawlers crawl the website.

The difference is that you don’t need a server anymore. Everything gets generated during the development phase.

It’s powerful because you get the benefits of universal rendering without the need for a server. You can just host your app on GitHub Pages or Amazon S3.

Read more about this on the Static Genereated (Pre Rendering) section of the Nuxt.js docs.

3. Get automatic code splitting (pre-rendered pages)

Nuxt.js is able to generate a static version of your website with a special Webpack configuration.

For each route (page) that is statically generated, the route gets its own JavaScript file too, with just the code that’s needed to run that route.

This can really help with speed because it keeps the size of the JavaScript file small relative to your entire application’s size.

4. Setup via the command line with the starter template

Nuxt.js provides a starter template called starter-template that gives you all the scaffolding that you need to get started with a project with a good folder structure for organization.

Make sure you have vue-cli installed, and run the following command:

$ vue init nuxt-community/starter-template <project-name>

From there just cd into the application and run npm install and you should be good to go.

Click here to learn more about setting up a project with the command line.

5. Get great project structure by default

In many small Vue applications you end up managing the structure of the code as best as you can in multiple files. The default Nuxt.js application structure gives you a great starting point for organizing your application in an understandable way.

Why Is Nuxt.js the Best Choice for Your Next Web Application

Here are a few of the main directories that it sets you up with:

  • components — A folder so you can organize your individual Vue components.
  • layouts — A folder to contain your main application layouts.
  • pages — A folder to contain your app’s routes. Nuxt.js reads all the .vue files inside this directory and creates the application router.
  • store — A folder to contain all of your app’s Vuex Store Files.

Click here to learn more about all of the folder structures that Nuxt.js provides for you.

6. Easily set up transitions between your routes

Vue has a wrapper <transition> element that makes it simple to handle JavaScript animations, CSS animations, and CSS transitions on your elements or components.

If you need a refresher on Vue’s <transition> element and transitions in general, we wrote an article about them here.

Nuxt.js sets up your routes in such a way that each page gets wrapped in a <transition> element so you can create transitions between pages simply.

Click here to see an example of how Nuxt.js helps you with page transitions.

7. Easily write Single File Components

In many small Vue projects, components are defined using Vue.component, followed by new Vue({ el: ‘#container’ }) to target a container element in the body of every page.

This works well for small projects where JavaScript is only used to enhance certain views. But in bigger projects it can become difficult to manage.

All of these problems are solved by single-file components with a .vue extension. In order to use them, you have to set up a build process with tools like Webpack and Babel.

Here’s an example of a single-file .vue component

Why Is Nuxt.js the Best Choice for Your Next Web Application

Nuxt.js comes pre-configured out of the box with Webpack for you so you can start using .vue files without having to set up a complicated build process yourself.

To learn more about Single File Components visit the Vue documentation here.

8. Get ES6/ES7 compilation without any extra work

Alongside Webpack, Nuxt.js also comes pre-packaged with Babel. Babel handles compiling the latest JavaScript versions like ES6 and ES7 into JavaScript that can be run on older browsers.

Nuxt.js sets up Babel for you so all of the .vue files and all of the ES6 code that you write inside of the <script> tags compiles down into JavaScript that will work on all browsers.

Click here to learn more about Babel.

9. Get setup with an auto-updating server for easy development

Compared to setting up this process yourself or the change-refresh-change-refresh process that we web developers are used to, developing with Nuxt.js is a breeze. It sets you up with an auto-updating development server.

While you’re developing and working on those .vue files, Nuxt.js uses a Webpack configuration to check for changes and compiles everything for you.

You can run the command npm run dev inside of a Nuxt.js project and it will set up the development server.

Why Is Nuxt.js the Best Choice for Your Next Web Application

10. Access to everything in the Nuxt.js community

Lastly, there’s a GitHub collection called Nuxt Community that compiles helpful libraries, modules, starter kits, and more to make it even easier to create your app. Look through here to see if what you need is available before coding it yourself.

Why Is Nuxt.js the Best Choice for Your Next Web Application

To sum it all up

All of these features make the development of Vue.js apps a much nicer experience. Even if you don’t need a universal app and want to stick with an SPA, there are still benefits to using Nuxt.js. It can be your project’s main base with benefits like .vue files, ES6 compilation, and many more features.

#nuxt-js #vue-js #javascript #web-development