kamrava/laravel-spfjs

Integrating SPF.js With Laravel

, _(*1)

, _(*2)

Laravel SPF

Integrating SPF.js with Laravel, _(*3)

For Laravel 5.x, _(*4)

Laravel SPF package allows to bring awesome SPF.js to your Laravel app. Here is a description from SPF.js official doc :, _(*5)

Structured Page Fragments — or SPF for short — is a lightweight JS framework for fast navigation and page updates from YouTube., _(*6)

Using progressive enhancement and HTML5, SPF integrates with your site to enable a faster, more fluid user experience by updating just the sections of the page that change during navigation, not the whole page. SPF provides a response format for sending document fragments, a robust system for script and style management, an in-memory cache, on-the-fly processing, and more., _(*7)

Demo, _(*8)

Demo Source Code, _(*9)

Installation

1. Install with composer:

composer require kamrava/laravel-spfjs

1. Open your config/app.php and add the following to the providers array:

Kamrava\Spf\SectionViewServiceProvider::class

1. In the same config/app.php and add the following to the aliases array:

'SectionView' => Kamrava\Spf\SectionViewFacade::class

1. Run the command below to publish the package asset files:

php artisan vendor:publish --tag=public --force

And that's it! Start building out some awesome and fast Laravel app!, _(*10)

Get Started

Blade Files Structure, _(*11)

As you know each HTML page consists of:, _(*12)

head for meta tags as well as styles and title and etc.., _(*13)

body for your page body, _(*14)

script for javascript files, _(*15)

Most probably you were using some structure like this:, _(*16)

resources/view/admin/users-list.blade.php

And the file's content would be something like this :, _(*17)

@extends('layouts.master')
@section('title') Users List @stop
@section('head')
<link href="/css/style1.css" rel="stylesheet" />
<link href="/css/style2.css" rel="stylesheet" />
@stop
@section('content')
<table>
  ...
  @foreach($users as $user)
    <tr>
      <td>{{ $user->id }}</td>
      <td>{{ $user->name }}</td>
      ...
    </tr>
  @endforeach
</table>
@stop
@section('scripts')
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
@stop

Right? Ok, for using SPF.js in you Laravel app you need to break them into separate files and put them into sections directory as below :, _(*18)

resources/view/admin/users-list/sections/_title.blade.php
resources/view/admin/users-list/sections/_head.blade.php
resources/view/admin/users-list/sections/_body.blade.php
resources/view/admin/users-list/sections/_foot.blade.php

Then put each section content into related blade file. For instance the content of ـhead.blade.php must be:, _(*19)

<link href="/css/style1.css" rel="stylesheet" />
<link href="/css/style2.css" rel="stylesheet" />

And so on for other sections., _(*20)

Now, we have to combine them into two separate files! One for when SPF is not enabled for any reasons! and the other for when SPF is enabled :, _(*21)

First index.blade.php which located in : (For when SPF.js is not enabled), _(*22)

resources/view/admin/users-list/index.blade.php

with this content :, _(*23)

@extends('layouts.master')
@section('title')
  @include('admin.users-list.sections._title')
@endsection
@section('head')
  @include('admin.users-list.sections._head')
@endsection
@section('content')
  @include('admin.users-list.sections._body')
@endsection
@section('scripts')
  @include('admin.users-list.sections._foot')
@endsection

And spf_json.blade.php whcih located in : (For when SPF.js is enabled), _(*24)

resources/view/admin/users-list/spf_json.blade.php

with this content :, _(*25)

{
  "title": "{!! $section->title !!}",
  "head": "{!! $section->head !!}",
  "body": {
    "main-content": "{!! $section->body !!}"
    },
  "foot": "{!! $section->foot !!}"
}

main-content in the above code means we have a div with id main-content in the body tag, _(*26)

Cool, lets have a look at our master page which probably located here :, _(*27)

resources/view/layouts/master.blade.php

with this content :, _(*28)

<html>
<head>
   @include('layouts.head')
   @yield('head')
</head>
<body>
   @include('layouts.header')
    <div id="main-content">
       @yield('content')
    </div>
   @include('layouts.scripts')
   @yield('scripts')
</body>
</html>

Send requests, _(*29)

SPF does not change your site's navigation automatically and instead uses progressive enhancement to enable dynamic navigation for certain links. Just add a spf-link class to an tag to activate SPF., _(*30)

<!-- Link enabled: a SPF request will be sent -->
<a class="spf-link" href="/Admin/UsersList">Show Users List</a>

Return responses, _(*31)

In dynamic navigation, only fragments are sent, using JSON as transport. When SPF sends a request to the server, it appends a configurable identifier to the URL so that your server can properly handle the request. (By default, this will be ?spf=navigate), _(*32)

AdminController.php, _(*33)

use SectionView;

class AdminController extends Controller
{
    public function showUsersList(Request $request)
    {
      $users = User::all();
      if($request->input('spf') == 'navigate') {
        return SectionView::from('admin.users-list')->with(['users' => $users])->render();
      }
      return view('admin.users-list.index', compact('users'));
    }
}

Finally don't forget to load asset file in your scripts part of your master page!, _(*34)

<script type="text/javascript" src="{{ asset('vendor/laravel-spf/js/laravel-spf.js') }}"></script>

Boom! It's Done!, _(*35)

Browser Support

To use dynamic navigation, SPF requires the HTML5 History API. This is broadly supported by all current browsers, including Chrome 5+, Firefox 4+, and IE 10+., _(*36)

Credits

Maintainers:, _(*37)

1. [Hamed Kamrava](https://github.com/kamrava, _(*38)

2. ..., _(*39)

License, _(*40)

The MIT License (MIT). Please see License File for more information., _(*41)