2013 Flock To Fedora

These are live blog notes from the Flock to Fedora event, held at Charleston University South Carolina, USA. http://flocktofedora.org/

Usual disclaimer for live blogging: These are informal notes taken by me, Dave Crossland, at the event, and may or may not be similar to what was said by the people who spoke on these topics. Probably if something here is incorrect it is because I mistyped it or misunderstood, and if anyone wants corrections, they should email me immediately (dave@understandingfonts.com) – or post a comment. Thanks!

node-webkit
================

You know PhoneGap, that takes a HTML5 app and turns it into a iOS/Android app.

NodeWebKit does the same thing for desktops.

I’m from Jack Russel Software, we build mobile and web apps for Healthcare IT.

What is it?
—————————————–

You have ChromeFrame, the Chrome browser, and its event loop is melded to the event loop in NodeJS.

Build an app with HTML/CSS and JS – anything you can do in HTML5 on the client and NodeJS on the server. It tacks a little packaging file for the manifest and it puts them together into a “NW.zip” zip archive.

NodeJS has over 30k packages, and you can also use ‘GYP’ to use native libraries as well as JS libraries.

Node-Webkit is **fully** cross platform – you can run package the same app for Mac and Windows and any UNIX platform that Chromium runs on.

With HTML5 you get WebRTC, WebGL, and all the other good stuff – you can make your own personal Skype with WebRTC. Its powerful.

One catch is, with GNU+Linux, you need the right codecs installed; some versions don’t have them pre-installed (h264 and MP3)

Web Cams work, the HTML5 File API means you can drag and drop files into the window. There are NPAPI plugins that can work with it too.

Why?
—————————————–

There are several other things out there that do roughly the same thing.

1. Its all HTML5, there is no app-specific API like Adobe AIR – which they killed support for on GNU+Linux – and that had a proprietary API.

2. Combining the event loops of NodeJS and Chrome means that you run the server code at the same time as the client code.

3. Its easy and fun!

This is good for GAMES. The project founder made it for this reason. You can make apps and you don’t have to set up hosting for them; you can share the download bundle so people can use your software without a full cloud infrastructure.

When you are used to making Windows things, you make something that does what they need, bundle it, send it to them, and it runs your script :)

4. Cross platform.

There are 3 platform parts. You make a NW zip file, and you cat that together with the platform part. On GNU+Linux you have the NW zip and the binary that concatenate together. On Mac OS X you put it into the normal app bundle and put it into a DMG file system image.

On Windows, you make a ZIP that contains the NW.zip+binary and some DLLs. You make the Zip a ‘executable ZIP’ that will unpack it and run it, or you can package it with a ns-installer or similar to put it in c:\program files\app-name

Setting up your dev environment in Fedora
—————————————————————————

Get curl

$ sudo yum install -y curl

# get the node webkit package

$

# on recent GNU+Linux distributions (Fedora and Ubuntu) you need to symlink the libudev library to where Chromium expects it:

$ sudo ln -s /usr/lib64/libudev.so.1 /usr/lib64/libudev.so.0

# then put nw in your path :)

$ echo ‘$PATH:/path/to/nw’ >> ~/.bash_profile
$ source ~/.bash_profile

$ nw

Then you should see a browser window showing some ASCII art, and it has the normal Chromium dev tools.

So lets create a Hello World.

You need an index.html and then a package.json, and that JSON will set the name – window title – the html page to load on start – and if the toolbar should be displayed.

$ touch index.html
$ touch package.json
$ edit package.json
“`
{
‘name’: ‘Help World’,
‘main’: ‘index.html’
}
“`
$ edit index.html
“`
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
“`
$ nw .

And we see it :)

We have all NodeJS method available:

$ edit index.html
“`
<html>
<body>
<h1>Hello World</h1>
<script>
document.write(process.version);
</script>
</body>
</html>
“`

$ edit index.html
“`
<html>
<body>
<h1>Hello World</h1>
<script>
var http = require(‘http’);
http.createServer(function(req, res) {
res.end(‘Welcome’);
document.write(‘Something’);
}.
document.write(process.version);
</script>
</body>
</html>
“`

