Transcendence. Where does the backend stop and the frontend begin?

Transcendence. Where does the backend stop and the frontend begin?

Transcript

1. TRANSCENDENCE WHERE DOES THE BACKEND STOP AND THE FRONTEND BEGIN? Jamie Hurst
2. 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
3. WHERE TO BEGIN...
4. ONCE UPON A TIME...
6. WEB DEVELOPERS Web and graphic designers handled the actual designing Everything else was left to the web developer... Backend logic, HTML, CSS, JavaScript, Flash!
7. WHAT CHANGED? Devices Complexity of languages Need for clear role separation and specialisms JavaScript's role
8. JAVASCRIPT HAS EVOLVED <script language="JavaScript" type="text/JavaScript"> </script> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //-->
9. THEN IT BECOME THIS... $.ajax({ url: "test.html", done: function (data) { // Do something }, error: function() { alert("something broke"); } });
10. NOW, WE HAVE... A myriad of frameworks and libraries (Angular, React, Backbone, etc.) Web applications scripted entirely from JavaScript ECMAScript 6 - developing JavaScript further
11. 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...
12. MY EXPERIENCE Strictly my opinions only; open for discussion
13. FRONTEND ROLE NOT DESIGN HTML CSS JavaScript? Templates?
14. LOGIC APIs are defined by the backend developer They can be implemented by the frontend developer I write stubs and examples
15. LOGIC EXAMPLE <nav id="pagination"><ul></ul></nav> <!-- JS example --> <script> </script> $(document).ready(function () { fetchPages(); // Defined elsewhere // Handle changing page $('.pagination') .on('click', 'a', function () { $('form input[name=page]').val($(this).text()); fetchPages(); return false; }); });
16. 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
17. 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) --}} <nav><ul> {% for p in pages %} {% if p.id == currentPage %} <li class="current"><a href="{{ a.url }}">{{ a.name }}</a></li {% else %} <li><a href="{{ a.url }}">{{ a.name }}</a></li> {% endif %} {% endfor %} </ul></nav>
18. SHARE THE LOAD... Especially with testing
19. WHAT CAN YOU DO?
21. 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...
22. FRONTEND DEVELOPERS Don't be afraid of templating languages Work with backend developers on the JavaScript Communication - no person is an island