Smalltalk › Amber Smalltalk

Amber Smalltalk vs Angular JS

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

askoh

Amber Smalltalk vs Angular JS

Administrator

I hear a lot about Angular JS. How does Amber and Angular compare and contrast? How close are we to having Smalltalk on the server and Smalltalk on the client for web distributed computing?

Thanks,
Aik-Siong Koh

Hannes Hirzel

Re: Amber Smalltalk vs Angular JS

Hello Aik-Siong Koh

On 5/5/14, askoh <[hidden email]> wrote:
> I hear a lot about Angular JS. How does Amber and Angular compare and
> contrast?

Which field of application do you have in mind?

For example https://angularjs.org/ shows a ToDo application on the front-page.

We could compare it to a Amber ToDo application. I recently updated
Rodrigo Bistolfi's version to Amber version 0.12.4 and check out where
the differences are.

https://github.com/hhzl/Amber-ToDo-List

Regards
Hannes

> How close are we to having Smalltalk on the server and Smalltalk
> on the client for web distributed computing?
>
> Thanks,
> Aik-Siong Koh

--
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.

askoh

Re: Amber Smalltalk vs Angular JS

Administrator

I want to create a Lists of Lists browser for recipes, todo lists, hierarchies, etc. The LOL browser will create, populate, manipulate, delete lists and sublists inside a web browser. But the LOL is save on the server. Preferably, I want to use Smalltalk for as much as possible.

Thanks,
Aik-Siong Koh

Hannes Hirzel

Re: Amber Smalltalk vs Angular JS

Hi Aik-Siong Koh

Your question is how does Amber compare to Angularjs. My answer is
that I cannot say it yet.

I don't know if you have tried out angularjs yet. It has a ToDo app
on the front page of the web page. The code is pretty compact as you
can see in the copy below.

I have updated Rodrigo Bistolfi's ToDo app for Amber for the latest
Amber 0.12.4.

http://hhzl.github.io/Amber-ToDo-List/

(It uses localStorage to store the ToDo list).

Amber uses more code and not so easy to understand unless you know the
Seaside HTML rendering system.

For a list of list app you have an example in the Smalltalk browsers.
List of packages, list of classes. You can use that as an example to
implement your generic list of list app.

It would be great to have a list of list app both in Amber and
angularjs to compare side by side.

In case you need Amber support please don't hesitate to ask on this list.

Regards
--Hannes

--------------------------------------------------------
Angularjs ToDo app html
--------------------------------------------------------

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>

--------------------------------------------------------
JavaScript
--------------------------------------------------------

function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];

$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};

$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};

$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}

On 5/6/14, askoh <[hidden email]> wrote:

> I want to create a Lists of Lists browser for recipes, todo lists,
> hierarchies, etc. The LOL browser will create, populate, manipulate, delete
> lists and sublists inside a web browser. But the LOL is save on the server.
> Preferably, I want to use Smalltalk for as much as possible.
>
> Thanks,
> Aik-Siong Koh
>
>
>
> --
> View this message in context:
> http://forum.world.st/Amber-Smalltalk-vs-Angular-JS-tp4757887p4758012.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
> --
> 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.
>

--
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.

philippeback

Re: Amber Smalltalk vs Angular JS

On Thu, May 8, 2014 at 11:40 AM, H. Hirzel <[hidden email]> wrote:

Hi Aik-Siong Koh

Your question is how does Amber compare to Angularjs. My answer is
that I cannot say it yet.

I don't know if you have tried out angularjs yet. It has a ToDo app
on the front page of the web page. The code is pretty compact as you
can see in the copy below.

I have updated Rodrigo Bistolfi's ToDo app for Amber for the latest
Amber 0.12.4.

http://hhzl.github.io/Amber-ToDo-List/

(It uses localStorage to store the ToDo list).

Side note: http://bromagosa.github.io/Ludus/bower_components/amber/support/helios/index.html is what the Helios IDE button opens...

Amber uses more code and not so easy to understand unless you know the
Seaside HTML rendering system.

For a list of list app you have an example in the Smalltalk browsers.
List of packages, list of classes. You can use that as an example to
implement your generic list of list app.

It would be great to have a list of list app both in Amber and
angularjs to compare side by side.

In case you need Amber support please don't hesitate to ask on this list.

Regards
--Hannes

--------------------------------------------------------
Angularjs ToDo app html
--------------------------------------------------------

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</body>
</html>

--------------------------------------------------------
JavaScript
--------------------------------------------------------

function TodoCtrl($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];

$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};

$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};

$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}

On 5/6/14, askoh <[hidden email]> wrote:
> I want to create a Lists of Lists browser for recipes, todo lists,
> hierarchies, etc. The LOL browser will create, populate, manipulate, delete
> lists and sublists inside a web browser. But the LOL is save on the server.
> Preferably, I want to use Smalltalk for as much as possible.
>
> Thanks,
> Aik-Siong Koh
>
>
>
> --
> View this message in context:
> http://forum.world.st/Amber-Smalltalk-vs-Angular-JS-tp4757887p4758012.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
> --
> 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.
>

--
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.

sebastianconcept

Re: Amber Smalltalk vs Angular JS

In reply to this post by Hannes Hirzel

On May 8, 2014, at 6:40 AM, H. Hirzel <[hidden email]> wrote:

It would be great to have a list of list app both in Amber and
angularjs to compare side by side.

yes, and we need to take a little care on code and app aesthetics because they’ll be opinion shapers

If we show we can do the same but we’re, say twice easier to understand, then we’ll have a great point