So you can use this to show a web app to an end user, and this runs your web app locally in a self container server-client bundle.

Live Code a simple application
—————————————–

We could do a TODO app….

$ mkdir todo;
$ cd todo;
$ npm install bower -g;

but lets look at a simple chat app

$ cd ~/src
$ git clone git://github.com/twilson63/flockChat.git;
$ cd flockChat
$ npm install
$ bower install
# bower is a client library package manager, so you can keep all your client side libraries up to date easily.
$ vim package.json
$ vim app/controllers/main.js
$ nw .
$

This shows you how to use Angular JS in nw. angularFire() is a ‘promise’ that simplifies the code a lot.

So you can see that this works. now start a new terminal window and run the program again, and you see that it is commencing.

Single browser means you have easy control over the browser experience.

Demos and Real World, Shipping Examples
—————————————–

This is not just a toy; some people are using this in businesses for shipping applications.

**LightTable** is the first big NodeWebkit app – www.lighttable.com – and Brett Victor laid out a vision a year ago, at worrydream.com, to see your code execute as you write it. This guy implemented his ideas. It loads snappy, and its powerful. Its build for Closure, and a lot of Closure devs are using it for their day to day work.

How may of you use MarkDown? **haroopad** is for you. http://pad.haroopress.com – and it uses very nice fonts :) It has GitHub’s Markdown extension, with colour coding of MarkDown code blocks.

There is a complete list of other Real World, Shipping Examples are in the nw wiki, http://github.com/rogerwang/node-webkit/wiki

There’s a kiosk mode, to make kid-safe things (which is on my mind a lot)

References
—————————————–

Wiki

Presentation

Questions
—————-

Dave Crossland: Could you talk more about using non-JS libraries?

A: You can use npm to get pre-made libraries, e.g. `npm install mysql`; then just `var mysql = require(‘mysql’);` :) So you can include the MS sql library, tedious, and you have a fully native JS sql library on Windows without extra libraries. Instead of writing batch files, you can give the user a very easy to run script. You can C libraries that have to be compiled in node, but you have to take some different steps; if you have a native module, to cpmile C/C++ code, you run it against the mw-gyp version of gyp. There is LevelUp, a way to use Level DB (a popular library) inside NodeJS, which means you can use a desktop library inside a web app. CouchDB is also popular.

Q:

A: You can use Browserify to bundle all your JS into a single file:

$ browserify index.js
$
#

Q: What do you use it for?

A: Very rich mockups. We make the HTML5 and leverage that into real applications that we host.

Q: So its for prototyping and rich demos?

A: Right. We have 1,000 feature requests, and we can use this to make little utility programs that help solve a specific need outside the main application development lifecycle. Also, we use it to deliver phone gap apps to QA teams. So they can test an app before you get to the phone testing thing; they don’t ned hardware.

* * *

Document Your Code, by Kushal Das
===================================

The Big Idea is: Documentation is Communication.

Documenting source code is critical to on boarding new developers to a project.

reStructuredText is the Pythonic markdown-style mark-up.

You need Fedora packages python-docutils and python-sphinx

“`
====================
Document Title Text
====================

SOmething in a paragraph.
“`

$ rst2html.py example.rst example.html
$ open example.html

:)

There is syntax for titles and headings, ul and ol lists, with auto enumeration with

1. Point
#. Something
#. Else

dl lists, command line option lists.

Literal blocks are done with ::

Look up the full syntax online :)

Q: converters to rst?

A: Yes, mediaWiki has a extension, and markdown2rst and rst2markdown exists.

pycon-us-2013.txt  is a good read, and this guy made a rst blogging tool, ‘Nicola’ – https://github.com/ralsina/nikola -

pocoo made http://sphinx-doc.org/

So lets see an example Python source code file, here is a simple class file with a `class Rectangle(object)` :)

“`
”’
This is a module of Rectangle class.
”’

class Rectangle(object):

def __init__(self, length, width):
self.length = length
self.width = width

def area(self):
”’
Returns the area of the rectangle.
”’
return self.length * self.width

def is_square(self):
”’
Finds out if it is a square or not.
”’
return self.length == self.width

“`

