Those who were not able to attend our 4th Meteor Ho Chi Minh meetup at September 17th could find all about Multiplayer Game with Unity3D and Meteor – one of the main topics of the meetup – in this blog.

Before digging into every facet of this post, you are required to have a fairly good background of Meteor and Unity3D.

What is Unity3D?

Unity is a cross-platform game engine developed by Unity Technologies and used to develop video games for PC, consoles, mobile devices and websites. First announced only for OS X, at Apple’s Worldwide Developers Conference in 2005, it has since been extended to target 24 platforms.

What is Meteor JS?

Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.

If you are a Meteor-novice, no worries! You can discover more about this full-stack JavaScript platform for developing single-page, real time web and mobile apps at Meteor.com

Why we should use Meteor with Unity3D?

When using Meteor, launching a MVP in 3-4 weeks can be a reality. With JavaScript on back-end, plus smart packages, Meteor allows you to develop faster. You don’t need to have experience about implement TCP/IP, UDP or pure Socket for a Gaming Server. With collection and method we can easily implement Gaming Network Architecture like Latency Compensation, Client Prediction, Server Reconciling and other technique.

How to connect MeteorJS with Unity3D

A team in Los Angeles have developed a plugin that make a bridge between Unity3D and MeteorJS through Websocket and DDP. You can find it here https://github.com/hiddenswitch/Meteor-Unity. By using this plugin we can use almost Meteor API such as: login, method, collection, publish/subscription. The plugin is great in general but one thing, it hasn’t supported WebGL for Unity3D yet.

WebGL

You cannot use hiddenswitch plugin with Unity3d WebGL now. But we can use other way to interact it. Unity3d WebGL support 2 API that help calling from inside WebGL container to javascripton page outside and reserve.

• To call methods on GameObjects in your content from browser JavaScript, you can use the following code:

SendMessage ('MyGameObject', 'MyFunction', 'foobar');

• To calls a function in the web page that contains the WebGL Player.

Application.ExternalCallExternalCall calls functionName in the web page containing the WebGL player, passing the given arguments to it. Supported argument types are the primitive types (string, int, float, string) and arrays of such types. Any other objects are converted to string using ToString and passed as strings.

So, did you find some great information of your own in this blog? Do you have any questions? Let me know in the comments and we can discuss about it!

Introduction

As a Meteor developer, I believe that everyone who has worked with Meteor all had experience with Tracker, or at least used it through some kinds of interfaces like getMeteordata or createContainer which come with the react-meteor-data package.

However, not all people know how Tracker works its magic. In this post, I’m going to dig into every facet of this case as well as bring to you a little bit of background knowledge.

What Is Tracker?

Tracker is a Meteor’s core package, it is small but incredibly powerful library for transparent reactive programming in Meteor.

Using Tracker you have much of the power of Functional Reactive Programming FRPsystem without following FRP’s principles when implementing your application. Combined with Tracker-aware libraries, like Session/ReactiveVar/ReactiveDict, this lets you build complex event-driven programs without writing a lot of boilerplate event-handling code.

What Make It Great?

In a nutshell, it is reactivity. In my opinion, it is the strongest aspect of Meteor. Tracker helps us make our system work reactively both on client and server with ease. We do not have to learn any extra stuffs about reactive programming or functional programming to get started.

Just read the Tracker api and do the work then the magic happens. Or even some Meteor-novice who do not know a thing about Tracker, their code still work reactively. Do you know what am I talking about? It is good old Blaze (I say it’s old because I already moved to React for all new projects).

Blaze’s helpers are reactive natively because they use Tracker inside, if you put inside them a reactive data source then whenever that source changes those helpers will be recomputed and you get new data on the screen.

Let’s read some code and behold what I am talking about, if you are already familiar with Tracker, skip this part and move to the next section to inspect the magic.

// Set up the reactive code
const counter1 = new ReactiveVar(0);
const counter2 = new ReactiveVar(0);

const observeCounter = function() {
  Tracker.autorun(function() {
    const text = `Counter1 is now: ${counter1.get()}`;
    console.warn(text);
  });
  console.warn(`Counter2 is now: ${counter2.get()}`);
};

