"Web Development with Smalltalk" presentation at "Summer School on Languages and Applications" 2014 in Cochabamba, Bolivia.

1. Web Development with
Smalltalk
PhD. Mariano Martinez Peck
marianopeck@gmail.com
http://marianopeck.wordpress.com

2. Mariano Martinez Peck
Academics
Software Engineer at UTN-FRBA, Argentina.
PhD in Computer Science at the Université de Lille.
Open-Source
Fuel, Pharo, DBXSuite (OpenDBX and Glorp), etc.
Industry
Previously, many years at different companies developing in different
languages.
Currently, Independent Software Consultant

3. Muchas Gracias!

4. Context

5. Objective-C

7. Why Smalltalk?

8. Things are changing

9. Smalltalk is powerful
Pure Object Oriented.
Dynamically typed and
reflective.
Closures.
Debug and changes “on the
fly”.
Everything is an object.
Runs in a VirtualMachine.

10. 1. Domain specific logic.
2. Web logic (UI).

11. Two common possibilities
Use Smalltalk for domain logic and building UI
(using a web framework). The server will answer the
generated HTML + Javascript.
Write a separate UI (web logic) in another language (a
fully JS client) that connects somehow (rest/json for
example) to a Smalltalk server (domain logic).

12. Web frameworks
Seaside
AidaWeb
Many others…but above are most famous ones.

14. Quick intro
Open Source (MIT).
In production since 2002.
It is different to most web frameworks.
Fully written in Smalltalk.

15. In a nutshell
It is component based (pure Smalltalk).
It provides natural flow.
Components are reusable and statefull.

16. In a nutshell
It is component based (pure Smalltalk).
It provides natural flow.
Components are reusable and statefull.

17. We don’t think in pages…

18. We think in Components
There are no templates!
There is no JSP, XML, PHP or whatever.
You never see HTTP requests or responses (unless you
want to).
Simply Smalltalk.

21. Components
are c☺☺l

22. Reuseable

23. Model
View Controller
Model, View, Controller

24. You can debug!!!!

25. We can read Seaside code
and learn from it

26. Canvas and Brush
html div id: ‘title’; with: ‘Title’
<div id=”title”>Title</div>

27. html div id: ‘list’; with: [
html span class: ‘item’; with: ‘Item 1’.
html span class: ‘item’; with: ‘Item 2’ ]
<div id=”list”>
<span class=”item”>Item 1</span>
<span class=”item”>Item 2</span>
</div>

28. html anchor
callback: [ self inform: ‘Hello World’ ];
with: ‘Show Message’
<a href=”/seaside/example1
?_s=Ru8ZKgqjy0uDX3kf
&_k=K5EQyqKE
&32”>Show Message</a>

29. Demo

30. Pros:
• Great learning curve: only one language.
• Manage all code the same way.
• We use the same IDE tools.
• Excellent debugging capabilities.
• Reusability.
Cons:
• More complicated graphic designer
integration.

31. Demo

32. In a nutshell
It is component based (pure Smalltalk).
It provides natural flow.
Components are reusable and statefull.

33. Natural Flow

34. value1 := self request: ‘First Number’.

35. value1 := self request: ‘First Number’.
value2 := self request: ‘Second Number’.

36. value1 := self request: ‘First Number’.
value2 := self request: ‘Second Number’.
self inform: value1 + value2.

37. Not concerned about HTTP
No manual request parsing
No XML configuration files

38. x := A call: B
A

39. x := A call: B
AB

40. B answer:
AB

41. B answer:
A

42. x :=
A

43. This is thanks to Continuations…
as we will see later.

44. Demo

45. In a nutshell
It is component based (pure Smalltalk).
It provides natural flow.
Components are reusable and statefull.

46. ¿Qué pasaría si todo lo que haces, lo que conoces y
lo que te cuentan se te olvidara?
– Memento

47. ¿Qué pasaría si todo lo que haces, lo que conoces y
lo que te cuentan se te olvidara?
– HTTP

48. What happened in the
movie?

49. If it is so bad…why it has
certain success?

50. Well….
Good scalability.
It seems natural (because it is mainstream).
The database performs well so…

51. But…it’s tedious and manual

52. You must
juggle to keep
conversational
context…

53. Abusing of databases is not
good either

54. Seaside is based on reusable
statefull components

55. Continuations
self call: (AnotherComponent new)
1. Snapshots current estate.
2. “Jumps” to another place (.e.g #call:)
3. Do something.
4. When it comes back (.e.g #answer:), the state is
available.

56. Advantages of Continuations
It’s call and return.
Transparent management of the state and the threads.
It helps with double-request and back-button
problems.
You can decide what is considered state.

57. Is not paradise either…

58. Using continuations
I have be heavier!!!

59. Scalability is a bit different

60. Other characteristics

61. Other characteristics
Very nice integration with JQuery, AJAX, Comet, etc.
We can use our preferred Web server when deploying.
It’s not tight to any persistency framework.
Tons of wrapped libs like Twitter Bootstrap, Highcharts,
etc…

62. MIT License

63. • http://book.seaside.st
• http://www.seaside.st

64. Some conclusions
Very easy to learn, develop and debug.
Good integration with existing libs.
Great with web applications with complex logic and
workflows.
It could be heavy (statefull) for certain scenarios.
A bit complicated to build app from graph designer template.
May not be the best choice for plain web pages.

65. Write a separate UI (web logic) in another language (a fully JS
client) that connects somehow (rest/json for example) to a
Smalltalk server (domain logic).

67. Thanks!
Questions?
PhD. Mariano Martinez Peck
marianopeck@gmail.com
http://marianopeck.wordpress.com