This is at http://kushal.fedorapeople.org/rectangle.py

lets turn it into a full module

$ mkdir shapes;
$ cd shapes;
$ touch __init__.py;
$ cp rectangle.py shapes/;
$ mkdir doc/;
$ touch doc/index.rst;

The index.rst is the project documentation.

“`
=================
The project
=================

Intro to the project.

“`

Now lets use Sphinx to add documentation:

“`
”’
This is a module of Rectangle class.
”’

class Rectangle(object):

def __init__(self, length, width):
”’
Returns an object of Rectangle class.

:arg length: Length of the rectangle
:arg width: Width of the rectangle

:return: rectangle object with given length and width.

.. notes::

This is a note

”’
self.length = length
self.width = width

def area(self):
”’
Returns the area of the rectangle.
”’
return self.length * self.width

def is_square(self):
”’
Finds out if it is a square or not.
”’
return self.length == self.width

“`

$ make html
$ open build/docs/index.html

$ touch doc/quickstart.rst;
“`
This is a quick start doc
————————–
This is the paragraph with a direct link to the project’s class like this :class:`~shapes.rectangle.Rectangle` class. or also a method like :meth:`~shapes.rectangle.Rectangle.area`.
“`

$ make html
$ open build/docs/index.html

We can now see this on the build/docs/index.html page

So you should have 3 pieces of essential documentation for any project:

1. A quick start page to get the most common usage going
2. A tutorial that is more in depth
3. API documentation

Lets make the 3rd now :)

$ touch doc/api.rst;
“`
API for our Shapes module
————————–

.. autoclass:: shapes.rectangle.Rectangle
:members:

“`
$ make html
$ open build/docs/index.html

We can also

$ make pdf

This creates LaTeX from the RST and then a PDF from that.

https://github.com/kushaldas/retask is an example of a real Python package I made that I used Sphinx to document at http://retask.readthedocs.org/en/latest/

 

* * *

 
Test Automation, Tim Flink
============================

Task Automation isn’t yet where I want to be. Don’t be offended!

Intro
——————————–

I work at Red Hat, allocated to Fedora QA, so I spent a lot of time with AutoQA.

Where we are?
——————————–

What is TA?

There are lots of TASKS we are interested in that are not always TESTS.

Eg, Create a boot.iso ,upload a new cloud image and run it, or run static code analysis. Corps usually assign that to corporate engineering, but in Fedora we want to automate it.

Thats why this is TASKS not TESTS.

What’s up with AutoQA? Its a great idea but there are issues with the implementation, that have stopped it expanding beyond the initial deployment:

1. Tight Coupling with AutoQA. Its tied to koji and bodhi

2. Accepting contributions. I want it to be like anyone who can write a test and submit it can do so and have it run.

3. Results and reporting. aQA generates a lot data that no one has time to look at. Automated/AI analytics are tricky due to the current logging/reporting setup. Notification of interested parties also not good enough.

4. Scaling.

Where are we going?
——————————–

my Design Philosophy is to make it flexible, as I can’t predict what will be needed 12 months out.

requirements: taks should be easily executable outside the framework, and dev environments should be much easier to set up.

Here’s a diagram of the basic idea here. Use something for passing messages, and 3 program.

Signal Input, originally use FedMsg, but that has no guarantees for service.

Rule Engine, listen for msgs, decide when to run tasks

Task Execution, run tasks

Result storage, store the results

Signal Results, signal the results

Design Summary: Each part of taskbot could be replaced with minimal pain. A wide variety of tasks could be supported.

How are we going to get there?
——————————–

A phased approach. initial exec and basic status recording; analytics; and better execution preparation – smoke tests, sanity tests.

Immediate todos: Figure out task description, plan recording status and log storage.

How can you help?
——————————–

Right now I’m hoping for ideas, suggestions what you will like to write, and SUPPORT, so we don’t leave out any low hanging fruit. Don’t’ want to block anything due to early design decisions.  Automated tests which no one reads are useless.

Questions
——————————–

Q: FedMsg reliability? Async messaging is a messy space. A msg broker may die… You can compare what comes through the messaging system with the expected results to see if it went through.

Fedora Videos
=======================

