Apr 24 2017
Apr 24
April 24th, 2017

Making Huge Strides Back to Desktop

So what is this Electron thing everyone keeps talking about? Even if you haven’t heard of it, you may have used it! With over 4 millions daily users on Slack’s business oriented chat system, their cross-platform desktop application helps them reach their users outside of browsers, but these systems are in fact part of the same thing.

Back in May 2014, prolific bastions of open source and $2b valuated company, GitHub, took the custom application wrapper it originally created for its Atom code editor and released into the world—and Electron was born. Rebranded from “Atom Shell” in 2015, Electron began to take off almost immediately, allowing regular web developers the ability to make native-like, high performance desktop applications using the exact same HTML, CSS, and JavaScript technologies they use to make the rest of the web.

Piggybacking on the huge wave of API first work in Drupal 8 utilized via the Waterwheel client wrapper, building with Electron allows you to create nearly native desktop experiences using frameworks like React, Redux, Angular, or anything else that your team can construct to run in a web browser. Beyond even that, Electron gives JavaScript direct access to low level Node.js and operating system APIs, allowing your application direct file access, running custom binaries for data processing, execution of alternative scripting languages, serial port or hardware access, and tons more.

Supercharge Your Next Web App

This year at DrupalCon Baltimore, we present “Supercharge Your Next Web App with Electron”, a session that digs deep and covers everything you need in order to dip into the waters of Electron. We’ll talk about what big companies have already taken the plunge and even provide a checklist for when not to move from the web to a desktop app.

Though an Electron app may not be the right choice for your next application, knowing what tools are available to you—and understanding their incredible possibilities—is going to serve you anytime you’re  considering user-oriented frameworks. Don’t miss out on this interesting view into a future of low-energy/high-return desktop applications in the DrupalCon Horizons track this year.

And, during active exposition hours, make sure to come over to the Four Kitchens booth to see a live demo of an Electron app powered by JavaScript—we build a robot artist!

Four Kitchens: We make content go

Recommended Posts

  • In this issue: Launching the new EW.com, MeteorJS; plus Sane Stack, Herp Derpsum, and switching to Sublime Text 3.
  • Fun & Games DrupalCon Baltimore is next week and we’re so excited to get back together in Baltimore! As the official Drupal Games sponsors, we take fun very seriously and…
  • "API First" or, as some may call it, "Decoupled Drupal", remains a topic of much discussion among the Drupal community. Here are just a few sessions being presented at Drupalcon…
James Todd
James Todd

James tinkers with hardware, software, and everything in between.

Events

Blog posts about ephemeral news, events, parties, conferences, talks—anything with a date attached to it.

Read more Events
Jun 06 2011
Jun 06

HTML5 LogoHTML5. If you haven't heard of it, perhaps you've seen the 50's superhero inspired logo (left) which is popping up all over? On May 18, 2011, Drupal creator, Dries Buytaert, announced that HTML5 is not only going to be one of the top five initiatives for Drupal 8, but that the default doctype for Drupal will switch from XHTML to HTML5. What's this mean to you, a Drupal dev or Drupul user? Let's find out.

1. First of All, What is HTML5?

A couple years ago, at Google I/O, HTML5 was described as a convergence of HTML, CSS and JavaScript. Since then, it seems, CSS has wandered off to become it's own entity: “CSS 3”, while the HTML and JS elements are gelling into HTML5.

Basically, HTML5 allows website builders – or perhaps, “web builders” since with HTML5, a single site will become much more hooked into the larger World Wide Web network of sites, interfaces and functions – to embed and manipulate video and audio elements, as well as to draw and/or create graphics through scripts (or “code”), that they will then be able to animate, through scripts. The “hook” into the WWW comes through structural tags being added to the language. Tags like “<header>”, “<nav>” and “<article>” will connect your web page elements to similar elements on other sites. This will allow for more intelligent linking via search engines, and will open up new possibilities for cataloguing the World Wide Web and for communication and/or interfacing across sites. These tags are part of the Semantic Web initiative.

APIs and DOMs

Dog, what's up with the APIs and DOMs? Application Programming Interfaces are “sets of rules and specs” that software programs follow to communicate with each other. Microsoft's DirectX is a collection of APIs that allow multimedia and game software to communicate with Windows, for example. Document Object Model is, mainly, the set of conventions that allows JavaScript to interact with HTML, or XML. With tags like “<video>” and “<audio>” these conventions become integral to HTML, instead of the add-ons they currently are: say “goodbye” to the “<embed>” tag!

