Smalltalk › Amber Smalltalk

Using Firebase with Amber

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

16 messages Options

sergio_101

Using Firebase with Amber

Hi, all..

wondering if i could get some thought on this..

i am looking at writing an app using amber along with firebase, but i can't seem to figure out how to create an instance of firebase.

i installed it using bower, and updated my project to include firebase (updated files, and created AMD file).

in order to use firebase in regular javascript, you need to do a:

var Firebase = require("firebase"); <- to get a handle on firebase

and then:

ref = new Firebase('https://docs-examples.firebaseio.com/web/data'); <- make all calls against this.

i am trying to figure out how to work on this in the workspace, but i am having no luck..

any ideas?

thanks!

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: Using Firebase with Amber

sergio_101 wrote:

> Hi, all..
>
> wondering if i could get some thought on this..
>
> i am looking at writing an app using amber along with firebase, but i
> can't seem to figure out how to create an instance of firebase.
>
> i installed it using bower, and updated my project to include firebase
> (updated files, and created AMD file).
>
> in order to use firebase in regular javascript, you need to do a:
>
> var Firebase = require("firebase"); <- to get a handle on firebase

Not in AMD, there you should list it in dependency list of a module,
using the AMD module id you mapped it in .amd.json. In Amber it means,
list it in imports of the package that is going to use it, with a
variable to bind it to, like

imports: { 'firebaseVar' -> 'module/id/of/firebase' }

, save it and commit it.

> and then:
>
> ref = new Firebase('https://docs-examples.firebaseio.com/web/data'); <-
> make all calls against this.

as usual,

firebaseVar new: 'htt...ata'

should work.

> i am trying to figure out how to work on this in the workspace, but i am
> having no luck..
>
> any ideas?
>
> thanks!
>
>
> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to [hidden email]
> <mailto:[hidden email]>.
> For more options, visit https://groups.google.com/d/optout.

sergio_101

Re: Using Firebase with Amber

>
> imports: { 'firebaseVar' -> 'module/id/of/firebase' }
>
> , save it and commit it.

got it.. i will give this a go this evening.. thanks!

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

signature.asc (817 bytes) Download Attachment

Herby Vojčík

Re: Using Firebase with Amber

sergio ruiz wrote:
>> imports: { 'firebaseVar' -> 'module/id/of/firebase' }
>>
>> , save it and commit it.

... and reload. I forgot to say that imports are only applied when loading.

>
> got it.. i will give this a go this evening.. thanks!
>

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

sergio_101

Re: Using Firebase with Amber

hmm..

i am still stuck.. here's what i have done:

installed firebase with "bower firebase"
add a new file called firebase.amd.json in my project root with the contents:

