Beyond The MVC

33 %
67 %
Information about Beyond The MVC

Published on July 10, 2008

Author: george.james

Source: slideshare.net

Beyond the MVC: EWD and Design-oriented Web Development Rob Tweed M/Gateway Developments Ltd

Web Application Development The industry-accepted state of the art: The equivalent of expecting programmers to use assembler and for database developers to access disc blocks

The industry-accepted state of the art:

The equivalent of expecting programmers to use assembler and for database developers to access disc blocks

Web Application Development One of the great developments in computing was the development of high-level programming languages

One of the great developments in computing was the development of high-level programming languages

Web Application Development One of the great developments in computing was the development of high-level programming languages By adding a level of abstraction, they provide an illusion You can describe what you want to do at a much higher conceptual level How it all works in machine code is looked after for you How it actually works may be very different from the conceptual abstraction

One of the great developments in computing was the development of high-level programming languages

By adding a level of abstraction, they provide an illusion

You can describe what you want to do at a much higher conceptual level

How it all works in machine code is looked after for you

How it actually works may be very different from the conceptual abstraction

Web Applications Programs that: Generate HTML Are accessed via HTTP

Programs that:

Generate HTML

Are accessed via HTTP

Web Applications Or….web pages: That have some content fetched from a database Whose flow is determined in part by the user’s interaction and/or content in the database

Or….web pages:

That have some content fetched from a database

Whose flow is determined in part by the user’s interaction and/or content in the database

Web Applications Programs that generate HTML Actually what happens! Web pages: That have some content fetched from a database Whose flow is determined in part by the user’s interaction and/or content in the database

Programs that generate HTML

Actually what happens!

Web pages:

That have some content fetched from a database

Whose flow is determined in part by the user’s interaction and/or content in the database

Web Applications Programs that generate HTML Actually what happens! Web pages: That have some content fetched from a database Whose flow is determined in part by the user’s interaction and/or content in the database Conceptual view only

Programs that generate HTML

Actually what happens!

Web pages:

That have some content fetched from a database

Whose flow is determined in part by the user’s interaction and/or content in the database

Conceptual view only

Web Application Development The industry is focused on web applications being programs that generate HTML Web application development is the exclusive domain of programmers Give them the design They’ll make it work for you

The industry is focused on web applications being programs that generate HTML

Web application development is the exclusive domain of programmers

Give them the design

They’ll make it work for you

Why web development toolsets? The web was never designed as an application platform: Stateless No built-in concept of a meaningful ongoing dialogue between browser and web server HTTP protocol Simple request/response protocol Wide open, simple URL + name/value pair structure Inherently insecure and open to abuse

The web was never designed as an application platform:

Stateless

No built-in concept of a meaningful ongoing dialogue between browser and web server

HTTP protocol

Simple request/response protocol

Wide open, simple URL + name/value pair structure

Inherently insecure and open to abuse

Why web development toolsets? Programmer’s responsibility to: Create the illusion of a session Provide the navigation between generated pages in response to user activity Provide a consistent and adequate layer of security around the URL requests within a session

Programmer’s responsibility to:

Create the illusion of a session

Provide the navigation between generated pages in response to user activity

Provide a consistent and adequate layer of security around the URL requests within a session

Why web development toolsets? Rather than everyone re-inventing wheels, tools have developed that automate these mechanisms Almost all are based on the concept of the Model View Controller (MVC)

Rather than everyone re-inventing wheels, tools have developed that automate these mechanisms

Almost all are based on the concept of the Model View Controller (MVC)

Web Application: MVC View Web Page 1 Step 1: User decides what to do: eg clicks button or link

Web Application: MVC View Web Page 1 Step 2: URL sent to controller Controller

Web Application: MVC View Web Page 1 Step 3: URL analysed and mapped to corresponding business logic Controller Business logic URL map

Web Application: MVC View Web Page 1 Step 4: Business logic selects next view Controller Business logic URL map View Database (model)

Web Application: MVC View Web Page 1 Step 5: View is generated Controller Business logic URL map View Web Page 2 Database (model)

Web Application: MVC View Web pages are programmatically-generated markup = the “view” The URL is the focus of attention Closely reflects how it actually works Only a very slight level of abstraction Totally programmer orientated paradigm Focuses on the how The what and the design gets lost in a ton of code

