implementing Everlive in custom require scripts

[Rolf]

Hi All

I am having a bit of trouble implementing the Everlive SDK into my already existing project, in which I already use require and jquery.
I tried several ways of implementing, all resulting into errors with 'empty defines' or script errors according to require.

So this is what I use:

- require 2.1.15
- underscore 1.7.0
- everlive.all.min.js
- jquery 2.1.3
- backbone 1.1.2

and also some other scripts.

I am calling a require config file and cordova in the HTML like this:

 

<script src="js/vendors/require.js" data-main="./js/app/config/require-config.js" type="text/javascript"></script><br>    <script src="cordova.js" type="text/javascript"></script>

my require config file looks like this:

    baseUrl: './js',

    paths: {
        main: './app/main',
        underscore: './vendors/underscore-min',
        jquery: './vendors/jquery-2.1.3.min',
        backbone: './vendors/backbone-min',
        handlebars: './vendors/handlebars-v2.0.0',
        router: './app/routers/main-router',

    },

    shim: {
        underscore: {
            deps: [],
            exports: 'underscore'
        },
        jquery: {
            deps: ['underscore'],
            exports: 'jquery'
        },
        backbone: {
            deps: ['jquery'],
            exports: 'backbone'
        },
        router: {
            deps: ['backbone'],
            exports: 'router'
        },
        handlebars: {
            deps: ['backbone'],
            exports: 'handlebars'
        },
            deps: ['backbone'],
            exports: 'everlive'
        },
        main: {
            deps: ['everlive'],
            exports: 'main'
        }

    }

});

// Start the application.
require(['main']);

When I run this script I will see this in the console:
Error: Script error for: Everlive

And this is wat require has to say about this error: http://requirejs.org/docs/errors.html#scripterror
After this error the script will stop working and


Now I can't solve this issue, since I didn't create the Everlive script.

So I did download the SDK files seperately and tried to implement them. Just like explained here:
http://docs.telerik.com/platform/backend-services/development/javascript-sdk/introduction

First I tried this without the use of the require config:

<script src="js/reqwest.min.js"></script>
    <script src="js/rsvp.min.js"></script>
    <!-- script src="js/underscore.min.js"></script-->
    <script src="js/everlive.min.js"></script>
    <script src="js/kendo.data.everlive.min.js"></script>

As I already use underscore and load this with require, I don't need to implement underscore.

This however results into these errors:

- Error: Mismatched anonymous define() module  (rsvp.min.js)
- Error: Mismatched anonymous define() module: function (c){b(c)}
- Error: Load timeout for modules: underscore

Hence these are all errors comming from require.js

Then I tried this to see if these errors are still there if I load these before require:

<script src="js/reqwest.min.js"></script>
   <script src="js/rsvp.min.js"></script>

   <script src="js/vendors/require.js" data-main="./js/app/config/require-config.js" type="text/javascript"></script>
   <script src="cordova.js" type="text/javascript"></script>


   <!-- script src="js/underscore.min.js"></script-->
   <script src="js/everlive.min.js"></script>
   <script src="js/kendo.data.everlive.min.js"></script>

This will however result into these errors:
- Error: Mismatched anonymous define() module: function (i,h,f,g){return(b.Everlive=c(i,h,f,g))}
- Error: Script error for: Everlive

Both are issues within Everlive.min.js

I tried to implement everlive.min.js before I call require / underscore etc.
This results into an error for kendo.data.everlive.min.js:  Error: Mismatched anonymous define() module: function (c){b(c)}

I thought this might have something to do with not loading kendo.mobile.min.js so I placed this one into my html file.
Now I have two errors however:

kendo.mobile.min.js =             ReferenceError: jQuery is not defined
kendo.data.everlive.min.js =   Error: Mismatched anonymous define() module: function (c){b(c)}

As I am already using jQuery (using $) there is no need for Kendo to be calling jQuery.
Don't know how to fix this one, don't want to be using 2 versions of jquery for this.

Doing this will only result into the Kendo jQuery issue:

<script src="js/reqwest.min.js"></script>
    <script src="js/rsvp.min.js"></script>
    <script src="js/everlive.min.js"></script>
    <script src="js/kendo.mobile.min.js"></script>
    <script src="js/kendo.data.everlive.min.js"></script>

    <script src="js/vendors/require.js" data-main="./js/app/config/require-config.js" type="text/javascript"></script>
    <script src="cordova.js" type="text/javascript"></script>

Also when running something like: el = new Everlive();
there will be other issues, for instance because underscore is not loaded before everlive was loaded.

So this is also not a real solution.

So I am really out of ideas does anyone have a better solution for implementing Everlive when you are already using jquery, underscore and require?
















   

[Rolf]

So I placed all the scripts into my own require config:

require.config({

    baseUrl: './js',

    paths: {
        main: './app/main',
        underscore: './vendors/underscore-min',
        jquery: './vendors/jquery-2.1.3.min',
        backbone: './vendors/backbone-min',
        router: './app/routers/main-router',
        everlive: './everlive.min',
        reqwest: 'reqwest.min',
        rsvp: 'rsvp.min',
        jstz: 'jstz.min',
        kendoMobile: 'kendo.mobile.min',
        kendoData: 'kendo.data.everlive.min',
        push: 'push'

    },

    shim: {
        underscore: {
            deps: [],
            exports: 'underscore'
        },
        jquery: {
            deps: ['underscore'],
            exports: 'jquery'
        },
        backbone: {
            deps: ['jquery'],
            exports: 'backbone'
        },
        router: {
            deps: ['backbone'],
            exports: 'router'
        },
        reqwest: {
            deps: [],
            exports: 'reqwest'
        },
        rsvp: {
            deps: ['reqwest'],
            exports: 'rsvp'
        },
        jstz: {
            deps: ['rsvp'],
            exports: 'jstz'
        },
        everlive: {
            deps: ['underscore', 'jstz'],
            exports: 'everlive'
        },
        kendoMobile: {
            deps: ['jquery', 'everlive'],
            exports: 'kendoMobile'
        },
        kendoData: {
            deps: ['kendoMobile'],
            exports: 'kendoData'
        },
        main: {
            deps: ['kendoData'],
            exports: 'main'
        },
        push: {
            deps: ['jquery'],
            exports: 'push'
        }

    }

});

