If you’re the one who still doesn’t know this term, an hybrid mobile application is a combination of HTML5/JavaScript/CSS code and some kind of native application wrapper (Cordova and PhoneGap). Typically, a wrapper framework, like PhoneGap, provides the native code which bridges a gap between the native side and a JavaScript API. This way, an application JavaScript code can perform native functions, for example taking a picture with the camera.

Apache Cordova (Phonegap)

Phonegap- One of the most popular cross—platform framework is Phonegap. The team behind Apache Cordova, the Adobe PhoneGap framework is an open source distribution of Cordova framework. The biggest advantage of using this framework is that a hybrid app developer can reuse existing web development skills and create an application by using HTML, CSS, and JavaScript for multiple platforms with a single codebase.

If you go through the core of Apache Cordova applications, you will find them using CSS3 and HTML5 in order to get easy access to underlying hardware such as the accelerometer, camera, and GPS. In fact, it can be extended with native plugins from JavaScript to add more functionalities, so that it can communicate directly between the native layer and HTML5 Page. Also, the plugins allow access to the device’s accelerometer, camera, compass, file system, microphone, and more.

Ionic (Built on Cordova)

Ionic- Ionic is a complete open-source SDK, powered by a massive world-wide community. Built on top of Angular.js and Apache Cordova, the framework provides tools and services for developing hybrid mobile apps. Almost all the apps are built with the help of web technologies like CSS, HTML5, and Sass and then easily distributed through native app stores. It may quite interest you to know that the community incorporates over 120 native device features like Bluetooth, HealthKit, Finger Print Auth, and more with Cordova/PhoneGap plugins and TypeScript extensions. No wonder, it’s been the most preferred framework for most of the developers. The simple collaboration with AngularJS turned out to be sufficient to harness the full potential of the framework.

Last but certainly not the least, Ionic offers a command line interface representing some awesome features, which can be further be integrated and more useful features like deep linking, AoT Compiling, Ionic Native.

Framework 7

Framework 7 is incredibly popular. It’s been around for a fairly long time, and has been used in production by a number of smaller companies.

Originally developed with only iOS in mind, Framework 7 has since expanded to Material Design as well. The themes for both platforms are excellently designed, meshing fairly well with native controls. The animations and gestures do feel a bit odd though, and I’m not sure why. As an added bonus, Framework 7 is designed to be extensible via. plugins, though the majority of them seem to be designed for plain vanilla usage, not for Vue.

It contains an absolutely massive selection of components, and quite a bit of documentation to go with them. However, it does not appear to support custom themes, at least not out-of-the-box. You may have to do it yourself with CSS overrides.

Framework 7 is a proven framework that provides just about everything you need for a hybrid web app.

However, Framework 7 prefers to use its own built-in libraries over allowing you to choose, instead opting to use its own routing and DOM management systems, and offers little in the way of themeing choices. If that’s fine with you, than go with it.

Xamarin

Xamarin is a Microsoft-owned San Francisco, a California-based software company founded in May 2011 which has cross-platform implementations of the Common Language Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET).

With a C# shared codebase, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms, including Windows and MacOS. Xamarin is the top hybrid mobile app development framework. It saves your time regarding re-utilizing abilities, tools, teams and the best significant part is code. You can influence the array of Xamarin and Android APIs as well as design an amazing experience for glass with the Android SDK and GDK.

React/React Native

• React.js is an open source Single Page Application (SPA) framework that allows web developers the ability to build large scale JavaScript applications for the browser. It composes common application requirements (such as rendering views) into a single framework that can be leveraged for productivity.
• React Native is an extension of react that removes browser specific features and introduces mobile specific knowledge. Facebook are key contributers to this project.

The framework isn’t tailored towards novice in the field of web development but certainly, presents a brighter side. React Native framework offers a couple of advantages such as native-like performance and vast community.

Conclusion