const computation = Tracker.autorun(observeCounter);

/*
Message on the console:
Counter1 is now: 0
Counter2 is now: 0
*/

// and now change the counter1's value
counter1.set(1);
/*
Message on the console:
Counter1 is now: 1
*/

counter2.set(3);
/*
Message on the console:
Counter1 is now: 1
Counter2 is now: 3
*/

counter1.set(7);
/*
Message on the console:
Counter1 is now: 7
*/

How Does Tracker Work?

Basically Tracker is a simple interface that lets reactive data sources (like counter in the example above) talk to reactive data consumers (the observeCounter function). Below is the flow of Tracker (I ignore some good parts to make it as simple as possible)

• Call Tracker.autorun with function F
• If inside F, there is a reactive data source named R, then that source will add F to its dependence list
• Then whenever the value of R changes, R will retrieve all its dependence from the dependence list and run them.

Everything is easier said than done. So, let’s take a look at the code:

const counter = new ReactiveVar(1);

  const f = function() {
    console.log(counter.get());
  };

  Tracker.autorun(f);

In the above code: counter is our reactive data source. It raises a question is that how can it know what function used inside to add that function as its dependence?

This is where the Meteor team does their trick to make this flow transparent. In fact, Tracker is an implementation of the Observer pattern or at least an Observer-liked pattern. Observer pattern can be used to create a reactive library like Tracker.

In an traditional implementation of Observer, we can think of F as an observer and R as a subject. R must have an interface to add F as its observer and notify/run F when its value changes. Something like this:

const counter = new Source();

  const f = function(val) {
    console.log(val);
  };

  counter.addObserver(f);

To imitate this, Tracker provides us these interface:

• Tracker.autorun
• Tracker.Dependency
• Tracker.Dependency.prototype.depend
• Tracker.Dependency.prototype.changed

Tracker.Dependency is the implementation of Subject in traditional Observer. All of reactive data source to use with Tracker use this object inside.

Let’s look at the basic implementation of ReactiveVar I use for examples above:

ReactiveVar = function (initialValue, equalsFunc) {
    if (! (this instanceof ReactiveVar))
      // called without `new`
      return new ReactiveVar(initialValue, equalsFunc);

    this.curValue = initialValue;
    this.equalsFunc = equalsFunc;
    this.dep = new Tracker.Dependency;
  };

  ReactiveVar.prototype.get = function () {
    if (Tracker.active)
      this.dep.depend();

    return this.curValue;
  };

  ReactiveVar.prototype.set = function (newValue) {
    var oldValue = this.curValue;

    if ((this.equalsFunc || ReactiveVar._isEqual)(oldValue, newValue))
      // value is same as last time
      return;

    this.curValue = newValue;
    this.dep.changed();
  };

So when we create a new instance of ReactiveVar, a Tracker.Dependency object will be created. This object will have two main functions: depend and changed with get call inside get and set function respectively.

This is the Tracker’s flow with more details:

Tracker.autorun will create a computation with the function (F) pass to it as the computation’s props.

// https://github.com/meteor/meteor/blob/devel/packages/tracker/tracker.js#L569-L585
  Tracker.autorun = function(f, options) {
    // ...
    var c = new Tracker.Computation(f, Tracker.currentComputation, options.onError);

    // ...

    return c;
  };

When being initiated, this computation is also set as the current computation inside a “global” variable named Tracker.currentComputation. And F will be run for the first time.

// https://github.com/meteor/meteor/blob/devel/packages/tracker/tracker.js#L146-L208
  Tracker.Computation = function(f, parent, onError) {
    // ...
    self._func = f;
    self._onError = onError;
    self._recomputing = false;

    var errored = true;
    try {
      self._compute();
      errored = false;
    } finally {
      self.firstRun = false;
      if (errored)
        self.stop();
    }
  };

  // https://github.com/meteor/meteor/blob/devel/packages/tracker/tracker.js#L302-L316
  Tracker.Computation.prototype._compute = function() {
    var self = this;
    self.invalidated = false;

    var previous = Tracker.currentComputation;
    setCurrentComputation(self);
    var previousInCompute = inCompute;
    inCompute = true;
    try {
      withNoYieldsAllowed(self._func)(self);
    } finally {
      setCurrentComputation(previous);
      inCompute = previousInCompute;
    }
  };

  // https://github.com/meteor/meteor/blob/devel/packages/tracker/tracker.js#L29-L32
  var setCurrentComputation = function(c) {
    Tracker.currentComputation = c;
    Tracker.active = !!c;
  };