// Start the application.
require(['main']);

The app is almost functioning, and I mean almost.
When debugging the app in App Builder for Windows I can see this error after loading the kendo.data.everlive.min.js:

==>  GET file:///data/data/nl.hkv.push/files/12590FAA-5EDD-4B12-856D-F52A0A1599F2/js/Everlive.js 
==>  Uncaught Error: Script error for: Everlive
==>  Uncaught Error: Load timeout for modules: main


When I do not load the kendo.data.everlive.min.js I do not have these issues.
So if someone knows why this happens it would mean a lot!

[Rolf]

According to require:

This occurs when the script.onerror function is triggered in a browser.
This usually means there is a JavaScript syntax error or other execution
problem running the script. To fix it, examine the script that
generated the error in a script debugger.

Since Everlive.js is generated by kendo.data.everlive.min.js I cannot test the script.
Though it seems that there is an issue in the Everlive script generating errors.

I already removed the errors in kendo.data.everlive.js to see if it would help, but it didn't

[Anton Dobrev]

Hi Rolf,

The Everlive dependencies are explained here. Please, observe the order as well.

After fixing the Everlive dependencies and calling kendo.data.everlive.js when the app starts, everything should be working as expected.

For instance, here is the code you can add to your configuration:

require.config({

    paths: {

        'jquery': '../jquery',

        'kendo': '../Scripts/kendo/2014.3.1119/kendo.all.min',

        'underscore': '../everlive/src/underscore',

        'rsvp': '..//everlive/src/rsvp',

        'reqwest': '../everlive/src/reqwest',

        'kendo.data.everlive': '../everlive/src/kendo.data.everlive',

        'Everlive': '../everlive/src/everlive',

        'jstz': '../everlive/src/jstz'

    },

    shim: {

         

        'jquery': {

            exports: ['$']

        },
​

        'kendo': {

            deps: ['jquery']

        },

        'backbone': {

            deps: ['jquery']

        },

       "underscore": {

            exports: "_"

        },

        "Everlive": {

            deps: ["reqwest", "rsvp", "underscore", "jstz"],

            exports: "Everlive"

        },

        "kendo.data.everlive": {

            deps: ["Everlive"]

        }

    }

});

Note that RequireJS applies a great amount of caching of the modules context and sometimes changes in the configuration of the modules are not loaded as expected.

That is why I am suggesting here that you open the developer console and in the Elements tab - verify if you RequireJS is appending the dependencies properly in the <head> tag of the document. They should look like the following:

Copy Code

<!-- jQuery and Kendo/Backbone here -->

<!-- Everlive dependencies here -->

 

//

<!-- Main Everlive file here -->

<script src="path/to/everlive.min.js"></script>

 

<!-- The Everlive resource of the Kendo UI data source component -->

<script src="path/to/kendo.data.everlive.min.js"></script>

If needed require a given script at the start of the app.

I hope that this helps.

Regards,
Anton Dobrev
Telerik

 

 

[Rolf]

hey Anton,

do I need the kendo.all or is it ok to just use the kendo.mobile like in some examples is used?

[Rolf]

So this is what I have now,

<script src="js/vendors/require.js"></script>
<script src="require-config"></script>

<script src="reqwest"></script>
<script src="underscore"></script>
<script src="rsvp"></script>
<script src="jquery"></script>
<script src="jstz"></script>

<script src="Everlive"></script>
<script src="kendo"></script>
<script src="kendo.everlive"></script>
<script src="backbone"></script>

it seems that this does load. However using this:

'var el = new Everlive({
    apiKey: apiKey,
    scheme: scheme
});

el.push.register(pushSettings)
        .then(
        onDeviceIsRegistered,
        function(err) {
            alert('REGISTER ERROR: ' + JSON.stringify(err));
        }
    );

will result into an error on line 1040 of the Everlive.js script
=> "Uncaught TypeError: Cannot read property 'Promise' of undefined"
.
Looking into that is says

promise = new rsvp.Promise(function (resolve, reject) {

so rsvp is undefined, though it is loaded.
I re-arranged the scripts to this order:

- require
- underscore
- jqeury
- backbone

- kendo

- reqwest
- rsvp
- jstz

- everlive
- kendo.data.everlive

Mind you I do run this script on device ready, so this is not the problem...

Maybe you know why this might happen?

[Rolf]

found it!
the rspv.min.js file was corrupt. I downloaded the new version here:

http://rsvpjs-builds.s3.amazonaws.com/rsvp-latest.min.js

[Anton Dobrev]

Hello Rolf,

Thank you for reporting this. Indeed, I just managed to reproduce the issue explicitly when the JS SDK is used with the push notifications plugin. As a small token of appreciation, I upgraded your Telerik Points.

Please, let me know if you have further questions.

Regards,
Anton Dobrev
Telerik

 

 

[Rolf]

Sorry for the late reply. Thanks for the upgrade of the points.
I don't have any further questions