If you’re planning to create a mobile application, choosing the hybrid model will save you time and effort and you can reuse the code for creating a web application version too. Of course, the hybrid model is not the perfect solution for all problems, but hybrid apps are a good choice for deploying your app faster and for creating prototype applications, for example. These frameworks can surely provide you a user experience very close to a native application.

What is javascript ES6

• ES6 — also known as Harmony, es-next, ES2015 — is the latest finalized specification of the language
• The ES6 specification was finalized in June 2015, (hence ES2015)
• Future versions of the specification will follow the ES[YYYY] pattern, e.g ES2016 for ES7

What is Arrow Functions

Arrows are a function shorthand using the => syntax. They are syntactically similar to the related feature in C#, Java 8 and CoffeeScript. They support both statement block bodies as well as expression bodies which return the value of the expression. Unlike functions, arrows share the same lexical this as their surrounding code.

• Terse way to declare a function like param => returnValue
• Useful when doing functional stuff like [1, 2, 3].map(x => x * 2)
• You can’t name arrow functions statically, but runtimes are now much better at inferring names for most methods

  1 2	// e.g. var odds = evens.map(v => v + 1);

how to use Classes in ES6

ES6 classes are a simple sugar over the prototype-based OO pattern. Having a single convenient declarative form makes class patterns easier to use, and encourages interoperability. Classes support prototype-based inheritance, super calls, instance and static methods and constructors.

What is Template Strings(Template Literals)

Template strings provide syntactic sugar for constructing strings. This is similar to string interpolation features in Perl, Python and more. Optionally, a tag can be added to allow the string construction to be customized, avoiding injection attacks or constructing higher level data structures from string contents.

• You can declare strings with ` (backticks), in addition to " and '
• Strings wrapped in backticks are template literals
• Template literals can be multiline
• Template literals allow interpolation like `ponyfoo.com is ${rating}` where rating is a variable
• You can use any valid JavaScript expressions in the interpolation, such as `${2 * 3}` or `${foo()}`
• You can use tagged templates to change how expressions are interpolated
  • Add a fn prefix to fn`foo, ${bar} and ${baz}`
  • fn is called once with template, …expressions
  • template is ['foo, ', ' and ', ''] and expressions is [bar, baz]
  • The result of fn becomes the value of the template literal
  • Possible use cases include input sanitization of expressions, parameter parsing, etc.
• Template literals are almost strictly better than strings wrapped in single or double quotes
  e.g

  1 2	var name = "node.js", time = "today"; `hi${name}, how are you ${time}?`

How to use Multi-line Strings in ES6

In ES5, we had to use one of these approaches:

1

2

var hello = 'Welcome to \n'

 + 'http://top10webjs.com';

While in ES6, simply utilize the backticks:

1

2

var hello = `Welcome to 

 http://top10webjs.com`;

What is Destructuring Assignment in ES6

Destructuring in the ES6 refers to the use of patterns to effectively match values to variables or properties. It’s hard to describe in words, so an example using the more common array pattern should help:

1

2

3

4

5

6

7

8

// e.g. in ES5

var data = $('body').data(), // data has properties house and mouse

 house = data.house,

 mouse = data.mouse;

 

// In ES6, we can replace the ES5 code above with these statements:

// we'll get house and mouse variables

var { house, mouse} = $('body').data();

This also works with arrays. e.g.

1

2

var [col1, col2] = $('.column'),

 [line1, line2, line3, , line5] = file.split('\n')

Let v.s. Const

