YiXu Zhang

YiXu Zhang

1620354454

Reducing HTML Payload With Next.js (Case Study)

This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.

I know what you are thinking. Here’s another article about reducing JavaScript dependencies and the bundle size sent to the client. But this one is a bit different, I promise.

This article is about a couple of things that Bookaway faced and we (as a company in the traveling industry) managed to optimize our pages, so that the HTML we send is smaller. Smaller HTML means less time for Google to download and process those long strings of text.

Usually, the HTML code size is not a big issue, especially for small pages, not data-intensive, or pages that are not SEO-oriented. However, in our pages, the case was different as our database stores lots of data, and we need to serve thousands of landing pages at scale.

You may be wondering why we need such a scale. Well, Bookaway works with 1,500 operators and provide over 20k services in 63 countries with 200% growth year over year (pre Covid-19). In 2019, we sold 500k tickets a year, so our operations are complex and we need to showcase it with our landing pages in an appealing and fast manner. Both for Google bots (SEO) and to actual clients.

In this article, I’ll explain:

  • how we found the HTML size is too big;
  • how it got reduced;
  • the benefits of this process (i.e. creating improved architecture, improving ode organization, providing a straightforward job for Google to index tens of thousands of landing pages, and serving much fewer bytes to the client — especially suitable for people with slow connections).

#html #web-development #next

What is GEEK

Buddha Community

Reducing HTML Payload With Next.js (Case Study)

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

YiXu Zhang

YiXu Zhang

1620354454

Reducing HTML Payload With Next.js (Case Study)

This article showcases a case study of Bookaway’s landing page performance. We’ll see how taking care of the props we send to Next.js pages can make loading times and Web Vitals better.

I know what you are thinking. Here’s another article about reducing JavaScript dependencies and the bundle size sent to the client. But this one is a bit different, I promise.

This article is about a couple of things that Bookaway faced and we (as a company in the traveling industry) managed to optimize our pages, so that the HTML we send is smaller. Smaller HTML means less time for Google to download and process those long strings of text.

Usually, the HTML code size is not a big issue, especially for small pages, not data-intensive, or pages that are not SEO-oriented. However, in our pages, the case was different as our database stores lots of data, and we need to serve thousands of landing pages at scale.

You may be wondering why we need such a scale. Well, Bookaway works with 1,500 operators and provide over 20k services in 63 countries with 200% growth year over year (pre Covid-19). In 2019, we sold 500k tickets a year, so our operations are complex and we need to showcase it with our landing pages in an appealing and fast manner. Both for Google bots (SEO) and to actual clients.

In this article, I’ll explain:

  • how we found the HTML size is too big;
  • how it got reduced;
  • the benefits of this process (i.e. creating improved architecture, improving ode organization, providing a straightforward job for Google to index tens of thousands of landing pages, and serving much fewer bytes to the client — especially suitable for people with slow connections).

#html #web-development #next

Shardul Bhatt

Shardul Bhatt

1620797149

Python for Freight Forwarding: Proven Case Study for Logistics Company

Python is a popular web development language for enterprise and customer-centric applications. It is one of the top programming languages, according to TIOBE’s index. It has applications in web development, Machine Learning, Data Science, and other domains. The versatility of Python web development makes it the perfect language for applications in every project.

Amidst the hundreds of languages for web application development, Python stands out. It is powerful, scalable, and easy-to-learn. Python’s capabilities are useful in every sector — technology, FinTechHealthTechfreight forwarding industry, and more. The core functionality of Python takes care of all the programming tasks for every feature that needs to be added.

In this article, we will focus on the major aspects of Python that make it suitable for web applications of all kinds. We will then highlight the proficiency of Python using a proven case study that Python developers at BoTree have built. It is a freight forwarding software for international logistics service provider that uses Python in the main technology stack.

Checkout Top 10 real-world Python Use Cases and Applications

Let’s look at the case study and capabilities of Python in detail.

Why choose Python for Web Development

Python is now the first choice for web development, Unlike Ruby on Rails, it offers more flexibility in the process, Here are a few reasons why companies should choose Python for web development -

  • Readable: Python has an easily readable syntax. It is similar to the english language. Python developers admire the programming language as it is easy to read, write, and understand. You don’t have to write additional code to express concepts with ease. The emphasis on code readability, which enables you to maintain and update the code.
  • Multi-programming paradigms: Like all the other object-oriented and open-source programming languages, Python supports multi-programming paradigms. There’s a dynamic type system and automatic memory management. It simplifies the process of building large and complex enterprise scale applications.
  • Scalable: Python is highly scalable. Because of its in-built capabilities to minimize the errors during the development process, it is perfect for freight forwarding software solutions that require processing bills at a huge scale. It is also suitable for enterprise dashboards and other applications that need to handle massive server requests at once.
  • Versatile: Python is a heavily versatile programming language. It has diverse applications in various domains, including statistical analysis, numerical computations, data analytics and more. Companies can use it for web development or Machine Learning applications. Today, Python plays a crucial role in building data science models and intelligent algorithms.
  • Library
    One of the biggest reasons to choose Python is because of its library set. Python has libraries for almost everything — there’s TensorFlow, Selenium, Apache Spark, Requests, Theano, Py Torch and many more. The libraries enable adding functionalities and features, simplifying the process of building high-quality web applications.

