angular

Full-stack Javascript and next-generation web

Diep Nguyen

• 2 min read
Full-stack Javascript and next-generation web

Website basically is constructed by HTML, CSS and Javascript. Each of these elements plays a specified role, what called Separation of concerns. While HTML only displays element for browser to render, CSS adds styling to HTML page, and Javascript adds behavior. Without CSS or Javascript, the HTML still stands and work normally.

Dynamic web dynamically build webpage by merge server-side scripting language, with HTML markup. Each request from client browser, will create a HTTP connection to server, then server processed request, output data and return back to client. Note that: for example, I have the following configuration for Apache:

# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#
KeepAlive Off

#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
#
MaxKeepAliveRequests 100

#
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
#
KeepAliveTimeout 15

You can see that Apache is configured with maximum 100 alive requests, with every requests can have maximum 15 seconds timeout. It means: when user opens up home page of www.somesite.com, browser will use a HTTP connection to request for menu, header, navigation and so on. Then, if 20 seconds later, user wants to go to www.somesite.com/blog, another HTTP connection must be made, when server will return menu, header, navigation AGAIN! But only content of page is changed, so why must request for menu, header and so on? An AJAX request will resolve this problem by only make call to change only content of page, not full page. Javascript will send AJAX to server to get newly updated content, and properly update DOM content in browser based on returned result.

AJAX and full-stack

AJAX existed for years, but until now, AJAX just become most important part of a web app. Let’s talk about full-stack Javascript.

A web developer usually knows about HTML, CSS, Javascript and at least one server scripting language like PHP, Ruby or Java. Then they learn to use web framework like Laravel or Spring. Hmm so much. Full-stack Javascript now become available due to Google V8 and NodeJS, which allow web developer only need to master one language – Javascript. NodeJS with IO async design in mind can outperform Apache in many case. And Google V8 – Javascript engine inside NodeJS – is more powerful everyday.

Now we have components inside a full-stack application:

  • Database: We have MongoDB – leading NoSQL database
  • Server-side: We have NodeJS with Express
  • Client-side: We have AngularJS for front-end manipulation
  • Evenmore, others are rising: RequireJS, PhantomJS, Polymer which make new Web Standard become popular and available for all of us like Shadow DOM and Web Components.
  • Another approach is Dart, which compile Dart language into Javascript, and thus can be run on web, desktop, server and mobile as well.

And you can see they talk the same language: JSON. No more extraneous parsing code. You create JSON, save to database as JSON, return as JSON and binding using JSON too. All components are lightweight and open source, awesome again! NPM and bower can easily to be used as dependencies management for both client and server side.

Finally, you can have an overview for next generation web and web developer. CodenTrick will have a case study about how we create and build a mobile-first app using nearly full-stack Javascript for server-side. Stay tuned!