This document contains the slides from a presentation on web development with open source technologies given by Edham Arief Dawillah. It introduces Edham and his background in web development using various open source tools. The presentation covered current popular programming languages, frameworks, content management systems and front-end technologies. It emphasized that open source allows for freedom, community support and lower costs. The slides provided information on tools like PHP, Ruby, Python, Java, CakePHP, Ruby on Rails, WordPress, Drupal and more.

1. Edham Arief DawillahEdham Arief Dawillah
edham.arief@gmail.comedham.arief@gmail.com
http://linkd.in/edhamariefhttp://linkd.in/edhamarief
Web development with Open SourceWeb development with Open Source
Konvensyen Webmaster Agensi Kerajaan Negeri 2013Konvensyen Webmaster Agensi Kerajaan Negeri 2013

2. 05/28/13 2
Introduction

3. 05/28/13 3
The Speaker
Edham Arief Dawillah @ Ed
edham.arief@gmail.com
http://linkd.in/edhamarief

4. 05/28/13 4
Been a geek and love coding since 2000s
doing PHP, LAMP, PHP/Postnuke etc.
until now developing on
Ruby on Rails, CakePHP, Drupal
and mobile web

5. 05/28/13 5
Open Source / Free Software fan since reading
ESR's “How To Become A Hacker” and after
successfully installed Linux on an old Pentium 2
machine.
http://www.catb.org/~esr/faqs/hacker-howto.html

6. 05/28/13 6

7. 05/28/13 7
SOSG
http://facebook.com/sabahopensource
Google groups – kk-lug
2009

8. 05/28/13 8
SOSG

9. 05/28/13 9
SOSG

10. 05/28/13 10
WebCamp KK

11. 05/28/13 11
WebCamp KK
http://facebook.com/groups/webcamp.kk
Every month, Tuesday first week
Wisma Bandaraya, 13th Floor
http://apacerita.my
4 / June / 2013, 7:00 pm – 10:00 pm

12. 05/28/13 12
WebCamp KK

13. 05/28/13 13
Web stack today

14. 05/28/13 14

15. 05/28/13 15
In computing, a solution stack is a set of software
subsystems or components needed to deliver a fully
functional solution, e.g. a product or service
http://en.wikipedia.org/wiki/Web_stack

16. 05/28/13 16
Operating System
Back End
Database
Front End
Linux Windows
MySQL
PostgreSQLMariaDB
Nosql
PHPRuby JavaPython
CSS3HTML5 JavascriptUX / UI
Apache Nginx

17. 05/28/13 17

18. 05/28/13 18
Why Open Source
Freedom
Not vendor locked
Community powered
Cheaper (most of the time)

19. 05/28/13 19
Biggest CHALLENGE today?
Keeping up to date!

20. 05/28/13 20
Back end

21. 05/28/13 21
Programming Languages
PHP
Ruby
Python
Java & JVM languages

22. 05/28/13 22
TIOBE Programming Community Index
for May 2013
tiobe.com/index.php/content/paperinfo/tpci/index.html

23. 05/28/13 23

24. 05/28/13 24
http://langpop.corger.nl/
PL popularity chart.
Data from StackOverflow.com and
Github.com

25. 05/28/13 25

26. 05/28/13 26
PHP
PHP : Hypertext Preprocessor
LAMP
WordPress, Joomla, Drupal
Facebook.com
Popular

27. 05/28/13 27
PHP
PHP : Hypertext Preprocessor
www.php.net
LAMP
WordPress, Joomla, Drupal
Facebook.com
Popular

28. 05/28/13 28
PHP
Why PHP?
Easy to install (XAMPP, WAMP)
Easy to learn
Included in Linux distros
Cheap hosting

29. 05/28/13 29
Ruby
Ruby
www.ruby-lang.org
Popular in Japan, now startups
Ruby on Rails
Twitter, Github, Scribd

30. 05/28/13 30
Ruby
Why Ruby?
Easy to install
Object oriented by design
Almost English like

31. 05/28/13 31
Python
Python
www.python.org
Popular among scientific community
Django

32. 05/28/13 32
Python
Why Python?
Easy to install
“Batteries” included
Almost English like

33. 05/28/13 33
Java / JVM
Java
www.java.com
Write once, run anywhere? :P
Enterprise