Web pages are programmatically-generated markup = the “view”

The URL is the focus of attention

Closely reflects how it actually works

Only a very slight level of abstraction

Totally programmer orientated paradigm

Focuses on the how

The what and the design gets lost in a ton of code

What’s the problem? Design

Design

What’s the problem? Design: the single most important criterion that determines whether or not a web application will be successfull

Design: the single most important criterion that determines whether or not a web application will be successfull

What’s the problem? Design: the single most important criterion that determines whether or not a web application will be successfull In the MVC paradigm: Designer storyboards the application Design agreed Handed over to programmers

Design: the single most important criterion that determines whether or not a web application will be successfull

In the MVC paradigm:

Designer storyboards the application

Design agreed

Handed over to programmers

The “Eh?” Team Design: the single most important criterion that determines whether or not a web application will be successfull In the MVC paradigm: Designer storyboards the application Design agreed Handed over to programmers From this point onwards, designer can no longer participate in the life-cycle of the application What the programmers develop is incomprehensible

Design: the single most important criterion that determines whether or not a web application will be successfull

In the MVC paradigm:

Designer storyboards the application

Design agreed

Handed over to programmers

From this point onwards, designer can no longer participate in the life-cycle of the application

What the programmers develop is incomprehensible

What’s the problem To make matters worse:

To make matters worse:

The “Eh?” Team again Little discipline applied by MVC environment MVC “plumbing” isn’t automated: How to submit, post and validate forms is left to each programmer In-page coding is a free-for-all Cut, paste and modify components 1 or more years later, nobody can understand their own code, let alone another developer’s Quicker to rewrite pages than figure out how they work

Little discipline applied by MVC environment

MVC “plumbing” isn’t automated:

How to submit, post and validate forms is left to each programmer

In-page coding is a free-for-all

Cut, paste and modify components

1 or more years later, nobody can understand their own code, let alone another developer’s

Quicker to rewrite pages than figure out how they work

The industry solution? AjaxWorld: Yakov Fain (Farata Systems), Mar 30, 2008: Do We Need to Teach Designers Programming? “ Adobe invited professors from different schools to discuss what has to change in the curriculum of Visual Design and Software Engineering disciplines so designers can understand programming better and software developers would be better at designing the user experience” “ Do we need to breed new creatures called d-e-s-i-g-n-o-p-e-r and d-e-v-i-g-n-e-r? “ “ Developers are from Mars; designers are from Venus”

AjaxWorld: Yakov Fain (Farata Systems), Mar 30, 2008:

Do We Need to Teach Designers Programming?

“ Adobe invited professors from different schools to discuss what has to change in the curriculum of Visual Design and Software Engineering disciplines so designers can understand programming better and software developers would be better at designing the user experience”

“ Do we need to breed new creatures called d-e-s-i-g-n-o-p-e-r and d-e-v-i-g-n-e-r? “

“ Developers are from Mars; designers are from Venus”

The industry solution? They don’t actually have one

They don’t actually have one

What’s the problem again? Web application development tools are the equivalent of assembler: Marginally less of an abstraction than machine code Web application development needs to be abstracted Design-focused paradigm Automate the MVC right out of the equation

Web application development tools are the equivalent of assembler:

Marginally less of an abstraction than machine code

Web application development needs to be abstracted

Design-focused paradigm

Automate the MVC right out of the equation

Design-oriented development

“ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page

Web Application Web Page 1 From a designer’s point of view: Database Step 1: Run a method that fetches the data needed for the page fetchData()

Web Application Web Page 1 From a designer’s point of view: Step 2: Display the page

Web Application Web Page 1 From a designer’s point of view: Step 3: User decides what to do: eg clicks button or link

Web Application Web Page 1 From a designer’s point of view: Database Step 4: Method called that validates and saves data into database saveData()

Web Application Web Page 1 From a designer’s point of view: Step 5: Move to next page Next Page Web Page 2

Web Application From a designer’s point of view: Repeat the process…. Web Page 2 Database fetchData2()

Design-focused Web Applications Page content and navigation is the primary focus No programming code in pages “ Fetch data” method called when page loads “ Save/validate” methods linked with user-triggered events (eg submit buttons) Technical stuff should “just work”: Invocation of methods Session and security management

