TRANSCENDENCE WHERE DOES THE BACKEND STOP AND THE FRONTEND BEGIN? Jamie Hurst 

WHY I'M HERE Specialist web development company Build web apps, APIs and integrations Developer for over 8 years Backend developer, mostly... Work with a team of multi-talented developers 

WHERE TO BEGIN... 

ONCE UPON A TIME... 

No content

WEB DEVELOPERS Web and graphic designers handled the actual designing Everything else was left to the web developer... Backend logic, HTML, CSS, JavaScript, Flash! 

WHAT CHANGED? Devices Complexity of languages Need for clear role separation and specialisms JavaScript's role 

JAVASCRIPT HAS EVOLVED 

THEN IT BECOME THIS... $.ajax({ url: "test.html", done: function (data) { // Do something }, error: function() { alert("something broke"); } }); 

NOW, WE HAVE... A myriad of frameworks and libraries (Angular, React, Backbone, etc.) Web applications scripted entirely from JavaScript ECMAScript 6 - developing JavaScript further 

JAVASCRIPT IS BLURRING THE BOUNDARIES What should a frontend developer know about JavaScript? Where does the backend developer need to get involved? JavaScript now IS a server-side language! (Node.js) This will continue to change... 

MY EXPERIENCE Strictly my opinions only; open for discussion 

FRONTEND ROLE NOT DESIGN HTML CSS JavaScript? Templates? 

LOGIC APIs are defined by the backend developer They can be implemented by the frontend developer I write stubs and examples 

LOGIC EXAMPLE

$(document).ready(function () { fetchPages(); // Defined elsewhere // Handle changing page $('.pagination') .on('click', 'a', function () { $('form input[name=page]').val($(this).text()); fetchPages(); return false; }); }); 

TEMPLATING Many, many templating languages (raw PHP, Blade, Twig, etc.) That's not even mentioning any of the JavaScript based ones I write examples and guides where things aren't obvious 

TEMPLATING EXAMPLE {{-- Variables available: --}} {{-- pages - All available pages as array, contains [id, url, name] currentPage - Current page ID user - Logged in user object search - Any previous search (false if not available) --}}

{% for p in pages %} {% if p.id == currentPage %}
• {{ a.name }}
{{ a.name }} {% endif %} {% endfor %}



SHARE THE LOAD... Especially with testing 

WHAT CAN YOU DO? 

No content

BACKEND DEVELOPERS Don't make assumptions Don't overcomplicate things A little example goes a long way Use a templating system, not raw PHP Do not touch the markup or CSS... 

FRONTEND DEVELOPERS Don't be afraid of templating languages Work with backend developers on the JavaScript Communication - no person is an island 

No content