Sakai OAE                         Developer Workshop                               Bert Pareyn, Zach Thomas     June 10-15...
OAE DevelopmentWhat Is It All About?                        2012 Jasig Sakai Conference   2
A Few Principles   Design comes first   We enable front-end engineers   We balance new technology with stability       ...
A Few Technical Details   Rely heavily on client-side Javascript   Driven by JSON “feeds” out of the server   Java-base...
Getting StartedTools and Code                 2012 Jasig Sakai Conference   5
Tools of the Trade   git for version control   github for project hosting   Java 6   Ruby 1.9.3   maven, rake   we l...
First Stepsgit clone git://github.com/sakaiproject/nakamura.gitcd nakamuramvn clean installjava -jar -Xmx512m -XX:MaxPermS...
Demo: Kick the Tires                       2012 Jasig Sakai Conference   8
UI Source Code  git clone git://github.com/sakaiproject/3akai-ux.git                                               2012 Ja...
Hello To DoBringing In a New Feature                      2012 Jasig Sakai Conference   10
A Simple Widget                  2012 Jasig Sakai Conference   11
A Helping of AJAX{     "items": 2,     "results": [         {             "completed": false,             "description": "...
Jump Start With Static Data   Front-end engineers can get to work using static    files to return representative data   ...
Mapping to Your Filesystem   Setting the paths to your UI in the Felix console    ensures we use the correct local UI:   ...
Front-end Architecture    All About Widgets                        2012 Jasig Sakai Conference   15
Widgets in the OAE   Widgets are reusable pieces of functionality   Used for everything in the OAE UI   Structure defin...
HTML/CSS   Widgets are injected into the page   No need for <html> or <body> tags   No inline CSS   Templates for loop...
HTML/CSS   CSS and JS for the widget included in the widget    HTML file   Main content container:                      ...
Creating the Template   Comment out the HTML and JavaScript:                                           2012 Jasig Sakai C...
Creating the Template   Render the HTML and pass data in:                                        2012 Jasig Sakai Confere...
Widget i18n       What about that __MSG__NOTHING__TO__DO?   i18n keys!                                        2012 Jasig...
Widget i18n   UI needs to be available in multiple languages   Standard properties file (1 per language)   Main languag...
Translation Priority    Widget specific language files    Widget default language files3.   Container specific language ...
OAE Widget Library Making contributions                        2012 Jasig Sakai Conference   24
Sakai OAE Widget SDK   Important part of what OAE is trying to achieve   Create a healthy ecosystem around widget creati...
Sakai OAE Widget SDK   The SDK is live for everyone to see   Continuous update of documentation going on   Incoming str...
Hands-On: To Do Widget                         2012 Jasig Sakai Conference   27
Server Architecture Overview             2012 Jasig Sakai Conference   28
Pretty Picture                 2012 Jasig Sakai Conference   29
Apache Felix   Our OSGi runtime environment   Allows us to modularize   Handles dependencies between modules   Allows ...
Apache Sling   RESTful glue on top of Jackrabbit   Allows you to address content by URI   Allows you to bind code to co...
A Few Words About OSGi   A specification for modules in Java   Three main aspects:    ◦ Defining the module (visibility,...
OSGi bundles   Modules in OSGi are called “bundles”   Actually just a jar with a special manifest   The manifest declar...
OSGi bundle lifecycle                        2012 Jasig Sakai Conference   34
Demo: Felix Console                      2012 Jasig Sakai Conference   35
Adding Server Code Creating A Bundle                     2012 Jasig Sakai Conference   36
Anatomy of a Bundle   Basically, a jar file with an OSGi manifest   But the devil is in the details   So we use maven s...
Maven archtetypemvn archetype:generate ‑DarchetypeGroupId=org.sakaiproject.nakamura ‑DarchetypeArtifactId=org.sakaiproject...
Introducing a Servlet 1 @SlingServlet(paths = "/api/todo/mine") 2 public class TodoServlet extends SlingAllMethodsServlet ...
Introducing a Service   1 public interface TodoService {   2     List<TodoItem> getIncompleteItemsForPerson(String personI...
Don’t Forget Your Tests! 1 @Test 2 public void testMakeJson() throws Exception { 3   TodoItem testItem1 = new TodoItem(); ...
Demo: Build and Deploy                         2012 Jasig Sakai Conference   42
Other StuffMailing lists, repositories, etc.                          2012 Jasig Sakai Conference   43
How We Work   http://collab.sakaiproject.org/pipermail/oae-dev   pipermail/oae-production   http://github.com/sakaiproj...
Thank You!             © xkcd.com                      2012 Jasig Sakai Conference   45
Upcoming SlideShare
Loading in …5
×

OAE Developer Bootcamp

753 views

Published on

Published in: Education, Technology, Design
  • Be the first to comment

OAE Developer Bootcamp

  1. 1. Sakai OAE Developer Workshop Bert Pareyn, Zach Thomas June 10-15, 2012Growing Community; Growing Possibilities 1
  2. 2. OAE DevelopmentWhat Is It All About? 2012 Jasig Sakai Conference 2
  3. 3. A Few Principles Design comes first We enable front-end engineers We balance new technology with stability 2012 Jasig Sakai Conference 3
  4. 4. A Few Technical Details Rely heavily on client-side Javascript Driven by JSON “feeds” out of the server Java-based backend (more on that later) Inspired by REST Easy to make requests 2012 Jasig Sakai Conference 4
  5. 5. Getting StartedTools and Code 2012 Jasig Sakai Conference 5
  6. 6. Tools of the Trade git for version control github for project hosting Java 6 Ruby 1.9.3 maven, rake we love curl! Firebug, Web Developer toolbar an assortment of browsers your favorite editor Eclipse, Aptana, IntelliJ IDEA 2012 Jasig Sakai Conference 6
  7. 7. First Stepsgit clone git://github.com/sakaiproject/nakamura.gitcd nakamuramvn clean installjava -jar -Xmx512m -XX:MaxPermSize=128m app/target/org.sakaiproject.nakamura.app-1.4-SNAPSHOT.jar  Pre-built binary at http://bit.ly/LgcxWm  Log is at sling/logs/error.log  Access the system at http://localhost:8080 2012 Jasig Sakai Conference 7
  8. 8. Demo: Kick the Tires 2012 Jasig Sakai Conference 8
  9. 9. UI Source Code git clone git://github.com/sakaiproject/3akai-ux.git 2012 Jasig Sakai Conference 9
  10. 10. Hello To DoBringing In a New Feature 2012 Jasig Sakai Conference 10
  11. 11. A Simple Widget 2012 Jasig Sakai Conference 11
  12. 12. A Helping of AJAX{ "items": 2, "results": [ { "completed": false, "description": "Go get some milk.", "details": "Whole milk, not the low fat!!!" }, { "completed": true, "description": "Get the kids a dentist appt.", "details": "Dr. Starch" } ]} 2012 Jasig Sakai Conference 12
  13. 13. Jump Start With Static Data Front-end engineers can get to work using static files to return representative data When the live data is available, can switch over 2012 Jasig Sakai Conference 13
  14. 14. Mapping to Your Filesystem Setting the paths to your UI in the Felix console ensures we use the correct local UI: 2012 Jasig Sakai Conference 14
  15. 15. Front-end Architecture All About Widgets 2012 Jasig Sakai Conference 15
  16. 16. Widgets in the OAE Widgets are reusable pieces of functionality Used for everything in the OAE UI Structure defined: 2012 Jasig Sakai Conference 16
  17. 17. HTML/CSS Widgets are injected into the page No need for <html> or <body> tags No inline CSS Templates for loops, conditions CSS and JS declarations go into your HTML 2012 Jasig Sakai Conference 17
  18. 18. HTML/CSS CSS and JS for the widget included in the widget HTML file Main content container: 2012 Jasig Sakai Conference 18
  19. 19. Creating the Template Comment out the HTML and JavaScript: 2012 Jasig Sakai Conference 19
  20. 20. Creating the Template Render the HTML and pass data in: 2012 Jasig Sakai Conference 20
  21. 21. Widget i18n  What about that __MSG__NOTHING__TO__DO? i18n keys! 2012 Jasig Sakai Conference 21
  22. 22. Widget i18n UI needs to be available in multiple languages Standard properties file (1 per language) Main language files in /dev/bundles — used multiple times Widgets can have their own bundles There’s translation priority 2012 Jasig Sakai Conference 22
  23. 23. Translation Priority Widget specific language files Widget default language files3. Container specific language file Container default language file 2012 Jasig Sakai Conference 23
  24. 24. OAE Widget Library Making contributions 2012 Jasig Sakai Conference 24
  25. 25. Sakai OAE Widget SDK Important part of what OAE is trying to achieve Create a healthy ecosystem around widget creation Guide through examples, our APIs (UI & back-end), forum, and Q&A, design and style guide, best practices, FAQ… Allows you to contribute back 2012 Jasig Sakai Conference 25
  26. 26. Sakai OAE Widget SDK The SDK is live for everyone to see Continuous update of documentation going on Incoming stream of widgets is picking up http://oae-widgets.sakaiproject.org 2012 Jasig Sakai Conference 26
  27. 27. Hands-On: To Do Widget 2012 Jasig Sakai Conference 27
  28. 28. Server Architecture Overview 2012 Jasig Sakai Conference 28
  29. 29. Pretty Picture 2012 Jasig Sakai Conference 29
  30. 30. Apache Felix Our OSGi runtime environment Allows us to modularize Handles dependencies between modules Allows modules to expose services 2012 Jasig Sakai Conference 30
  31. 31. Apache Sling RESTful glue on top of Jackrabbit Allows you to address content by URI Allows you to bind code to content 2012 Jasig Sakai Conference 31
  32. 32. A Few Words About OSGi A specification for modules in Java Three main aspects: ◦ Defining the module (visibility, dependencies) ◦ Providing a dynamic lifecycle for that module ◦ Exposing services to other modules 2012 Jasig Sakai Conference 32
  33. 33. OSGi bundles Modules in OSGi are called “bundles” Actually just a jar with a special manifest The manifest declares visibility of packages The manifest declares dependencies In an OSGi runtime, bundles have a lifecycle: ◦ Installed ◦ Resolved ◦ Active 2012 Jasig Sakai Conference 33
  34. 34. OSGi bundle lifecycle 2012 Jasig Sakai Conference 34
  35. 35. Demo: Felix Console 2012 Jasig Sakai Conference 35
  36. 36. Adding Server Code Creating A Bundle 2012 Jasig Sakai Conference 36
  37. 37. Anatomy of a Bundle Basically, a jar file with an OSGi manifest But the devil is in the details So we use maven so our builds are: ◦ automated ◦ repeatable ◦ tested 2012 Jasig Sakai Conference 37
  38. 38. Maven archtetypemvn archetype:generate ‑DarchetypeGroupId=org.sakaiproject.nakamura ‑DarchetypeArtifactId=org.sakaiproject.nakamura.acme-archetype ‑DarchetypeVersion=1.1 ‑DarchetypeRepository=https://source.sakaiproject.org/maven2/ 2012 Jasig Sakai Conference 38
  39. 39. Introducing a Servlet 1 @SlingServlet(paths = "/api/todo/mine") 2 public class TodoServlet extends SlingAllMethodsServlet { 3 4 private static final Logger LOGGER = LoggerFactory.getLogger(TodoServlet.class); 5 6 @Reference 7 TodoService todoService; 8 9 @Override10 protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)11 throws ServletException, IOException {12 LOGGER.info("TodoServlet");1314 List<TodoItem> myTodos = todoService.getIncompleteItemsForPerson(request.getRemoteUser());1516 response.setContentType("application/json");17 response.write(makeJson(myTodos));18 }1920 } 2012 Jasig Sakai Conference 39
  40. 40. Introducing a Service 1 public interface TodoService { 2 List<TodoItem> getIncompleteItemsForPerson(String personId); 3 void saveItemsForPerson(List<TodoItem> items, String personId); 4 } 1 @Service 2 @Component 3 public class BasicTodoService implements TodoService { 4 5 private Map<String, List<TodoItem>> todoStorage; 6 7 public List<TodoItem> getIncompleteItemsForPerson(String personId) { 8 return todoStorage.get(personId); 9 } 10 11 public void saveItemsForPerson(List<TodoItem> items, String personId) { 12 todoStorage.put(personId, items);s BasicTodoService implements TodoService { 13 }p<String, List<TodoItem>> todoStorage;t<TodoItem> getIncompleteItemsForPerson(String personId) {odoStorage.get(personId);d saveItemsForPerson(List<TodoItem> items, String personId) {orage.put(personId, items); 2012 Jasig Sakai Conference 40
  41. 41. Don’t Forget Your Tests! 1 @Test 2 public void testMakeJson() throws Exception { 3 TodoItem testItem1 = new TodoItem(); 4 testItem1.description = "Go get the milk"; 5 testItem1.details = "Make sure its not the low fat!"; 6 7 TodoItem testItem2 = new TodoItem(); 8 testItem2.description = "Make dentist appt."; 9 testItem2.details = "Dr. Starch, 555-123-4567";10 List<TodoItem> todoItems = Arrays.asList(new TodoItem[]{testItem1, testItem2});11 String json = TodoServlet.makeJson(todoItems);12 assertEquals("Did not get the JSON we expect.", SAMPLE_JSON, json);13 } 2012 Jasig Sakai Conference 41
  42. 42. Demo: Build and Deploy 2012 Jasig Sakai Conference 42
  43. 43. Other StuffMailing lists, repositories, etc. 2012 Jasig Sakai Conference 43
  44. 44. How We Work http://collab.sakaiproject.org/pipermail/oae-dev pipermail/oae-production http://github.com/sakaiproject ◦ 3akai-ux ◦ nakamura ◦ sparsemapcontent ◦ OAE-Builder 2012 Jasig Sakai Conference 44
  45. 45. Thank You! © xkcd.com 2012 Jasig Sakai Conference 45

×