Your SlideShare is downloading. ×
0
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
OAE Developer Bootcamp
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

OAE Developer Bootcamp

510

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
510
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Nico talk about the work of the design team? Zach describe how these principles were motivated by CLE.
  • Transcript

    • 1. Sakai OAE Developer Workshop Bert Pareyn, Zach Thomas June 10-15, 2012Growing Community; Growing Possibilities 1
    • 2. OAE DevelopmentWhat Is It All About? 2012 Jasig Sakai Conference 2
    • 3. A Few Principles Design comes first We enable front-end engineers We balance new technology with stability 2012 Jasig Sakai Conference 3
    • 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. Getting StartedTools and Code 2012 Jasig Sakai Conference 5
    • 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. 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. Demo: Kick the Tires 2012 Jasig Sakai Conference 8
    • 9. UI Source Code git clone git://github.com/sakaiproject/3akai-ux.git 2012 Jasig Sakai Conference 9
    • 10. Hello To DoBringing In a New Feature 2012 Jasig Sakai Conference 10
    • 11. A Simple Widget 2012 Jasig Sakai Conference 11
    • 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. 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. 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. Front-end Architecture All About Widgets 2012 Jasig Sakai Conference 15
    • 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. 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. HTML/CSS CSS and JS for the widget included in the widget HTML file Main content container: 2012 Jasig Sakai Conference 18
    • 19. Creating the Template Comment out the HTML and JavaScript: 2012 Jasig Sakai Conference 19
    • 20. Creating the Template Render the HTML and pass data in: 2012 Jasig Sakai Conference 20
    • 21. Widget i18n  What about that __MSG__NOTHING__TO__DO? i18n keys! 2012 Jasig Sakai Conference 21
    • 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. Translation Priority Widget specific language files Widget default language files3. Container specific language file Container default language file 2012 Jasig Sakai Conference 23
    • 24. OAE Widget Library Making contributions 2012 Jasig Sakai Conference 24
    • 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. 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. Hands-On: To Do Widget 2012 Jasig Sakai Conference 27
    • 28. Server Architecture Overview 2012 Jasig Sakai Conference 28
    • 29. Pretty Picture 2012 Jasig Sakai Conference 29
    • 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. 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. 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. 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. OSGi bundle lifecycle 2012 Jasig Sakai Conference 34
    • 35. Demo: Felix Console 2012 Jasig Sakai Conference 35
    • 36. Adding Server Code Creating A Bundle 2012 Jasig Sakai Conference 36
    • 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. 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. 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. 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. 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. Demo: Build and Deploy 2012 Jasig Sakai Conference 42
    • 43. Other StuffMailing lists, repositories, etc. 2012 Jasig Sakai Conference 43
    • 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. Thank You! © xkcd.com 2012 Jasig Sakai Conference 45

    ×