Graphics

“<canvas>” is a new HTML tag that lets you create and animate 2D images using JavaScripts. Integration of Scalable Vectors Graphics (SVG), a type of graphic defined by XML code, is also part of HTML5.

In essence, a whole bunch more tools just got dumped into the web developer's toolbox; tools that will allow you to make browser-based games, interactions and animations – or web sites that behave like games, interactions and animations. Using a Chrome browser, check out Angry Birds in the browser, and RO.ME, music video-game-website hybrid, for examples of what's possible.

2. Why HTML5?

In other words, lots more interaction, animation, video and audio on web sites, as they evolve into much more fluid entities, morphing in size and functionality to display and be used across a plethora of screens and devices, while simultaneously becoming more integrated with other sites, libraries and functions, across the World Wide Web. Think of a tree, pushing down roots and pushing out branches; flowering, bearing the fruit of rich media, and cross-pollinating.

3. How HTML5?

"Ohhhh, no. Oh, no, oh, no, oh, no. I have to learn a whole bunch more tags and processes now, right?" Sort of – but not really.

Firstly, HTML5 is not difficult to learn. You're probably already using CSS3 to add dropshadows to images and round corners on your boxes. Using HTML5 is not going to be anymore difficult than that. One day, you are using “<embed>” to add your video; next, BAM! You are using “<video>” (and of course, stretching, colouring and enhancing your video through HTML5, just because you can).

Drupal? Drupal, a GUI for HTML, PHP and JS, is not going to stop being that. Imagine HTML5 goodness rolled into the Drupal CMS, with added functionality to allow you to add your own HTML5 tags when and where you wish. You will, in fact, be HTML5'ing before you know you are HTML5'ing.

Drupal Integration, High Level

The plan to integrate HTML5 is still being hashed out. Jacine Luisi (or, as she refers to herself, simply, “Jacine”), the initiative leader, describes the main goals thus:

  • implement HTML5 elements that will offer the most benefits to end users,
  • help contributed modules and themes, both existing and new, incorporate HTML5 elements, and
  • allow theme developers to use, or opt out of use of, HTML5's semantic elements,

These goals will be implemented by:

  • adding HTML5's semantic elements to core templates,
  • simplifying style and script elements, and
  • ensuring that input filters and functions accept HTML5 elements.

Drupal Integration, Mid-Level

If you'd like to get involved in integrating HTML5 into Drupal 8, your help is not only welcome, but requested! Here are the main pages to visit, to see what's happening and where you can help:

Remember, you don't need to code. Documentation, marketing, testing and user interface are just some of the areas in which you can contribute, aside from code.

The HTML5 Issue queue is a list of tasks that need to be addressed to implement HTML5 in Drupal 8's core.

At the HTML5 Working Group page you will find discussions, projects, documentation, events and even a job board.

Discussions include:

  • implementing HTML5 markup and APIs in Drupal
  • adding HTML5 support to Drupal 7
  • getting HTML5 native markup and form elements into Drupal 8 core.

Projects include:

Documentation includes HTML5 Myths and the wiki.

I highly encourage you to read the myths. Here's an example:

“Myth: HTML5 is not done, we should wait until it's done before implementing it in Drupal.

Fact: Most of HTML5 is dividable in 3 different groups: "it just works", "degrades by default", and "some effort required". See http://mathiasbynens.be/notes/html5-levels for additional information.

Also, the WHATWG, the driving force behind HTML5, has dubbed it a "living standard" that is constantly evolving. As such, the version number is less of an issue. The "2022" release date is nullified, and they instead will measure progress in feature milestones. HTML5 will still be documented by the W3C as an official spec, but the WHATWG will keep driving forward progress, simply calling it "HTML". More here...

Events include many IRC meetings, that you can attend without leaving your computer.

Lastly, here's a list of resources, largely courtesy of Jacine, to help you get started with HTML5:

That's it in a nutshell. HTML5 is going to make the web come alive with graphics, movement and communication. Drupal 8 is gearing up to seamlessly bring all of this life into the world's best CMS. Dig in, folks – and get involved!

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web