Backend-less Development with AngularJS

Kalon Hinds

Code Writer

kalon@cloudspace.com

github.com/hkal

The Internet of Old

The New Internets

Split-stack Development

• Build a solid server-side API
• Create native frontends for devices connecting to application

Side-effects

• Specialization > Generalization
• Teams will form
• Practical knowledge will be limited
• Development time will slow

Backendless Development

• Building a frontend without an underlying backend
• Requirements:
  • a dynamically generated data
  • a responsive API stub

None of this

<ul class="inbox">  <li class="email">    <span class="sender-name">Nick Thomson</span>    <span class="subject">Merge my code, please!</span>    <span class="body">You left without checking the pull requests</span>    <span class="sent-on">2014-04-25</span>  </li>  <li class="email">    <span class="sender-name">Test</span>    <span class="subject">Test Subject</span>    <span class="body">This is a body</span>    <span class="sent-on">1991-04-00</span>  </li>  <li class="email">    <span class="sender-name">asdfsdfsdf</span>    <span class="subject">asdfsdfsdf</span>    <span class="body">asdfsdfsdfsdfsdfsdf sdfsdfsdfsdf</span>    <span class="sent-on">fsdfsdf</span>  </li></ul>

or this...

var emails = [  {to: "kalon@cloudspace.com", from: "nick@cloudspace.com", body: "this is text"},  {to: "someone@cloudspace.com", from: "another@email.name", body: "more text"},  {to: "etc@etc.com", from: "sadpanda@something.com", body: "more text"},  {to: "a@a.com", from: "emails@arelame.com", body: "why are we building this?"}];

Example Time!

Simple Email Inbox

• Users
  • can read emails
  • can select emails for bulk actions
  • can delete emails
  • can mark emails as read
• Emails
  • must be marked as read after opening
  • must be removed from inbox after deletion
  • must indicate read or unread status

Email Object

      {
        id: int,
        subject: string,
        from: {
          name: string,
          address: string
        },
        to: string,
        content: string,
        status: string,
        sentOn: date,
        lastViewedOn: date
      }