Full­stack developer with Django and AngularJS

A training session for Django and Angular newcomers

Transcript

1. 26.Apr.2014 AppDays @ Pordenone
   Google Developer Group
   http://gdg-perugia.org
   

   View Slide

2. Massimiliano Pippi
   Software Developer, Python Lover, Dad.
   @maxpippi
   http://github.com/masci
   http://dev.pippi.im
   https://evonove.it
   Who are you?
   

   View Slide

3. Emanuele Palazzetti
   Python developer, Android and Javascript lover
   @palazzem
   http://github.com/palazzem
   http://git.palazzetti.me
   https://evonove.it
   Who are you?
   

   View Slide

4. Full­stack developer with
   Django and AngularJS
   

   View Slide

5. Full Stack?
   ‘00: Linux, Apache, MySql, PHP (LAMP)
   Today: Linux, WSGI, Postgres, Python, SPAs
   SPA = Single Page Application (JS, Dart)
   

   View Slide

6. Schedule
   ● Design and implement a Reddit clone (60min)
   ● Expose a REST Api for the service (45min)
   ● Run the service locally (10min)
   ● Pause (10min)
   ● Design and implement a SPA with Angular (60min)
   ● Make the app talk with the service and enjoy (55min)
   

   View Slide

7. and now for something completely different
   Let’s Code!
   https://github.com/Tinkergarage/appdays2014
   

   View Slide

8. Reddit
   

   View Slide

9. Business Model
   Link
   title (type: text)
   url (type: url)
   upvotes (type: int)
   downvotes (type: int)
   nsfw (type: boolean)
   

   View Slide

10. The Router
    URL Style HTTP Method Action URL Name
    [.format] GET root view api-root
    {prefix}/[.format] GET list {basename}-list
    {prefix}/[.format] POST create {basename}-list
    {prefix}/{lookup}/[.format] GET retrieve {basename}-detail
    {prefix}/{lookup}/[.format] PUT update {basename}-detail
    {prefix}/{lookup}/[.format] PATCH partial_update {basename}-detail
    {prefix}/{lookup}/[.format] DELETE destroy {basename}-detail
    {prefix}/{lookup}/{methodname}/[.format] GET @link decorated method {basename}-{methodname}
    {prefix}/{lookup}/{methodname}/[.format] POST
    @action decorated
    method
    {basename}-{methodname}
    

    View Slide

11. Design and implement a SPA with Angular
    Where we can begin?
    

    View Slide

12. Javascript ninja tools
    

    View Slide

13. Javascript ninja tools
    

    View Slide

14. Javascript ninja tools
    

    View Slide