I just have a general question for Javascript. If I have to invoke two services for a UI and those two services calls have their own call backs, but UI template has to be rendered only after both the callbacks have finished execution, what should be the best Javascript practice to do it?
invokeServices() {
invokeService1(param1, param2, svcCallback1);
invokeService2(param1, param2, svcCallback2);
//where to render the template???
}
function svcCallback1 (){
//where to render the template???
}
function svcCallback2 (){
//where to render the template???
}
This post might help: Marko vs React: An In-depth Look. Specifically, look for the section on Async for how to use promises and the <await/> tag to delay rendering until all the data is present.
import fsp from 'fs-promise';
$ var filePath = __dirname + '/hello.txt';
$ var readPromise = fsp.readFile(filePath, {encoding: 'utf8'});
<await(helloText from readPromise)>
<p>
${helloText}
</p>
</await>
1. Track Completion of Callbacks
function invokeServicesAndRender() {
let remaining = 2;
let service1Data;
let service2Data;
invokeService1(param1, param2, (err, data) => {
service1Data = data;
if (!--remaining) done();
});
invokeService2(param1, param2, (err, data) => {
service2Data = data;
if (!--remaining) done();
});
function done() {
// all data is here now, we can render the ui
}
}
2. Promisify and use Promise.all
Node has a built-in method to promisify callbacks: util.promisify
const promisify = require('util').promisify;
const promiseService1 = promisify(invokeService1);
const promiseService2 = promisify(invokeService2);
function invokeServicesAndRender() {
Promise.all([
promiseService1(param1, param2),
promiseService2(param1, param2),
]).then(([service1Data, service2Data]) => {
// all data is here now, we can render the ui
});
}
3. If you're using Marko, render immediately and pass promises to the template
I see you tagged this question marko, so I'll mention that with Marko it is recommended to begin rendering immediately and only wait to render chunks that actually need the data. This allows you to flush out content to the user faster.
const promisify = require('util').promisify;
const promiseService1 = promisify(invokeService1);
const promiseService2 = promisify(invokeService2);
function invokeServicesAndRender() {
let service1DataPromise = promiseService1(param1, param2);
let service2DataPromise = promiseService2(param1, param2);
template.render({ service1DataPromise, service2DataPromise });
}
In your template you can use the <await> tag to wait for the data where it is needed:
<h1>Hello World</h1>
<p>this content gets rendered immediately</p>
<await(service1Data from input.service1DataPromise)>
<!-- render content here that needs the service data -->
</await>
Related
I'm trying to get more familiar with best practices in NodeJS. Currently, I have a asynchronous function that scrapes some data off a website and stores the values retrieved in an object. What I would like to do, is use the value in a different function to extract data from Yahoo Finance to retrieve specific values. I am unsure how to pass in this value to the other functions. I'm thinking possibly setting the value, that is passed in to to other functions, as a global variable. Would that be best practice in the NodeJS world of programming? Any opinions or advice would helpful. Below is the code I currently have:
const cheerio = require('cheerio');
const axios = require("axios");
async function read_fortune_500() {
try {
const { data } = await axios({ method: "GET", url: "https://en.wikipedia.org/wiki/List_of_S%26P_500_companies", })
const $ = cheerio.load(data)
const elemSelector = '#constituents > tbody > tr > td:nth-child(1)'
const keys = ['symbol']
$(elemSelector).each((parentIndex, parentElem) => {
let keyIndex = 0
const stockObject = {}
if (parentIndex <= 9){
$(parentElem).children().each((childIndex, childElem) => {
const tdValue = $(childElem).text()
if (tdValue) {
stockObject[keys[keyIndex]] = tdValue
}
})
console.log(stockObject)
}
})
} catch (err) {
console.error(err)
}
}
async function getCurrentPrice() {}
read_fortune_500()
Sounds more like a JavaScript question then a NodeJS specific question.
NodeJS: I would say you can store the result of scraping the website in session data. Or pass it along in the response and call next(). Or create some middleware to scrape the website before calling the Yahoo route.
Javascript: You can call a async function to scrape the data on your site and await the response. once it is done you can call your next function passing the data retrieved from async result. See below for basic example.
async function scrapeWebsite(){
let webScrapeReults;
// logic to scrape site
return webScrapeReults;
}
function getYahooMarket(){
let results;
let webData = await scrapeWebsite();
// use webData to get reults for yahooMarket
return results;
}
Setting up a node.js app to retrieve order(s) information from shopify. I'm trying to store that data and run some logic, but I can't seem to get a hold of it.
THIS WORKS:
shopify.order.list()
.then(function(orders){
console.log(orders);
});
THIS DOES NOT WORK:
var orders_json;
shopify.order.list()
.then(function(orders){
orders_json=orders;
//console.log(orders);
});
console.log(orders_json); //returns undefined
Let me introduce you to the world of async/await. As long as you declare your function as async and the function you are "awaiting" returns a promise, you can handle this in a more synchronous way. Have a look at the docs linked above. Notice how I called the async function after it was declared. You can't call await outside the scope of an async function.
async function fetchOrders() {
try {
const orders_json = await shopify.order.list();
// do stuff with orders_json
return orders_json;
} catch(err) {
// handle err
}
}
const orders = fetchOrders();
I love generators in nodejs. They help nodejs look more like server-side code. I'm trying to use generators with my Sails app. This is my controller and it works when I visit 'get /hi':
/**
* FooController
*
* #description :: Server-side logic for managing foos
* #help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
module.exports = {
hi: function (req, res){
return res.send("Hi there!");
}
};
However when I change that hi action to a generator function...
module.exports = {
hi: function* (req, res){
return res.send("Hi there!");
}
};
this action never gets to return the response. Like it's waiting for something. How does one utilize ES6 generators within SailsJS controllers and in-fact all of Sails?
You can use it, in fact it'll be great if we all use this style, it adds a lot of readability and flexibility in your code (no more callback-hell), but that is not the way to use it.
As #Cohars stated, sails expect a function as controller actions, you can't pass a generator like in Koa, but that does not prevent you from using them, the thing is that a generator by itself is very useless, you need a function that calls it and iterates it and i believe koa does this for you at framework level, but you have some options available to you at library level, like co or yortus/asyncawait/ which is what i use because node-fibers implemented as functions are way more flexible than es6 generators (though they are almost the same) and i'll show you why in a sec.
So here is how you use it:
First npm install co and require it in your controller, or add it as a global in config/bootstrap.js since you will be using it a lot. Once you are done with it, you can use it in your controllers.
module.exports = {
hi: function(req, res){
co(function* (){
// And you can use it with your models calls like this
let user = yield User.findOne(req.param('id'))
return res.send("Hi there" + user.name + "!");
})
}
};
That's it
Now if you rather use async/await, its pretty similar, it goes like this:
module.exports = {
hi: function(req, res){
async(function(){
// Since await is a function, you can access properties
// of the returned values like this which is nice to
// access object properties or array indices
let userName = await(User.findOne(req.param('id'))).name
return res.send("Hi there" + userName + "!");
})();
}
};
There is a caveat though, if you call other methods of you controller via this, remember that they will refer to the generator fn or the passed regular fn if you use async/await, so be sure to save its context, or since you are already using es6 syntax, you can use fat arrows with async/await, unfortunately not with co, since there is not fat arrow version of generators (..yet?)
So it'll be like this:
module.exports = {
hi: function(req, res){
async(() => {
let params = this._parseParams(req);
let userName = await(User.findOne(params.id)).name
return res.send("Hi there" + userName + "!");
})();
},
_parseParams: function(req){
let params = req.allParams()
// Do some parsing here...
return params
}
};
I've been using the second method for months now, and works perfectly, i've tried with co too and works as well, i just liked more the async/await module (and is supposed to be a little bit faster) and its a perfect match if you are using coffeescript since your sintax will be like do async => await User.find()
UPDATE:
I've created a wrapper that you can use if you use yortus async/await or check the source code and modify it to work with co or something else if you wish.
Here is the link https://www.npmjs.com/package/async-handler, is in alpha but i'm using on my own apps and works as expected, if not submit an issue.
With that the las example would look like this:
module.exports = {
hi: asyncHandler((req, res)->{
let params = this._parseParams(req);
let userName = await(User.findOne(params.id)).name
return res.send("Hi there" + userName + "!");
}),
_parseParams: function(req){
let params = req.allParams()
// Do some parsing here...
return params
}
};
With this handler you get the extra benefit of having async/promise errors to propagate correctly on sails if they are not caught by a try/catch
Sails expects a regular function here, not a generator. Maybe you could take a look at co, not sure it would really help with Sails though. If you really want to use generators, you should probably try Koa, which has several frameworks based on it
The way I am doing it is like this:
const Promise = require('bluebird');
module.exports = {
hi: Promise.coroutine(function* (req, res) {
let id = req.params('id'),
userName;
try {
userName = yield User.findOne(id).name;
}
catch (e) {
sails.log.error(e);
return res.serverError(e.message);
}
return res.ok(`Hi there ${userName}!`);
})
}
Works great. You just need to ensure any functions you call from your controllers return promises.
Put this code in your bootstrap.js, and every thing work like a charm!
var _ = require('lodash');
var coExpress = require('co-express');
sails.modules.loadControllers(function (err, modules) {
if (err) {
return callback(err);
}
sails.controllers = _.merge(sails.controllers, modules);
// hacking every action of all controllers
_.each(sails.controllers, function(controller, controllerId) {
_.each(controller, function(action, actionId) {
actionId = actionId.toLowerCase();
console.log('hacking route:', controllerId, actionId);
// co.wrap，generator => callback
action = coExpress(action);
sails.hooks.controllers.middleware[controllerId][actionId] = action;
});
});
// reload routes
sails.router.load(function () {
// reload blueprints
sails.hooks.blueprints.initialize(function () {
sails.hooks.blueprints.extendControllerMiddleware();
sails.hooks.blueprints.bindShadowRoutes();
callback();
});
});
});
i'm very familiar with the javascript console.log(), and the php_dump() functions that allows us to see what's in a variable, i want to know if there is some function like this in hogan.js that let us inspect the content of a variable.
add some method to your data and include it at the loctation you need to inspect the scope
var data = {
...
// your vars,
...
inspect: function () {
return function () {
console.log(this);
}
}
};
template.render(data);
anywhere you use {{inspect}} it will log the current render context in the console
I slightly modified it to add the function to the data packet that is passed to Hogan in a centralized position, which, in my code, is a function called render().
Thank you for this clever trick.
function render(template, data, destination) {
data.inspect = function() {
return function() {
console.log("inspect:")
console.log(this);
};
};
// localized strings
data.strings = app.strings;
var tmpl = Hogan.compile(template);
var content = tmpl.render(data);
document.querySelector(destination).innerHTML = content;
}
I'm trying to load and render additional views async and append them to the ItemView.
Simplified code - why is $el not defined in the require() block in render() - what am I missing here? Am I not using RequireJS properly, or Marionette, or just my inexperience with javascript?
What is the recommended way of doing this? It needs to be dynamic as additional section views could be available at runtime that I don't know about yet as registered by plugins.
define(['require','marionette', 'App', 'swig', 'backbone.wreqr','text!./settings.html'],
function (require,Marionette, App,Swig, Wreqr, settingsHtml )
{
var sectionViews = ['./settingscontent/GeneralView'];
var SettingsView = Marionette.ItemView.extend(
{
template: Swig.compile(settingsHtml),
commands: new Wreqr.Commands(),
initialize: function ()
{
this.commands.addHandler('save', function (options, callback)
{
callback();
});
Marionette.ItemView.prototype.initialize.apply(this, arguments);
},
render: function()
{
Marionette.ItemView.prototype.render.call(this);
var $el = this.$el;
var self = this;
require(sectionViews, function (View)
{
$el.find('div.tab-content').append(new View(self.model).render().$el);
// $el is not defined
// self != outer this - $el is an empty div
});
return this;
}
}
return SettingsView;
})
Why are you trying to overload itemview.render?
Why not use the built in onrender event
https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md#render--onrender-event
from that documentation :
Backbone.Marionette.ItemView.extend({
onRender: function(){
// manipulate the `el` here. it's already
// been rendered, and is full of the view's
// HTML, ready to go.
}
});
seems easier and more typical of marionette usage
You need to bind this inside the function to the SettingsView object. Something like:
render: function()
{
Marionette.ItemView.prototype.render.call(this);
var $el = this.$el;
var self = this;
require(sectionViews, _.bind(function (View)
{
...
}, this));
return this;
}
The local variables will not be visible inside the bound function. You can use this and this.$el safely however.