If there is a .get operation (meaning .depend) inside body of F , this function will be run and set the current computation stored in the global var named Tracker.currentComputation as it’s dependent.

// https://github.com/meteor/meteor/blob/devel/packages/tracker/tracker.js#L403-L420
  Tracker.Dependency.prototype.depend = function(computation) {
    if (!computation) {
      // ...
      computation = Tracker.currentComputation;
    }
    var self = this;
    var id = computation._id;

    if (!(id in self._dependentsById)) {
      self._dependentsById[id] = computation;
      // ...
      return true;
    }
    return false;
  };

Then whenever .set is call (meaning .changed), F will be rerun

// https://github.com/meteor/meteor/blob/devel/packages/tracker/tracker.js#L428-L432
  Tracker.Dependency.prototype.changed = function() {
    var self = this;
    for (var id in self._dependentsById)
      self._dependentsById[id].invalidate();
  };

Yeah so it is the basic idea. Beyond this basic flow actually there are some other important things to be take care for to have a complete production-ready Tracker library. I am not going to write about those things, instead I will just name them. And you can go and check yourself for a deeper understanding of Tracker. They are:

• Tracker inside Tracker (computation inside computation)
• Clear stopped computations
• Prevent infinite loop

Takeaways

Here’s something we’ve discovered so far:

• Tracker make it possible to do reactive programming in Meteor
• It is an observer-liked implementation
• A good trick: use a “global currentComputation” to implement transparent Observer
• Those guys who wrote Tracker are awesome 😉

So, did you find some great information of your own in this blog? I would love to know your ideas in the comments below.

Meteor Deep Dive – Reactive Programming With TrackerAlso, don’t forget to help this post spread by emailing it to a friend, or sharing it on Twitter or Facebook if you enjoyed it. Thank you!

If you’ve been in the software development world over past few years, you can’t avoid noticing some new versions of important JavaScript frameworks.

Although there are a variety of options for modern developers to choose from a range of JavaScript framework out there, five of them stand out: Meteor.js, Angular.js, React.js, Ember.js, Backbone.js

Meteor.js

Meteor is no longer a new concept to those who study and work in IT section. Unlike other frameworks, Meteor is a smart and powerful tool that allows you build web and mobile application win one single language of JavaScript.

In term of programming, Meteor is described as an open-source and full-stack JavaScript platform that includes a key set of technologies for building reactive web and mobile applications. Meteor requires less code, so even though you are newbies to programming, you are able to build you own amazing app at lightning speed.

You can read more about Meteor at meteor.com

Angular.js

What is the most beloved JavaScript framework for building single page application? What is “the big daddy” in the JavaScript framework world? Needless to say, it’s the popular Angular. Released the first time in 2009, it was the baby of Google (which is convincing enough to use it). Till now, Angular ecosystem has grown beyond imagination.

Two-way data binding is a much loved feature of Angular.js because of its magic which automatically synchronizes the view and the model. Besides, it also includes some other useful features such as extending HTML vocabulary, client-side form validation, possibility to create custom DOM elements and more.

Dive deep into it at angularjs.org

React.js

Are you in love with Facebook and Instagram’s users interface? Let me unveil you a secret, React.js is the super hero standing behind and powering that user interface. Isn’t it cool?

Came out in 2013, it’s currently the hottest and the fastest of the bunch because of its implementation of a virtual DOM and synthetic event. Another thing developers love about React is that it’s much easier for developers with JavaScript experience to get a handle on.

Find more information about React at – facebook.github.io/react/

Ember.js

Another powerful MVC JavaScript framework is Ember.js. It was initially released in late 2011 as an open-source project by Yehuda Kats. Like Angularjs, Ember also rides on the principal of two way data binding.