• let and const are alternatives to var when declaring variables
• let is block-scoped instead of lexically scoped to a function
• let is hoisted to the top of the block, while var declarations are hoisted to top of the function
• const is also block-scoped, hoisted, and constrained by TDZ semantics
• const variables must be declared using an initializer, const foo = 'bar'
• Assigning to const after initialization fails silently (or loudly – with an exception – under strict mode)
• const variables don’t make the assigned value immutable

  1 2 3 4 5 6 7 8 9 10 11 12 13

  function f() { { let x; { // okay, block scoped name const x = "sneaky"; // error, const x = "foo"; } // error, already declared in block let x = "inner"; } }

How to use Default Parameters

In ES6, we can simply supply default values for parameters in a function, like this:

1

2

3

function add(x=0, y=0) {

 return x + y;

}

Iterators + For..Of

Iterator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize for..in to custom iterator-based iteration with for..of. Don’t require realizing an array, enabling lazy design patterns like LINQ.

Map, Set, WeakMap, WeakSet

Efficient data structures for common algorithms. WeakMaps provides leak-free object-key’d side tables.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// Sets

var s = new Set();

s.add("hello").add("goodbye").add("hello");

s.size === 2;

s.has("hello") === true;



// Maps

var m = new Map();

m.set("hello", 42);

m.set(s, 34);

m.get(s) == 34;



// Weak Maps

var wm = new WeakMap();

wm.set(s, { extra: 42 });

wm.size === undefined



// Weak Sets

var ws = new WeakSet();

ws.add({ data: 42 });

// Because the added object has no other references, it will not be held in the set

what is Promises

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.
e.g.

1

2

3

4

5

6

7

8

9

10

11

12

13

function timeout(duration = 0) {

 return new Promise((resolve, reject) => {

 setTimeout(resolve, duration);

 })

}



var p = timeout(1000).then(() => {

 return timeout(2000);

}).then(() => {

 throw new Error("hmm");

}).catch(err => {

 return Promise.all([timeout(100), timeout(200)]);

})

New string functions in ES6

In ES6, the standard library has grown immensely. Along with these changes are new methods which can be used on strings, such as .includes() and .repeat(). e.g.

1

2

console.log("abcd".includes("abc")); // true

console.log("abc".repeat(3); // 'abcabcabc'

What is Proxy

Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc. e.g.

1

2

3

4

5

6

7

8

9

var foo= function () { return 'in foo()'; };

var handler = {

 apply: function (receiver, …args) {

 return 'in proxy';

 }

};



var p = new Proxy(foo, handler);

p() === 'in proxy';

What is Modules & Module Loaders

Language-level support for modules for component definition. Codifies patterns from popular JavaScript module loaders (AMD, CommonJS). Runtime behaviour defined by a host-defined default loader. Implicitly async model — no code executes until requested modules are available and processed.

Module loaders support:

• Dynamic loading
• State isolation
• Global namespace isolation
• Compilation hooks
• Nested virtualization
  The default module loader can be configured, and new loaders can be constructed to evaluate and load code in isolated or constrained contexts.

Tasklist

Tasklist displays a list of currently running processes on either a local or remote machine.

e.g. list all chrome processes

tasklist /FI “imagename eq chrome.exe”

e.g. takes the output displayed by tasklist and saves it to the process.txt file.

tasklist > process.txt

e.g. displays any currently running tasks that are using more than 50 MB of memory.
tasklist /fi “memusage gt 50000”

Tree

List file and folders in tree view.

1

2

3

4

5

ele.addEventListener('keypress', function(event) {

 if (event.key === "Backspace") {

 // Do something here

 }

});

For this javascript, if you test on PC, or android, it works fine. But if you run on iOS, including webview of iOS. You will find that the webview cannot get the key of the keyboard, e.g. “Backspace”. Quite strange.

But there is a workaround for it - Use “keyCode” instead of “key”; And the above code can write in this way:

1

2

3

4

5

ele.addEventListener('keypress', function(event) {

 if (event.key === "Backspace" || event.event.key === 8) {

 // Do something here

 }

});

OK, it works as expected!

Overview

• Amazon CloudWatch is the platform that monitors Amazon Web Services (AWS).
• Azure Monitor is Microsoft’s built-in monitoring service for the performance and health of Azure resources. At its most basic level, the model is similar to Cloudwatch: Azure Monitor consumes the telemetry data (performance and log data) that all Azure services generate and allows the user to visualize, query, route, archive, and take actions on the data.
• Stackdriver, Google’s offering for delivering cloud monitoring capabilities, differs from both Cloudwatch and Azure monitor in a number of ways. Firstly, Stackdriver embraces not only Google Cloud Platform (GCP) but also AWS, providing unified monitoring of the two cloud platforms. Google touts Stackdriver’s multi-cloud strategy and, given Amazon’s prominent standing, it certainly broadens Stackdriver’s appeal.

Stackdriver

Stackdriver also includes a development (DevOPs) component in addition to IT monitoring. However, while the IT Operations functionality spans both AWS and GCP, the DevOPs functionality is Google-centric. Stackdriver is able to troubleshoot deployments on the Google platform with tracing and debugging functionality, and offers capabilities such as:

• Stackdriver Monitoring measures the health of cloud resources and applications by providing visibility into metrics such as CPU usage, disk I/O, memory, network traffic and uptime. It is based on collectd, an open source daemon that collects system and application performance metrics. Users can receive customizable alerts when Stackdriver Monitoring discovers performance issues. It is used to monitor Google Compute Engine and Amazon EC2 VMs.
• Stackdriver Error Reporting identifies and analyzes cloud application errors. A centralized error management interface provides IT teams with real-time visibility into production errors with cloud applications, as well as the ability to sort and filter content based on the number of error occurrences, when the error was first and last seen, and where the error is located.
• Stackdriver Debugger inspects the state of an application, deployed in Google App Engine or Google Compute Engine, using production data and source code. During production, snapshots can be taken of an application’s state and linked back to a specific line location in the source code, without having to add logging statements. This inspection can occur without affecting the performance of the production application.
• Stackdriver Trace collects network latency data from applications deployed in Google App Engine. Trace data is gathered, analyzed and used to create performance reports to identify network bottlenecks. Trace API and Trace SDK can be used to trace, analyze and optimize custom workloads, as well.
• Stackdriver Logging provides real-time log management and analysis for cloud applications. Log data can be kept for longer periods of time by archiving it with Google Cloud Storage. The service works with both Google and AWS, and can gather logs from Google Compute Engine, Google App Engine and Amazon EC2.

Stackdriver Monitor

Stackdriver Monitoring collects metrics, events, and metadata from Google Cloud Platform, Amazon Web Services (AWS), hosted uptime probes, application instrumentation, and a variety of common application components including Cassandra, Nginx, Apache Web Server, Elasticsearch and many others. Stackdriver ingests that data and generates insights via dashboards, charts, and alerts.

Monitoring Agent

The Monitoring agent is a collectd-based daemon that gathers system and application metrics from virtual machine instances and sends them to Stackdriver Monitoring. By default, the Monitoring agent collects disk, CPU, network, and process metrics. You can configure the Monitoring agent to monitor third-party applications to get the full list of agent metrics.

Using the Monitoring agent is optional but recommended. Stackdriver Monitoring can access some metrics without the Monitoring agent, including CPU utilization, some disk traffic metrics, network traffic, and uptime information. Stackdriver Monitoring uses the Monitoring agent to access additional system resources and application services in virtual machine (VM) instances. If you want these additional capabilities, you should install the Monitoring agent.

Uptime Checks

Stackdriver can verify the availability of your service by accessing it from locations around the world. You can use the results from these uptime checks in your alerting policies, or you can directly monitor the results in the Stackdriver Monitoring uptime-check dashboards.

Alerting

Alerting gives timely awareness to problems in your cloud applications so you can resolve the problems quickly.

You use the Stackdriver Monitoring Console to set up alerting policies. Each policy specifies the following:

• Conditions that identify an unhealthy state for a resource or a group of resources.
• Optional notifications sent through email, SMS, or other channels to let your support team know a resource is unhealthy.
• Optional documentation that can be included in some types of notifications to help your support team resolve the issue.

When events trigger conditions in one of your alerting policies, Stackdriver Monitoring creates and displays an incident in the Stackdriver Monitoring Console. If you set up notifications, Stackdriver Monitoring also sends notifications to people or third-party notification services. Responders can acknowledge receipt of the notification, but the incident remains open until resources are no longer in an unhealthy state.

• var {foo} = pony is equivalent to var foo = pony.foo
• var {foo: baz} = pony is equivalent to var baz = pony.foo
• You can provide default values, var {foo='bar'} = baz yields foo: 'bar' if baz.foo is undefined
• You can pull as many properties as you like, aliased or not
  • var {foo, bar: baz} = {foo: 0, bar: 1} gets you foo: 0 and baz: 1
• You can go deeper. var {foo: {bar}} = { foo: { bar: 'baz' } } gets you bar: 'baz'
• You can alias that too. var {foo: {bar: deep}} = { foo: { bar: 'baz' } } gets you deep: 'baz'
• Properties that aren’t found yield undefined as usual, e.g: var {foo} = {}
• Deeply nested properties that aren’t found yield an error, e.g: var {foo: {bar}} = {}
• It also works for arrays, var [a, b] = [0, 1] yields a: 0 and b: 1
• You can skip items in an array, var [a, , b] = [0, 1, 2], getting a: 0 and b: 2
• You can swap without an “aux” variable, [a, b] = [b, a]
• You can also use destructuring in function parameters
  • Assign default values like function foo (bar=2) {}
  • Those defaults can be objects, too function foo (bar={ a: 1, b: 2 }) {}
  • Destructure bar completely, like function foo ({ a=1, b=2 }) {}
  • Default to an empty object if nothing is provided, like function foo ({ a=1, b=2 } = {}) {}

Overview

Having been using node.js for several years, I have something to share with you. Hope it will save your time.

Lock dependencies

Your code must be identical across all environments but amazingly NPM lets dependencies drift across environments be default — when you install packages at various environments it tries to fetch packages’ latest patch version. Overcome this by using NPM config files , .npmrc, that tell each environment to save the exact (not the latest) version of each package. Alternatively, for finer grain control use NPM” shrinkwrap”. *Update: as of NPM5 , dependencies are locked by default. The new package manager in town, Yarn, also got us covered by default

For team work, I suggest to check-in node modules into your source code (git/snv/etc). To make sure everyone and the production site using the same version of node modules. And another reason is that, some modules are downloaded from github. And it may be not exist anymore after servery month or years.

Keep Your Promises

Node 8 supports the long-awaited async and await keywords without opting in to experimental features. This feature builds on top of Promises allowing you to write asynchronous code that looks like synchronous code and has the same error handling semantics, making it easier to write, easier to understand, and safer.

You can write your callback in this way

1

2

3

4

5

async function getAlbums(() {

 const books = await getBooks();

 const albums = await getAlbums(books);

 return getPhotosForAlbums(albums);

}

Automate Your Code Formatting

We’ve all collectively spent too much time formatting code, adding a space here, aligning a comment there, and we all do it slightly different than our teammate two desks down. This leads to endless debates about where the semicolon goes or whether we should use semicolons at all.

You can use VSCode, which has the ability to format the code.

HTTPS all the things

As web engineers, there is no reason we shouldn’t default all traffic in our applications to using HTTPS. In an express application, there are several things you need to do to make sure you’re serving your site over https.

Be stateless

Store any type of data (e.g. users session, cache, uploaded files) within external data stores. Consider ‘killing’ your servers periodically or use ‘serverless’ platform (e.g. AWS Lambda) that explicitly enforces a stateless behavior.

Otherwise, failure at a given server will result in application downtime instead of a just killing a faulty machine. Moreover, scaling-out elasticity will get more challenging due to the reliance on a specific server.

Set NODE_ENV production

Set the environment variable NODE_ENV to ‘production’ or ‘development’ to flag whether production optimizations should get activated — many NPM packages determining the current environment and optimize their code for production.

For example, Setting NODE_ENV to “production” makes Express:

• Cache view templates.
• Cache CSS files generated from CSS extensions.
• Generate less verbose error messages.

Useful Tools

IDE - VSCode

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).

yarn

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Yarn allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back, and when the problem is fixed, you can use Yarn to keep it all up to date.

e.g. Auto Clean

yarn autoclean
Cleans and removes unnecessary files from package dependencies.

An alternative tool is node-prune, a small tool to prune unnecessary files from ./node_modules, such as markdown, typescript source files, and so on.

This tool is written in go language. And there is also a npm package

npm install -g node-prune

e.g. running this tool

1

2

3

4

$ node-prune

files total 27,330

files removed 3,990

size removed 13 MB

webpack/ gulp/ grunt

These are all build tools. Suggest to use gulp for simple scenarios, and webpack for whole site management.

• webpack - Packs modules and assets for the browser.
• gulp - Streaming and fast build system that favors code over config.
• grunt - Task runner that can perform repetitive tasks like minification, compilation, unit testing, linting, etc.

Web

Web Frameworks

Express

Needless to say, Express is the best Web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications. Your first choice for web development.

Express provides a thin layer of fundamental web application features, without obscuring Node.js features that you know and love.

Restify

A Node.js web service framework optimized for building semantically correct RESTful web services ready for production use at scale. restify optimizes for introspection and performance, and is used in some of the largest Node.js deployments on Earth.

If you only want to write a API website, this is better than Express. And more focus on API.

Common Node.js Modules

underscore/lodash

These are two very useful javascript modules to help extend basic javascript usages. They are very similar, and you can choose one freely.
Underscore and Lo-Dash provide similar functionality. Lo-Dash’s API is a superset of Underscore’s. It provides everything that Underscore does, along with a few additional helper functions. Lo-Dash can generally serve as a drop-in replacement for Underscore with no changes; it works just fine with Backbone.

Lo-Dash answers that with a pretty extensive list on its site, but the claims really boils down to a few things:

• Usability Improvements
• Extra Functionality
• Performance Gains

winston

Multi-transport async logging library. Winston is designed to be a simple and universal logging library with support for multiple transports. A transport is essentially a storage device for your logs.

try/catch/throw/finally

Try-catch is a JavaScript language construct that you can use to catch exceptions in synchronous code. Use try-catch, for example, to handle JSON parsing errors as shown below.

• The try statement lets you test a block of code for errors.
• The catch statement lets you handle the error.
• The throw statement lets you create custom errors.
• The finally statement lets you execute code, after try and catch, regardless of the result.

Use a tool such as JSHint or JSLint to help you find implicit exceptions like reference errors on undefined variables.

Here is an example of using try-catch to handle a potential process-crashing exception. This code try to parse a string into json object.

1

2

3

4

5

6

7

var jsonStr = 'your json object in string';

try {

 var jsonObj = JSON.parse(jsonStr);

} catch (e) {

 // handle exception

 console.error(e);

}

However, try-catch works only for synchronous code. Because the Node platform is primarily asynchronous (particularly in a production environment), try-catch won’t catch a lot of exceptions.

The Error Object

JavaScript has a built in error object that provides error information when an error occurs.

The error object provides two useful properties: name and message.

• name: Sets or returns an error name
• message: Sets or returns an error message (a string)

Six different values can be returned by the error name property

• EvalError: An error has occurred in the eval() function
• RangeError: A number “out of range” has occurred
• ReferenceError: An illegal reference has occurred
• SyntaxError: A syntax error has occurred
• TypeError: A type error has occurred
• URIError: An error in encodeURI() has occurred

Functional programming produces programs by composing mathematical functions and avoids shared state & mutable data. Lisp (specified in 1958) was among the first languages to support functional programming, and was heavily inspired by lambda calculus. Lisp and many Lisp family languages are still in common use today.

Functional programming is an essential concept in JavaScript (one of the two pillars of JavaScript). Several common functional utilities were added to JavaScript in ES5.

• Pure functions / function purity.
• Avoid side-effects.
• Simple function composition.
• Examples of functional languages: Lisp, ML, Haskell, Erlang, Clojure, Elm, F Sharp, OCaml, etc…
• Mention of features that support FP: first-class functions, higher order functions, functions as arguments/values.