Thursday, 7 December, 2017 UTC


Summary

JS Foundation projects, architect and Marko, unite to give developers the easiest path to serverless applications

SAN FRANCISCO – December 6, 2017 – The benefits of serverless applications like modularity, ease of upgrade, cost reductions, etc., are becoming well known in the cloud development space. What is much harder to grasp for many is how to get started when building a serverless application from the ground up. Between navigating the maze of cloud platform dashboards, to configuring DNS, to just laying out the user interface for the application, there are many moving parts that a developer must learn to use in harmony to take advantage of those benefits. The JS Foundation is solving that issue for the largest programming community, JavaScript developers.
Two JS Foundation projects have teamed up to deliver a set of tools that work seamlessly together to allow JavaScript developers to provision and deploy serverless applications with beautiful, performant user interfaces. First, architect provides the ability to provision and deploy serverless cloud infrastructure with a simple plain text manifest file allowing you to create functions, routes, DNS, static assets, databases and more. Second, Marko, the simple to use, fast, UI library originally created by the team at eBay to power ebay.com, gives JavaScript developers the powerful, component-based development model they’ve grown accustomed to with the performance and stability necessary to be trusted by high-traffic websites. These two projects are announcing new integrations and an ongoing collaborative effort that will bring JavaScript developers to the serverless world in droves.

Infrastructure as Code » Architecture as Text

As the way we maintain our application infrastructure has evolved from physical servers to virtual machines to containers, a key turning point has been reached in the move to functions as a service or serverless architectures. Functions as a service do not fit that physical server metaphor that virtual machines and containers have been built on. What this means is that the tools developers use also need to leave behind that old metaphor and embrace this new way of designing and maintaining application architectures.
This is where architect comes in to help developers provision and deploy cloud infrastructure with a simple, plain text manifest file. Leaving behind the old metaphor and embracing a serverless model allows application developers to quickly and easily describe their application’s architecture using high-level primitives that align with the way they write their application code. No longer does the developer need deep, proprietary knowledge of the cloud platform they’re using to configure and deploy their application. Nor does a developer need to commit infrastructure configuration into their application’s revision control system. Now, by moving from the idea of infrastructure as code to architecture as text, developers are empowered to design, develop and deploy their application with minimal infrastructural knowledge.
To illustrate these points, let’s take a quick look at a simple .arc file.
@app
peopleAndCats

@html
get /

@json
get /people
post /people
get /cats
post /cats

@tables
people
pplID *String
insert Lambda
update Lambda
delete Lambda

cats
pplID *String
catID **String
With architect installed, this .arc file in your application’s root directory, and with your cloud provider’s credentials properly stored, running
npm run create
 will generate a file structure that follows this architecture and stubs out simple functions (in this case AWS Lambda) for each HTML and JSON endpoint as well as for the insert, update and delete triggers on the people table. After that, architect then goes out to our cloud provider and provisions staging and production versions of each function and in the case of AWS, sets up API Gateway routes and Dynamo DB tables with the appropriate indexes and triggers and then deploys the sample code to your functions and displays the staging and production URLs that are now live.
Now, editing the generated code to perform the actual work you want each function to do and running
npm run deploy
 will deploy those updates to the cloud and you are off and running. This is just a simple overview and you can check out all of the additional things architect can help you with like SNS messages, scheduled functions, DNS and more by visiting the project website which is also running in a completely serverless environment that is managed by architect at https://arc.codes.
There are also a number of new features and experiments being worked on, some of which in collaboration with the Marko team, which include:
  • Support for multiple cloud platforms
  • Life-cycle events like beforeCreate and afterCreate
  • Plugin support
  • Generation of AWS SAM configuration files from a .arc file

Simple. Fast. Progressive. Trusted.

These are the four key features you should look for when deciding on a JavaScript library or framework and Marko has all of these things. Originally created by the team at eBay, Marko is:
  • a component-based UI library that is extremely simple to learn as it is about as close as you can get to just HTML, CSS and JavaScript
  • extremely fast thanks to the very small runtime and it’s ability to render the UI server side and then stream those components to the browser
  • able to go progressively from a simple HTML template to UI components with complex interactions
  • trusted by high-traffic sites like ebay.com to work quickly and reliably no matter the user load
What makes Marko different from some of the more “popular” JavaScript frameworks in use today is how easy it is to start using but how powerful it is once you dive in a bit deeper. Marko allows you to create entire UI compenents in a single file with the
.marko
  extension that include your HTML, CSS and JavaScript. Here is an example of a simple button component that is nicely styled and counts the number of times it is clicked and displaying that count.
class {
    onCreate() {
        this.state = { count:0 };
    }
    increment() {
        this.state.count++;
    }
}

style {
    .count {
        color:#09c;
        font-size:3em;
    }
    .example-button {
        font-size:1em;
        padding:0.5em;
    }
}

<div.count>
    ${state.count}
</div>
<button.example-button on-click('increment')>
    Click me!
</button>
You can see that reactive component in action on the Marko homepage. But this is just the beginning. Marko provides tags for flow control, reusing content, asynchronously loading content and even creating your own custom tags. And where things get even more interesting is when you take a look at some of the integration the Marko team has been doing with the architect team. Some recent integration and ongoing work includes:
  • The proposal and initial implementation of the plugin system for architect and a Marko plugin for architect to tap into the new beforeCreate and afterCreate life-cycle events in architect to pre-build Marko components before deploying them into a cloud function.
  • Automatically creating an AWS S3 bucket, uploading static assets like images, CSS files, etc to the bucket and then rewriting the URLs to those assets, so they can be requested client-side.

Embracing the New Metaphor

The architect and Marko teams are continuing their collaboration to further ease the ability for JavaScript developers to continue using the component-based UI model they are used to while moving to the serverless infrastructure that may have eluded them until now. To learn more about these projects and their collaborative efforts including samples, demos, workshops and more, or to just chat with the teams, check out the following resources and join the JS Foundation newsletter using the form below.
architect
  • Website – https://arc.codes
  • GitHub
  • Slack
Marko
  • Website – https://markojs.com
  • GitHub (main)
  • GitHub (samples)
  • Gitter

Subscribe to the JS Foundation Newsletter

The post JS Foundation Brings Fully Serverless Applications to the Masses appeared first on JS Foundation.