Page content and navigation is the primary focus

No programming code in pages

“ Fetch data” method called when page loads

“ Save/validate” methods linked with user-triggered events (eg submit buttons)

Technical stuff should “just work”:

Invocation of methods

Session and security management

“ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page

Design-focused Web Applications Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save

Great idea but can it be done?

Great idea but can it be done? Yes! Enterprise Web Developer (EWD)

Yes!

Enterprise Web Developer (EWD)

EWD’s view of a web Application Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save

EWD’s Ajax Framework Event-driven DOM manipulation: replacement of innerHTML Page fragments EWD pages that just contain the replacement markup Pre-page and action scripts Just specify 3 key things: Event Page fragment name Target Id

Event-driven DOM manipulation:

replacement of innerHTML

Page fragments

EWD pages that just contain the replacement markup

Pre-page and action scripts

Just specify 3 key things:

Event

Page fragment name

Target Id

EWD’s view of a web Application Container Page Fetch data Pre-page Script EWD State & Session Management Cach é/ GT.M Server Front-end technology (WebLink, PHP, CSP etc)

EWD’s view of a web Application Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script Pre-page Script EWD State & Session Management Cach é/ GT.M Server XMLHttpRequest

EWD’s view of a web Application Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script EWD State & Session Management Cach é/ GT.M Server

EWD’s view of a web Application Container Page EWD State & Session Management Cach é/ GT.M Server

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html>

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Pretty normal web page apart from <ewd:config> tag

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd“> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will fetch data for this page

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd“ > <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Use EWD’s virtual MVC

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*“ ></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Data values automatically populate the forms at run-time No programming in the page

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will validate and save data if this button is clicked

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d“ ></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Next page to display if no errors occur during validation. Equivalent to selecting next view

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd &quot;>Log out</a> </body> </html> Next page if hyperlink clicked

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Note: No coding in the page No language-specific constructs apart from call-outs to pre-page and action scripts

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> EWD will compile this page to the technology of your choice (eg PHP, JSP etc) EWD will look after handling the appropriate MVC run-time environment for your selected technology

The “A” Team Designer stays in control throughout the lifecyle Designer doesn’t need to have any knowledge of programming, business logic or database structure/content Programmer just focuses on business logic to fetch/validate/process/save data doesn’t waste any time on the “plumbing” Isolated from design issues Standardised processes Discipline occurs because it’s the line of least resistance during development

Designer stays in control throughout the lifecyle

Designer doesn’t need to have any knowledge of programming, business logic or database structure/content

Programmer just focuses on business logic to fetch/validate/process/save data

doesn’t waste any time on the “plumbing”

Isolated from design issues

Standardised processes

Discipline occurs because it’s the line of least resistance during development

Interfacing design and programming Clearly need a conceptual interface through which the designer and programmer can inter-operate This is provided by the “EWD Session”

Clearly need a conceptual interface through which the designer and programmer can inter-operate

This is provided by the “EWD Session”

The EWD Session EWD Page EWD Session Database Provides the interface between the designer and the programmer Programmer Using APIs provided By EWD Designer Using special syntax to refer to Session values or EWD custom tags

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Programmer creates session variable in pre-page script setSessionValue()

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Designer uses the session variable in the page

A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> When form is submitted EWD will automatically persist username as a session variable. Value will be whatever was typed by the user <?= #username ?> can be used by designer in any other page

Security Management EWD’s compiler and run-time automatically tokenises all URLs Randomly-generated character strings Controller rejects URLs with invalid tokens Tokens provide pointer to the user’s session Completely automatic EWD creates at runtime, eg: <a href=“Example1b.php?ewd_token=U3FPqTKSi6tr7kMtT8bNMhmG2iMnT1&n=qXLT6jwFvlSUhO4ZBRu7Ol1leYVjCp&quot;> Designer just specifies: <a href=“Example1b.ewd”>

EWD’s compiler and run-time automatically tokenises all URLs

Randomly-generated character strings

Controller rejects URLs with invalid tokens

Tokens provide pointer to the user’s session

Completely automatic

