forked from amber-smalltalk/amber
-
Notifications
You must be signed in to change notification settings - Fork 0
How to load amber
Herbert Vojčík edited this page Sep 7, 2013
·
17 revisions
To load Amber, you should add these <script>
tags into your page (placement to head
or at the end of body
at your own discretion):
<!-- 1 -->
<script src="path_to_amber/support/requirejs/require.min.js"></script>
<!-- 2 -->
<script src="path_to_amber/support/amber.js"></script>
<!-- 3 -->
<script>
require.config({paths:{
<!-- 4 -->
'biz_corp_clientlib': 'path_to_corp_clientlib/js',
'gh_author_foolib': 'path_to_foolib/js',
'biz_corp_app': 'code/js',
<!-- 5 -->
'biz_corp_app/_source': 'code/st'
}});
require([
<!-- 6 -->
"amber/devel",
<!-- 7 -->
"gh_author_foolib/FooLib-Backend",
"gh_author_foolib/FooLib-Frontend",
"biz_corp_clientlib/CorpClient-Bar",
"biz_corp_clientlib/CorpClient-Baz",
"biz_corp_app/CorpApp-Model",
"biz_corp_app/CorpApp-Client"
], function (smalltalk) {
<!-- 8 -->
smalltalk.defaultAMDNamespace = 'biz_corp_app';
<!-- 9 -->
smalltalk.initialize();
<!-- 10 -->
smalltalk.Browser._open();
smalltalk.AppLogic._start();
});
</script>
Notes:
- Loading AMD loader
-
path_to_amber
can be anything - relative path, absolute path or full URL. - You need not to load
require.js
AMD loader from amber, you can load it from any other place you want. - Not tested, but amber should play just fine with any conforming AMD loader.
- Loading amber.js script that configures AMD loader
-
path_to_amber
can be anything - relative path, absolute path or full URL, it depends how you deploy / decide to load amber from. -
amber.js
is built so that it can appear afterrequire.js
but also before it - it the former case it properly configuresrequire.js
, it the latter case it prepares the configuration intorequire
global, using the feature ofrequire.js
that uses contents ofrequire
global, if it exists, as the configuration upon loading itself.
- Hand-written script that actually loads Amber including your packages
- it is only required that things described later happen, in that order, sometimes after (1) and (2), but you can structure them as you wish; using
<script>
tag with presented structure is just a convention.
- Configuring namespace-to-path mappings for loading packages
- Each package in amber must have a namespace, the part before '/'. There should be exactly one slash in the loader name of package.
- Each namespace represents one physical location to load from, and optionally, to save to; IOW, it represent one URL path; again, it can be relative path (relative to page being loaded), absolute path or full URL path.
- You should point 'namespace' to the location of compiled amber files, which have
.js
extension. The convention in lot of projects is to put source (Smalltalk) files into.../st
and compiled files into.../js
where...
is same path. This is why in this example, all three namespaces are mappped into paths that end with/js
. - Namespaces are selected for the library / app (a group of amber packages at the same location) by its developer and are hardcoded into it. For this reason, care must be taken when selecting namespace, so it does not clash with other namespaces. One technique, used in this example as well, is to take the 'path' where the project resides ('corp.biz/clientlib', 'github.com/author/foolib' etc.), revert the domain name ('biz.corp/clientlib', 'com.github/author/foolib' etc.) and replace all separators ('.', '/') with underscores ('biz_corp_clientlib', 'com_github_author_foolib'). One can do some simplifyings if they seem to be safe enough; like shortening
github_com_
intogh_
. - This example represents complex application that resides at
corp.biz
domain. This page loads the app, which has its own code (namespacebiz_corp_app
), uses some internal library (namespacebiz_corp_clientlib
) and also uses (contrived) third-party library foolib created by author and developed in github (namespacegh_author_foolib
). - As in previous cases,
path_to_corp_clientlib
andpath_to_foolib
can be any URL paths - relative to page being loaded, absolure or full URL paths with protocal, machine etc. - You can see the namespace
biz_corp_app
is mapped to relative pathcode/ja
, that is, if this page ishttp://foo/bar/index.html
, the mapped path ofbiz_corp_app
would behttp://foo/bar/code/js
.
- Configuring namespace-to-path mappings for saving package sources
- If you map 'namespace/_source' (the special ending
/_source
), you are mapping the URL path into which the page will try to save sources (file with.st
extension) of amber packages in namespace 'namespace'. - When saving, compiled
.js
files are saved as well; these are saved into the same path which is used for loading them. - In this example, if you save any package from namespace
corp_biz_app
, its.st
file is tried to save intocode/st/PackageName.st
and the compiled file is saved intocode/js/PackageName.js
.