Ember stands out with its simplicity and flow of functionality to make web development a smooth experience. Also, Ember community is quite big and active, so if you face any problem in your journey, you can ask them for help.

Learn more about Ember at – emberjs.com

Backbone.js

First released in 2010 by the Jeremy Ashkenas, , Backbone is a lightweight but full featured JavaScript framework.

Backbone stands amongst some of the most popular web development framework for JavaScript developer for two reasons – it’s easy to understand usability modules, as well as the very straightforward learning curve.

You can read more about Backbone at – backbonejs.org.

So, there you have it. I just highlighted the 5 best JavaScript Frameworks in this blog. I know that choosing a JavaScript framework might be a tough choice because there are tons of frameworks available on the market these days. I hope this post can help you determine the suitable framework for your projects.

Do you want to add some more names to the list? You can do so by mentioning the names of some more popular JavaScript frameworks in the comments box below.

It takes a village to build a store – either a virtual or physical one. Getting a commercial lease, recruiting a team of staff members, stocking up inventory and setting up long-term partnerships with warehouses are among the most concerned factors when setting up a physical store. Building a virtual store that is based on an e-commerce platform does not require any less effort than that is put in a brick-and-mortar establishment.

The swift-rising growth of e-commerce along with the increasing habit of online shopping among internet users over the past two years has added weight to the demand for setting up an e-commerce store as fast as possible. Articles such as “how to set up an online store in 15 minutes”, “how to automate the process of establishing your virtual store’s foundation”, “how to create your own handmade clothing store with Shopify free of hassle” has flooded the self-help section of google search.

Fast food, fast fashion, then fast business launching.

Now that a large quantity of online stores has risen to the surface, it is the quality of the virtual store that a business owner should take into serious account. Besides choosing the market segment, searching for the right suppliers and setting up a specific tone for the business personality, creating the appearance of your business also plays an important role in winning loyal customers.

Choosing the right e-commerce platform for your business is like deciding whether a full basement, a slab-on-grade or a crawlspace suits the architectural structure of your house. Does an optimal e-commerce platform for all kinds of businesses exist? Designveloper suggests five types of commerce platform as following:

Traditional platform

Kentico

Oracle platform

Traditional e-commerce platforms require you to invest intensively in your virtual website, from paying an annual subscription fee or license registration fee, for your website as a way of maintaining the online presence of your business. Since traditional platforms do not offer pre-existing features like open-source platforms, which we will discuss further in a minute, you as a business owner might need full-time assistance and operation from your teams of IT in order to customise and develop your website in a timely manner in accordance with the buyers’ shopping habits and the latest trends in website designing and development. Regarding what type of platform is the most suitable for your business, people at Designveloper are more than willing to provide you with professional advice.

Traditional e-commerce platforms could be slightly more cost-effective than traditional brick-and-mortar platforms thanks to the significant cost reduction in estate rent charges infrastructure costs and human resources, yet traditional costs like costs of input (products), warehousing (unless your business is trying out the drop-shipping business model), logistics and business taxes are pretty much still intact when it comes to business expenditure.

Open-source platform

Magento

If you as a new business owner prioritizes cost-efficiency, a large number of design options and more efficient control in hosting the website, plugins and website themes, an open-source commerce platform would be a perfect option for you. The majority of open-source platforms are always membership-charge free and constantly under development as developers of such platforms would update the current trends in e-commerce on a regular basis for free.

Business owners will never have to worry about falling behind the e-commerce trends in designing as innovative features are constantly added to the shopping experience of the customers, which in turn will increase engagement with online shoppers and further raise the likelihood of customers’ revisiting your virtual store. Such innovations being constantly updated on the open-source platforms are made thanks to the generous contribution of the community of developers.

