mercredi 21 juin 2017

How do I integrate client side and server side javascript?

I'm currently trying to learn how to create a website using a full javascript stack after previously using PHP/MySQL tech stacks. I'm familiar with javascript but I've only ever used it client side before.

To give some context, I'm looking to create a simple website that consumes the Riot Games API and basically displays the data and does various calculations with it. Nothing groundbreaking, it's mainly a project to teach myself how.

I decided to use Ember.js because I've dabbled with it before, but quickly learnt that you can't use the API with client side javascript. So, I've now got Node.js with express.js running and I've got it all set up and working in the backend, I've set up some routes to query the API and get responses.

I want to now integrate this with an Ember.js frontend, but I'm unsure what the best way to do this is. I've read this guide but it specifically states to (from my understanding) use Ember.js for your router and forward all requests through express.js to it:

// app/routes.js

 module.exports = function(app) {
        app.get('*', function(req, res) {
            res.sendfile('./public/index.html'); // load our public/index.html file
        });
};

Currently my router looks a bit like this:

// app/routes.js
var routes = require('./routes/routes');
app.use('/api', routes);

// app/routes/routes.js
var router = require('express').Router();
var lol = require('lol-js');
var riot = lol.client({
    apiKey: 'APIKEY',
    cache: null
});

// Example route
router.route('/summoner/:region/:summoner_name').get(function(req,res) {
    var summonerName = [req.params.summoner_name];
    var summoner = riot.getSummonersByName(req.params.region, summonerName, function(err, data) {
        res.json(data);
      }
    });
});

module.exports = router;

I require a couple Node.js modules in my router, but if I forward all responses to the Ember.js router like the guide I linked suggests, how would I be able to access and use Node.js modules, like lol-js (a library for using Riot Games API) from it? I'm also a bit unclear whether I should use ember-cli to create a new Ember project in the root folder or the public folder.

I have been out of the web development loop for about a year at this point, so all suggestions are welcome, including if this is a bad design or even if my chosen tech stack is old or there are better alternatives. I say this because I did also find this pre-built MEEN tech stack but didn't use it because it has been deprecated in favour of something else.




Aucun commentaire:

Enregistrer un commentaire