34. 05/28/13 34
Java / JVM
Why Java?
Performance
Android
Java Virtual Machine

35. 05/28/13 35
Java / JVM
Other JVM languages
Clojure (www.clojure.org)
Scala (www.scala-lang.org)
Jruby (www.jruby.org)
Jython (www.jython.org)
Groovy (groovy.codehaus.org)

36. 05/28/13 36
Web Application Framework
makes development of dynamic web
application from scratch easier, fun and
fast.

37. 05/28/13 37
CakePHP
One of the earliest PHP framework
PHP4, PHP5
MVC
Good Ecosystem
Active community

38. 05/28/13 38
CakePHP
Main
http://cakephp.org
Documentation
http://book.cakephp.org - Book
http://api.cakephp.org - API
Source
http://github.com/cakephp/cakephp

39. 05/28/13 39
RoR
Poster child of Ruby
Trend setter
MVC
Great ecosystem with lots of plugins
Metaprograming

40. 05/28/13 40
RoR
Main
http://rubyonrails.org
Documentation
http://api.rubyonrails.org - API
http://guides.rubyonrails.org - Guides
http://railstutorial.org - Free Ebook

41. 05/28/13 41
Frameworks
Interesting links
Comparison of PHP frameworks
http://www.phpframeworks.com
Wikipedia – Comparison of web app
frameworks
http://en.wikipedia.org/wiki/Comparison_of_
web_application_frameworks

42. 05/28/13 42
Content Management System
if building from scratch is not for you, go
with open source CMS

43. 05/28/13 43
CMS Market Share
www.opensourcecms.com/general/cms-
marketshare.php

44. 05/28/13 44

45. 05/28/13 45
Wordpress
http://wordpress.org
Easy to install, technical experience not
really necessary
Easy to customize
Simple corporate websites, blogs
Plenty of themes

46. 05/28/13 46
Joomla
http://joomla.org
Middle ground between Drupal and
Wordpress
Plenty of plugins and themes

47. 05/28/13 47
Drupal
http://drupal.org
Requires more technical know how
Powerful compared to Joomla and Wordpress
Usually for complex, advance sites

48. 05/28/13 48
CMS
Further reading
CMS Comparison: Drupal, Joomla and
Wordpress by Rackspace.com
http://www.rackspace.com/knowledge_center
/article/cms-comparison-drupal-joomla-and-
wordpress

49. 05/28/13 49
Databases
SQL
MySQL – www.mysql.com
PostgreSQL – www.postgresql.org
SQLite – www.sqlite.org
NoSQL
MongoDB – www.mongodb.org

50. 05/28/13 50
Front end

51. 05/28/13 51

52. 05/28/13 52
HTML5
Many cutting edge features.
Not a single thing but a collection of features,
technologies to get the desktop to web
Graphics are better with HTML5, browsers
can now manipulate GPU for 3D etc.
Offline features
Many more...

53. 05/28/13 53
http://www.html5rocks.com/

54. 05/28/13 54
jQuery
http://jquery.com
The de facto JS library.
Makes JS manipulation easier
Cross browser
Lightweight

55. 05/28/13 55
Twitter Bootstrap
Twitter Bootstrap
http://twitter.github.io/bootstrap/
By Twitter
Good example
Responsive layout
Out of the box features
Good documentation

56. 05/28/13 56
Mobile web
development

57. 05/28/13 57
Post PC era.
More people view websites on their
mobile devices.
Design of UI must take into
consideration these factors.

58. 05/28/13 58
“Our biggest mistake was betting
too much on HTML5” - Mark
Zuckerberg, Facebook. Sep, 2012

59. 05/28/13 59
Twitter Bootstrap

60. 05/28/13 60
Twitter Bootstrap
Twitter Bootstrap
http://twitter.github.io/bootstrap/
By Twitter
Good example
Responsive layout
Out of the box features
Good documentation

61. 05/28/13 61
Tools

62. 05/28/13 62
Tools
IDEs
Aptana Studio 3
Sublime Text
Other
Git

63. 05/28/13 63
Aptana Studio 3
Very powerful IDE
Based on Eclipse
www.aptana.com

64. 05/28/13 64
Sublime Text
Lightweight
Slick user interface
www.sublimetext.com

65. 05/28/13 65
Download this presentation :
http://bit.ly/oss-kw2013

66. 05/28/13 66
The End