Custom Tags EWD’s functionality can be extended by defining XML-based custom tags You define the XML DOM transformations that the compiler will make to a page when encountering an instance of your custom tag Hugely powerful Has been used to create very easy-to-use custom tags for ExtJS, Emprise JS Charts, Dojo and YUI Describe what you want, eg a grid Not how , ie the associated complex Javascript Further encourages standardisation and discipline because they save time

EWD’s functionality can be extended by defining XML-based custom tags

You define the XML DOM transformations that the compiler will make to a page when encountering an instance of your custom tag

Hugely powerful

Has been used to create very easy-to-use custom tags for ExtJS, Emprise JS Charts, Dojo and YUI

Describe what you want, eg a grid

Not how , ie the associated complex Javascript

Further encourages standardisation and discipline because they save time

Multi-lingual Deployment EWD’s compiler can automatically detect all text in a page Creates and maintains text/phrase database Substitutes call-backs in run-time page Just get text/phrases translated At run-time, call-backs in page retrieve translated text Developers continue to design using their native language No impact on development Can be done retrospectively for existing EWD pages Built-in contextual review mode

EWD’s compiler can automatically detect all text in a page

Creates and maintains text/phrase database

Substitutes call-backs in run-time page

Just get text/phrases translated

At run-time, call-backs in page retrieve translated text

Developers continue to design using their native language

No impact on development

Can be done retrospectively for existing EWD pages

Built-in contextual review mode

Design-focused Development Immediate benefits: Much higher productivity compared with conventional techniques Applications are focused on design requirements designer retains control throughout the life-cycle Cuts out all the complexity of Ajax Integrates with most UI/widget libraries Leverage “best of breed” instead of reinventing wheels Significantly lower maintenance than conventional techniques Because you just describe the what , not the how Build an “A” team, not an “eh?” team!

Immediate benefits:

Much higher productivity compared with conventional techniques

Applications are focused on design requirements

designer retains control throughout the life-cycle

Cuts out all the complexity of Ajax

Integrates with most UI/widget libraries

Leverage “best of breed” instead of reinventing wheels

Significantly lower maintenance than conventional techniques

Because you just describe the what , not the how

Build an “A” team, not an “eh?” team!

Conclusions Design-focused web application development is an essential step forwards EWD is unique in being the only toolset that has adopted this approach Create an “A” team and leave your “Eh?” team behind!

Design-focused web application development is an essential step forwards

EWD is unique in being the only toolset that has adopted this approach

Create an “A” team and leave your “Eh?” team behind!

 

#datetime presentations

Add a comment

Related presentations

Related pages

Beyond MVC: A New Look at the Servlet Infrastru ...

This article is the first of two that examine in depth the origins of the Model-View-Controller (MVC) d esign pattern and its misapplication to servlet
Read more

Model–view–controller - Wikipedia, the free encyclopedia

Model–view–controller (MVC) is a software architectural pattern mostly (but not exclusively) for implementing user interfaces. It divides a given ...
Read more

MVC | Beyond Java

These days it’s kind of official: AngularJS implements the Model-View-Whatever paradigm. That’s a nice solution to a series of fruitless discussions ...
Read more

asp.net mvc 3 - MVC3 - Passing data beyond the model to ...

Is there a way to pass a piece of extra data along with a model to a Partial view? E.G. @Html.Partial("_SomeTable", (List)ViewBag.Table ...
Read more

Organize PHP Code in MySQL With MVC Architecture

Using MVC architecture provides you with in-depth training on Business. Taught by Kevin Skoglund as part of the PHP with MySQL Beyond the Basics
Read more

Head: To MVC... and Beyond! - Alex Chaffee's Purple Technology

DRAFT - DRAFT - DRAFT Head: To MVC... and Beyond! Subhead: Take your architecture as far as it needs to go (and no farther) Abstract: Many experts advise ...
Read more

BeyondAdmin - AdminApp + AngularJS + MVC | Admin ...

BeyondAdmin Features: Available in 5 different version: Asp.net MVC version, AngularJS version, Asp.net Web Forms Version, HTML version and Front-End.
Read more

MoVE beyond MVC - Wagn - Go together. - Wagn

I'm returning here as this become potentially relevant to my day job where I work on an enormously complex Rails MVC CMS. I am painfully aware of just how ...
Read more