Rules: CC license, non offensive, and provide interesting content.

Its good to provide videos that users can follow along with.

Tatica: There is a lack of interest in reading the wiki. When people hear ‘this is how to become a contribute, read this very long wikipedia page’, they don’t read it. So I’d like to see some videos for the basic things, what fedora is, how to get fedora… and merge that with the Fedora College project.

Q: Tools to make screencasts?

A: Audacity to record my audio, RecordMyDesktop to capture the screen, Cheese to show webcam. KDEnLive to sync them.

* * *

Life of a Package
=====================

Lets look at the life cycle of a package, and see if we can improve things.

Upstream projects live all over the place. ‘Upstream’ is the logical master copy, usually hosted on GitHub, SourceForge, FedoraHosted, GNU Savannah, Bitbucket, Launchpad, or even their own server. A repo is consumable.

There are lots of resources for making RPMs. FedoraProject wiki has a ‘How to Create an RPM Package’ page, a lot of videos and presentation around (spot’s are good).

Once you have an RPM, it must be reviewed, and that happens in fedora on Bugzilla.

In the fedora-infra git repo there is a process-git-requests script that lets an scm admin  go through pending packages, review them, and add them to pkgdb. This creates a new empty git repo for the package, and the admin updates the bug to say the request is processed.

Rawhide, is always moving forward and should always be usable; each day script composes all packages in f-N tag.

GObject
====================

[20 mins late]

Create an interface in Glade, and Glade saves that as an XML file.

Slide 8: Key GTK information. Objects + Widgets. GObject is based on abstract classes and inheritance. each object has its own properties and methods. A checkbox has a checked stat property, and it inherits properties and methods that go quite far up. A chair object has all sorts of properties, and if you have a folding chair, you inherit the chair object and just add the fold() method.

This is where devhelp comes in, as it provides a hierarchical listing of inheritance.

Slide 11: This is an example of how the hierarchy works. GObject, GtkWidget, GtkContainer, GtkBin, GtkButton. So anything you can do with a GtkBin you can do with a GtkButton.

Typically the UI in an application is a object with its own class. So you can subclass the Gtk.Application class:

“`
class MyProgUI(Gtk.Application):
def __init__(self):

“`

So you subclass to get all these nice pre made things for free. This is normal python.

How to get from a Glade UI XML file to something you can work with on Python?

You load the gi.repository

`from gi.repository import Gtk`

Create a GtKBuilder object and use GtkBuilder.add_from_file() to load objects from the XML form Glade.

Signals.

This is how interactivity works. You have a main loop and an interaction loop. Interaction generates a signal that is caught to trigger a function. Signals are EMITTED

Eg, to make a close_button() method associate with a button object from Glade named ‘close’, you do `self.close_button = self.builder.get_object(‘close’)`

Almost any widget can use the connect() method to map a signal to a callback.

The callback is the method that reacts to the user’s action.

`self.close_button.connect()` (incomplete example)

GTK main loop.

The main loop allows your application to accept input from the user – mouse event, key presses, etc.

“`
if __name__ == ‘__main__’:
myProg = MyProgUI()

“`

Always connect signals to let the user quit the application! For a main or single window, an easy way is, main_quit():

`self.window.connect(‘destroy’, Gtk.main_quit)`

Show widgets before the main loop runs using show_all(). You can set visible properties, or use hide()/show() methods.

So, as a newbie, you can use Glade to get to know interface widgets, and develop to understand the internals of each widget.

You can also use python methods to build your UI programmatically.

You can change your UI as you go! Eg, as a timer runs, you can change the label as the timer changes.

Q: bpython is super useful to traceback object inneritance.

DC: Hmm, this is too complex for me. I just want `filePath = GetFile(“Open File Window Title”)` to get the file path, and fopen() like normal python!

* * *

FESCo
============

Q: Are you bringing back fedora-core and fedora-extras?

A: No! That was a bad idea, where f-c was only for Red Hat employees, and wasn’t really an open source project, but it was open source code.

This entry was posted in Knowledge. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • What we do

    Understanding Fonts is a type design training business. If you'd like an event in your college or city, let Dave know: dave@understandingfonts.com