However, there are always two sides of the same coin. An open-source e-commerce platform allows you to save time researching heavy subjects in programming and refreshing the appearance of your websites when you feel the need of giving your business a reboot. Yet the same platform could cost you more time in researching feature problems as there is little consistency in the foundation of the platform. You soon will find yourself in need of more intricate knowledge in website development. For instance, the final step including check-out and payment encounters technical glitches that fail your customers’ wish to buy a certain product and therefore, causing them to lose interest in making purchasing goods from your inventory. Such error cannot be mended quickly if you lack an advanced understanding of your own store foundation and have no professional developers as a part of your business staff. When such errors occur, you can contact Designveloper for the fastest development solutions and saves you time manhandling the problem by yourself.

Our designers suggest Magento if you are seeking an open-source platform for your virtual business. Prominent businesses that achieved significant success thanks to the operation based on open-source platforms are namely Amazon, IBM – International Business Machines Corporation (a New York-based multinational group, Ticketmaster – a California-based company specialised in ticket sales and distribution, and Wired (a monthly American magazine specialised in emerging technologies and how they affect culture, economy and politics).

Cloud platform

Demandware

Salesforce Commerce Cloud

Let’s go through the advantages of cloud-based platforms: low-cost entry, flexibility, constant updating, low support cost, real-time data tracking and so on. Cost efficiency is the most concerned factor any business owners would have to thoroughly consider at any stage of their business operation, from early set-up, store launching to maintenance. Thanks to the low entry cost of cloud platforms, an independent business owner can set up their own virtual store with a minimum cost of platform subscription and a limited number of SKUs that typically generate a satisfactory proportion of additional sales per month.

A cloud-based platform would allow business owners to be flexible in micromanaging the number of active vendors at any time – you can fish out or add up the number of vendors whether you wish to better control a certain number of vendor participants in your business or to scale up and increase the engagement of vendors to your business. Consequently, this will allow a solo entrepreneur to multiply the number of products and offer more to their targeted marketplace.

Constant travel to meet new potential clients and investors means business owners will have to manage their business operations remotely. This is when the real-time data tracking comes in handy for subscribers of cloud-based platforms. Instant access to your database of clients, vendors and transactions anywhere you and your team members wish to gain is a major game-changer for business owners who are always on the move.

The most efficient cloud-based platforms that Designveloper have chosen for our own customers are Demandware, Salesforce Commerce and Volusion. Marketing companies, data security groups, multinational companies (or global companies) and accounting companies are among businesses that benefit the most from using cloud-based platforms.

SaaS Platform

Another e-commerce platform that makes the list of plausible platform options for an owner of a virtual business is SaaS or service-as-a-service platform, one of the three primary fractions of cloud computing, along with IaaS (infrastructure as a service) and PaaS (platform as a service).

Similar to cloud platforms, SaaS platforms save virtual store owners from the hassle of installing and operating software applications on their personal computers and any computers. Thanks to SaaS platforms, the entire database of your business is uploaded and available on the internet. Given a steady internet connection, you and your staff members can gain access to your business software at any time, making sure you never run into the unfortunate scenario of data loss.

With a specific monthly subscription charge, SaaS platforms are frequently recommended by professional designers and website developers to businesses of various scales – small, medium and large. Businesses that hold a tight policy of non-disclosing customers’ data would also opt for SaaS platforms due to their outstanding features of security and system maintenance. Reassurance gained from a safe and secure system established on a SaaS platform would enhance trust between customers and service providers, creating trustworthy partnerships as a result.

Large enterprises such as Netflix, American Red Cross and Google G Suite are well-known for their upscale services thanks to the tight security feature offered by SaaS platforms.

Build your own

If none of the above commerce platforms catches your eye, you can also build your own customized store. However, since you are obliged to start from scratch if you decide to go all the way with the decision, there are costs that you have to bear in mind like website development, maintenance and new feature updating. It is highly recommended that you contract either internal or external human resources to develop a virtual website using such type of e-commerce platform. People at Designveloper are willing to help you with the DIY platform since it is our mission to carry out the best design-and-develop services to our customers.

Throughout our development projects since the beginning, there are common patterns in website building that we would like you as an entrepreneur of a virtual store to keep in mind when selecting an appropriate e-commerce platform:

• Choosing a platform that’s hard to keep track of;
• Redundant features;
• Having no clear objectives beforehand;
• Customizing the wrong way.

Contact Designveloper for professional advice when you have questions regarding the website development of your business.