Checkout Top Python Libraries for Data Science to use in 2020

As Python grows in popularity, its community also grows. There are more developers than any other programming language. They provide support for different development problems, support, and training for multiple projects.

Let’s look at a proven case study by BoTree Technologies that showcases Python’s capabilities in web development.

Python: Proven Case Study of a Logistics Company

At BoTree, we use Python development services for building dynamic web applications. Today we will discuss a case study on the freight forwarding services industry. We developed it using Python and other technologies. Let’s understand it better.

About the Case Study

We designed the freight forwarding software for a leading international logistics services provider. The system we created would collect the information from different freight forwarding websites using bill of lading or the container number. The information is then entered into the centralized system automatically for better management of the freight.

The main challenge was the manual processing of bills of lading. The information had to be gathered from a large number of websites. Each website had hundreds and thousands of bills. The manual process was lengthy and time-consuming. Because the freight forwarding companies were based out of different geographical locations, the client also faced language barriers while processing the B/L.

Our Technology Stack

The technology stack to add freight forwarding features was simple and powerful. We used Python, Postgresql, AWS SQS, EC2m, Puppeteer and Virtual Private Cloud. We offered web development, software testing, and continuous support and maintenance.

The technology stack we used was focused on simplifying the complications in the freight forwarding system. Because the solution had to be scalable, Python was the probably choice for building the web application.

Our Solution

We built a fully server-les architecture. It performs the mapping of the websites and analyzes the different fields for assessing the required details in freight forwarding.

The solution parses data from different websites and matches the fields with the required information. It also takes into account previously parsed data for making the decision.

The collected information is structurally arranged into a format. The entire data system is then pushed back to a centralized ERP system. All the data is accumulated at a single place, making it easier to process the B/L without any hassle.

The freight forwarding solution consisted of the following features built using Python -

Core Features

  • B/L Processing: The system could easily parse 15000 B/L in a single day.
  • Efficiency delivery: The process became efficient by 30% for processing the B/L.
  • Activity log maintenance: There’s a proper record of all the records that take place in the system.
  • Multiple languages: The freight forwarding software could easily parse B/L in different languages.

Conclusion

Python is a powerful programming language for enterprise-grade applications. Logistics companies heavily benefit from investing in freight forwarding solutions. Shipping systems are essential for managing the timely delivery of products and services. An internal system for B/L processing can enable you to reap the benefits of swift deliveries.

BoTree Technologies is a custom software development company that has Python experts who can build quality applications for enterprises. We have experience in the logistics, healthcare, fintech, education, and multiple other industries.

Connect with us today for a FREE CONSULTATION in the next 24 hours!

Originally published at https://www.botreetechnologies.com on May 11, 2021.

#python case study for logistics company #b/l processing system #freight forwarding case study #logistics case study #case study for logistics company #python web development

Eva  Murphy

Eva Murphy

1625674200

Google analytics Setup with Next JS, React JS using Router Events - 14

In this video, we are going to implement Google Analytics to our Next JS application. Tracking page views of an application is very important.

Google analytics will allow us to track analytics information.

Frontend: https://github.com/amitavroy/video-reviews
API: https://github.com/amitavdevzone/video-review-api
App link: https://video-reviews.vercel.app

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #js #react js #react #next #google analytics

Ashish parmar

Ashish parmar

1604480711

Case study on mobile app; DreamG

Dream-G application will allow user to chat, voice calls and video calls to random people through the mobile application. The User can create a profile and perform all these actions in addition to searching for a person using their name.

Client Requirement
The client came with the requirement of developing a unique mobile application for users to chat with others and make voice and video calls. Furthermore, the user should be able to subscribe to the plan by paying a certain amount.

App Features and Functionalities
The User can see the list of the people and able to view the profile of a particular person and able to chat, voice call, and video call.
The user can see the list of entertainers and can chat, Voice call and Video call them.
User can search for any person by entering the name.
Through the chat option, the user can see the past history of the chat with all the users. The user can also open any chat and again send messages.
The user can see the profile details and able to edit or modify the profile photo, name, and other details. The user can see the call log details.
The user can see the number of coins available with them and through these coins, the user will able to make voice and video calls.
The user can purchase the plan listed in the application according to the requirements, and will be able to chat with the people.
The User can refer the mobile application to other people and earn rewarding coins.

Challenges
To create a unique user experience for the Chat, Voice, and Video Calls.

Technical Specification & Implementation
Integration with the payment Gateway
Android: Android Studio with Java
Solution
We successfully developed and implemented the Dream-G mobile application through which the user will able to chat, voice call, and video call to other people. The user will also be able to purchase the subscription plan and refer the application to other people.

Read more: https://www.prismetric.com/work/dreamg-app/

#case #study #case-study-on-mobile-app #mobile-app-case-study