{

"paths": {

"firebase": "firebase"

}

added the following to my imports: imports: {'firebaseVar' -> 'firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}
tried to do this in my workspace: firebaseVar new:'xxx' <- firebaseVar is undefined..

ideas?

thanks!

sergio_101

Re: Using Firebase with Amber

forgot to mention.. i restarted webdav AND reloaded the app on the browser side before working in the workspace..

Herby Vojčík

Re: Using Firebase with Amber

In reply to this post by sergio_101

sergio_101 wrote:

As you know (or should know to properly write .amd.json files, the key
is module id (which you used properly in the imports), and the second
part is path as in requirejs.config call, that is, path to .js file sans
ending .js. .amd.json files treat these paths relative to module they
describe, in this case, firebase. So question is, is path mapping
properly; that is, is firebase eactually in file
bower_components/firebase/firebase.js? Because that's what you said by
this line (bower_components/firebase being the root from which the path
is being resolved). If it is not (for example, it is in
dist/firebase.js), mapping should be "firebase": "dist/firebase")

> }
>
> }
>
> * added the following to my imports: imports: {'firebaseVar' ->
> 'firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}
> * tried to do this in my workspace: firebaseVar new:'xxx' <-
> firebaseVar is undefined..

Check you JS console in the browser. Does it show the error while
loading firebase module? Or check it yourself there, like

require(["firebase"], function (firebaseVar) {
console.dir(firebaseVar); })

yourself.

Also, not mentioned anywhere here, making .amd.json file is not enough;
you must also run 'grunt devel', which assembles config.js with all the
info scattered in all the .amd.json file and builds the.js using
config.js (and that is use actually configure as the loader in
index.html). Did you run it after you created firebase.amd.json? Because
without 'grunt devel' the .amd.json info is not taken into account.

> ideas?
>
> thanks!

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: Using Firebase with Amber

In reply to this post by sergio_101

sergio_101 wrote:

> hmm..
>
> i am still stuck.. here's what i have done:
>
> * installed firebase with "bower firebase"
> * add a new file called firebase.amd.json in my project root with the
> contents:
>
> {
>
> "paths": {
>
> "firebase": "firebase"
>
> }
>
> }
>
> * added the following to my imports: imports: {'firebaseVar' ->
> 'firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}
> * tried to do this in my workspace: firebaseVar new:'xxx' <-
> firebaseVar is undefined..

Oh, I also forgot one thing here. new: is for Smalltalk classes. To
create new instances of JS classes, #newValue:, #newValue:value: etc.
are used (for parameterless one, #new works for both).

Maybe it was just that.

>
> ideas?
>
> thanks!
>
> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to [hidden email]
> <mailto:[hidden email]>.
> For more options, visit https://groups.google.com/d/optout.

sergio_101

Re: Using Firebase with Amber

In reply to this post by Herby Vojčík

describe, in this case, firebase. So question is, is path mapping
properly; that is, is firebase eactually in file
bower_components/firebase/firebase.js? Because that's what you said by

yes, that is where my file lives.. i can cat that path and see the file..

Check you JS console in the browser. Does it show the error while
loading firebase module? Or check it yourself there, like

i get no errors regarding firebase, but i do get an error like:

boot.js:929 Uncaught TypeError: Cannot set property 'onbeforeunload' of null

where that function is:

function inContextWithErrorHandling(worker, setup) {

try {

return inContext(worker, setup);

} catch (error) {

handleError(error);

thisContext = null;

// Rethrow the error in any case.

error.amberHandled = true;

throw error;

}

require(["firebase"], function (firebaseVar) {
console.dir(firebaseVar); })

this jus gives me 'undefined'...

Also, not mentioned anywhere here, making .amd.json file is not enough;
you must also run 'grunt devel', which assembles config.js with all the

sorry, i forgot to mention that.. yes, i am running grunt devel, and my config.js file is showing the firebase entry..

thanks!

sergio_101

Re: Using Firebase with Amber

In reply to this post by Herby Vojčík

Oh, I also forgot one thing here. new: is for Smalltalk classes. To
create new instances of JS classes, #newValue:, #newValue:value: etc.
are used (for parameterless one, #new works for both).

Maybe it was just that.

if i do this in the workspace:

firebaseVar #new:'xxx'

i get an error dialog with:

Parse error on line 1 column 22 : Unexpected character #

Herby Vojčík

Re: Using Firebase with Amber

sergio_101 wrote:
>
> Oh, I also forgot one thing here. new: is for Smalltalk classes. To
> create new instances of JS classes, #newValue:, #newValue:value: etc.
> are used (for parameterless one, #new works for both).

#new, #new:, #newValue: etc is just a symbol with a selector. Of course
you should send the message without # character.

And what I was saying here #new: is only for ST classes and #newValue:
is for JS classes.

>
> Maybe it was just that.
>
>
> if i do this in the workspace:
>
> firebaseVar #new:'xxx'
>
> i get an error dialog with:
>
> Parse error on line 1 column 22 : Unexpected character #
>
> --
> You received this message because you are subscribed to the Google
> Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to [hidden email]
> <mailto:[hidden email]>.
> For more options, visit https://groups.google.com/d/optout.

Herby Vojčík

Re: Using Firebase with Amber

In reply to this post by sergio_101

sergio_101 wrote:

>
> describe, in this case, firebase. So question is, is path mapping
> properly; that is, is firebase eactually in file
> bower_components/firebase/firebase.js? Because that's what you said by
>
>
> yes, that is where my file lives.. i can cat that path and see the file..
>
>
> Check you JS console in the browser. Does it show the error while
> loading firebase module? Or check it yourself there, like
>
>
> i get no errors regarding firebase, but i do get an error like:
>
>
> boot.js:929 Uncaught TypeError: Cannot set property 'onbeforeunload' of null

Interesting... if you network tab shows you actually load firebase.js
file and this error appears while loading it, you should probably find
out if .onbeforeunload is set somewhere inside it and why that thing is
null.

> where that function is:
>
>
> function inContextWithErrorHandling(worker, setup) {
> try {
> return inContext(worker, setup);
> } catch (error) {
> handleError(error);
> thisContext = null;
> // Rethrow the error in any case.
> error.amberHandled = true;
> throw error;
> }
> }

This is just the generic entry point to any ST code in boot.js. As error
are caught here and rethrown after processed by ST debugger, you see
this place, but error originates in different place.

>
> require(["firebase"], function (firebaseVar) {
> console.dir(firebaseVar); })
>
>
> this jus gives me 'undefined'...

This is the problem. It may be because of that .onbeforeunload error. Or
it may be that firebase.js is not AMD-aware. You should look if the file
has AMD / UMD header (that is, it contains

define([...possibly some deps...], factoryFn)

somewhere at the beginning. If not, is it not a true AMD module, and you
must add "shim" section to firebase.amd.json to list its dependencies
(if it has some) and the name of global it exports, so that AMD loader
can sanely load it.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

sergio_101

Re: Using Firebase with Amber

somewhere at the beginning. If not, is it not a true AMD module, and you
must add "shim" section to firebase.amd.json to list its dependencies
(if it has some) and the name of global it exports, so that AMD loader
can sanely load it.

got it.. i updated the file like this:

{

"paths": {

"firebase": "firebase"

"shim": {

"firebase": {

"exports": "Firebase"

}

and everything loads up now without any problems... but i still cannot call firebaseVar.. in the workspace, firebaseVar is still undefined.

I did note that this:

Package

named: 'Dedication'

imports: {'firebaseVar' -> 'Firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}

transport: (AmdPackageTransport namespace: 'amber-dedication')

happens in the Dedication package..

do i need to instantiate something in that package first?

thanks!

Herby Vojčík

Re: Using Firebase with Amber

Ah. In the workspace, it is undefined. Imports' variables are only defined inside package which imports. So it should be known to any method you define in 'Dedicatipn' package.

Dňa 19. januára 2016 16:47:16 CET používateľ sergio_101 <[hidden email]> napísal:

somewhere at the beginning. If not, is it not a true AMD module, and you
must add "shim" section to firebase.amd.json to list its dependencies
(if it has some) and the name of global it exports, so that AMD loader
can sanely load it.

got it.. i updated the file like this:

{
"paths": {
"firebase": "firebase"
},
"shim": {
"firebase": {
"exports": "Firebase"
}
}
}

and everything loads up now without any problems... but i still cannot call firebaseVar.. in the workspace, firebaseVar is still undefined.

I did note that this:

Package
named: 'Dedication'
imports: {'firebaseVar' -> 'Firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}
transport: (AmdPackageTransport namespace: 'amber-dedication')

happens in the Dedication package..

do i need to instantiate something in that package first?

thanks!

sergio_101

Re: Using Firebase with Amber

yes.. this makes sense!

sorry to bug you so much today! i am not a javascript pro.. and have spent a good deal of time trying to avoid it.. it seems like there is no avoiding it, these days..

On Tuesday, January 19, 2016 at 10:52:23 AM UTC-5, Herby wrote:

Ah. In the workspace, it is undefined. Imports' variables are only defined inside package which imports. So it should be known to any method you define in 'Dedicatipn' package.

Dňa 19. januára 2016 16:47:16 CET používateľ sergio_101 <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="EHNBbB73AgAJ" rel="nofollow" onmousedown="this.href='javascript:';return true;" onclick="this.href='javascript:';return true;">sergi...@...> napísal:

somewhere at the beginning. If not, is it not a true AMD module, and you
must add "shim" section to firebase.amd.json to list its dependencies
(if it has some) and the name of global it exports, so that AMD loader
can sanely load it.

got it.. i updated the file like this:

{
"paths": {
"firebase": "firebase"
},
"shim": {
"firebase": {
"exports": "Firebase"
}
}
}

and everything loads up now without any problems... but i still cannot call firebaseVar.. in the workspace, firebaseVar is still undefined.

I did note that this:

Package
named: 'Dedication'
imports: {'firebaseVar' -> 'Firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}
transport: (AmdPackageTransport namespace: 'amber-dedication')

happens in the Dedication package..

do i need to instantiate something in that package first?

thanks!

Herby Vojčík

Re: Using Firebase with Amber

Well, it may as well be that you overcome major part of setup PITAs and can basically go on in Smalltalk from now on (only other thing I recall can be a bit .js related is when you add new package, when you must update one of deploy.js/testing.js as well as Gruntfile.js).

Dňa 19. januára 2016 16:56:40 CET používateľ sergio_101 <[hidden email]> napísal:

yes.. this makes sense!

sorry to bug you so much today! i am not a javascript pro.. and have spent a good deal of time trying to avoid it.. it seems like there is no avoiding it, these days..

On Tuesday, January 19, 2016 at 10:52:23 AM UTC-5, Herby wrote:
Ah. In the workspace, it is undefined. Imports' variables are only defined inside package which imports. So it should be known to any method you define in 'Dedicatipn' package.

Dňa 19. januára 2016 16:47:16 CET používateľ sergio_101 <<a href="javascript:" target="_blank" gdf-obfuscated-mailto="EHNBbB73AgAJ" rel="nofollow" onmousedown="this.href='javascript:';return true;" onclick="this.href='javascript:';return true;">sergi...@...> napísal:

somewhere at the beginning. If not, is it not a true AMD module, and you
must add "shim" section to firebase.amd.json to list its dependencies
(if it has some) and the name of global it exports, so that AMD loader
can sanely load it.

got it.. i updated the file like this:

{
"paths": {
"firebase": "firebase"
},
"shim": {
"firebase": {
"exports": "Firebase"
}
}
}

and everything loads up now without any problems... but i still cannot call firebaseVar.. in the workspace, firebaseVar is still undefined.

I did note that this:

Package
named: 'Dedication'
imports: {'firebaseVar' -> 'Firebase'. 'amber/jquery/Wrappers-JQuery'. 'amber/web/Web'}
transport: (AmdPackageTransport namespace: 'amber-dedication')

happens in the Dedication package..

do i need to instantiate something in that package first?

thanks!