PyConZA 2014: "The elephant in the web application" by Iwan Vosloo

Iwan Vosloo The elephant in the web application

Overview • The typical web framework • What you’d have
to learn • Cognitive load • Lessons from the GUI • Our vision in context

Web basics GET /some/url HTML stylesheets, js, images, etc Hello
World ! The typical web framework JS

Framework duties def func(code code co) code code code code
code code GET /some/url map url to some code 1 HTML Template <html> <body> </body> </html> 2 read from a database 3 merge data with template 4 respond final HTML The typical web framework

User input GET /some/url HTML <form> POST /formurl REDIRECT GET
/result/url HTML Name: Save Hello John ! The typical web framework

Input Validation POST /formurl REDIRECT GET /result/url HTML Name: Save
validate form input render form with error messages validate before POSTing Name is required The typical web framework

Sessions POST /formurl GET /result/url GET /some/url The typical web
framework

Other stuff • Internationalisation (i18n) • Static files • ORM
(or other persistence) • Migration • Development tools The typical web framework

What you’d have to learn • Basic tools • Best
practice • Recurring problems • Platform quirks

Server-side framework @app.route('/') def show_entries(): db = get_db() cur =
db.execute('select * from addresses') entries = cur.fetchall() return render_template('show_entries.html', addresses=entries) What you’d have to learn | Basic tools

Template language {% block body %} {% from "_formhelpers.html" import
render_field %} <form action="{{ url_for('index') }}" method="post" class="add-entry"> <dl>{{ render_field(form.name) }} {{ render_field(form.email_address) }}</dl> <p><input type="submit” value="Add"> </form> <ul class="entries"> {% for address in addresses %} <li><h2>{{ address.name }}</h2> {{ address.email_address|safe }} {% endfor %} </ul> {% endblock %} What you’d have to learn | Basic tools

<html> <body> <form action="/add" method="post" class="add-entry"> <dl><dt><label for="name">Name</label></dt> <dd><input id="name"
name="name" type="text" value=""></dd> <dt><label for="email">Email Address</label></dt> <dd><input id="email" name="email" type="text" value=""></dd> </dl> <p><input type="submit” value="Add"> </form> <ul class="entries"> <li><h2>John doe</h2>[email protected] </ul> </body> </html> HTML What you’d have to learn | Basic tools

CSS ul.reahl-menu > li > a { display: inline-block; }
ul.reahl-menu > li { display: inline-block; zoom:1; *display:inline; position: relative; } ul.reahl-menu li > a { color: #fff; background: #bf8130; } <ul class=”reahl-menu”> <li class=”active”> <a href=”xxx”>Item 1</a> <li><a href=”yyy”>Item 2</a> </ul> Item 1 Item 2 What you’d have to learn | Basic tools

JavaScript & friends Your email [email protected] click inside input type
something What you’d have to learn | Basic tools

JavaScript & friends var input = $("input"); var label =
$("label"); input .bind("focus", function(){ if ( $(this).val() == "" ) { label.attr('hidden', 'true'); }}) .bind("blur", function(){ if ( $(this).val() == "" ) { label.removeAttr('hidden'); }}); if ( input.val() == "" ) { label.removeAttr('hidden'); } else {label.attr('hidden', 'true');} <span class="labelover"> <label>Your email</label> <span><input type="text"/></span> </span> .labelover {position: relative;} .labelover > label { cursor: text; position: absolute; bottom: 0; left: 0; z-index:1; } What you’d have to learn | Basic tools

Accessibility Hello World! Hello World! What you’d have to learn
| Best practices

Graceful degradation Hello World! Hello World! JS Hello World! Hello
World! CSS JS What you’d have to learn | Best practices

More best practices • Crawlability • Bookmarkable URLs • Device
independence • Fluid layout • Security tricks • ... What you’d have to learn | Best practices Hello World!

Concurrency aaa bbb ccc X X X aaa bbb ccc
X X X aaa bbb ccc aaa ccc ? What you’d have to learn | Recurring issues

Security authenticate authenticated browser coaxed to do stuff What you’d
have to learn | Recurring issues

Other recurring issues • Internationalisation done differently • Users with
unequal access to UIs • Different options for validation • Re-use of complicated UI elements • Handling of database transactions • ... What you’d have to learn | Recurring issues

What you aim to achieve Save Name: Email: Add Address
Address Book John: [email protected] Cognitive load

What you end up with js 1 template template css
python template python jq plugin Cognitive load

How GUIs work RAM process Lessons from the GUI

An analogy blue = 0x5846b0 screen.write(5, 5, blue) Lessons from
the GUI

Instead GUIs give you... • Resizable fonts • Windows with
title bars • Controls in those title bars • Menus • Buttons, Inputs and Events Lessons from the GUI

Imagine LabelOverInput(TextInput(self, input_field)) Your email [email protected] Standards change after 2014
Lessons from the GUI

Python only, nothing else needed class MyPage(TwoColumnPage): def __init__(self, view):
super(MyPage, self).__init__(view, style='basic') tabbed_panel = self.main.add_child(TabbedPanel(view, 'mytabbedpanel')) tab1_contents = P.factory(text='A paragraph to give content to the first tab.') tabbed_panel.add_tab(Tab(view, 'Tab 1', '1', tab1_contents)) tab2_contents = P.factory(text='And another ... to give content to the second tab.') tabbed_panel.add_tab(Tab(view, 'Tab 2', '2', tab2_contents)) tab3_contents = P.factory(text='Something else on the third tab.') tabbed_panel.add_tab(Tab(view, 'Tab 3', '3', tab3_contents)) Lessons from the GUI

Python only, nothing else needed class MyPage(TwoColumnPage): def __init__(self, view):
super(MyPage, self).__init__(view, style='basic') tabbed_panel = self.main.add_child(TabbedPanel(view, 'mytabbedpanel')) tab1_contents = P.factory(text='A paragraph to give content to the first tab.') tabbed_panel.add_tab(Tab(view, 'Tab 1', '1', tab1_contents)) tab2_contents = P.factory(text='And another ... to give content to the second tab.') tabbed_panel.add_tab(Tab(view, 'Tab 2', '2', tab2_contents)) tab3_contents = P.factory(text='Something else on the third tab.') tabbed_panel.add_tab(Tab(view, 'Tab 3', '3', tab3_contents)) Lessons from the GUI See this running at: http://www.reahl.org/examples/tabbedpanel/ More examples at: http://www.reahl.org/docs/3.0/features/

Python web frameworks Zope Django TGears Flask CherryPy Pyramid Our
vision in context

Python Others dream too GWT Wt Echo Wicket Tosca Widgets
reahl Java C++ Our vision in context

A word of warning b = Button() Our vision in
context

A word of warning Our vision in context JS JS
JS

Thanks & Questions www.reahl.org

PyConZA 2014: "The elephant in the web applicat...

PyConZA 2014: "The elephant in the web application" by Iwan Vosloo

More Decks by Pycon ZA

Other Decks in Programming

Featured

Transcript