Protractor Page Object Implementations

Question

I recently started working with Protractor and still find it difficult to choose between different ways of doing things.

I've seen different style guide that show different way of implementing the Page Object Pattern (objects vs functions). I have since learned that it mostly comes down to preference (https://stackoverflow.com/a/33090468/8213778)

Currently the Page Objects in my tests are set up in the following way:

/* example.page.js */

var loginHeader = element(by.css('div.header'));
var usernameInput = element(by.id('username'));
var passwordInput = element(by.id('password'));
var loginButton = element(by.id('login'));
var errorMessage = element(by.css('div.error'));


module.exports = {
  loginUser: function () {
    usernameInput.clear();
    usernameInput.sendKeys('User1');
    passwordInput.clear();
    passwordInput.sendKeys('Password123');
    loginButton.click();
  },

  getLoginHeaderText: function () {
    return loginHeader.getText();
  },

  isErrorMessageDisplayed: function () {
    return errorMessage.isDisplayed();
  }
}

This was set up by someone else and I want to restructure the code to make it more consistent, cleaner, and reusable (...and along the way learn good standards!). The main thing I'm struggling with: should I also export the elements and just add the actions in the spec file (only make functions to groups multiple actions)?

/* example.page.js */

module.exports = {
  loginHeader: element(by.css('div.header')),
  usernameInput: element(by.id('username')),
  passwordInput: element(by.id('password')),
  loginButton: element(by.id('login')),
  errorMessage: element(by.css('div.error')),

  loginUser: function () {
    usernameInput.clear();
    usernameInput.sendKeys('User1');
    passwordInput.clear();
    passwordInput.sendKeys('Password123');
    loginButton.click();
  }
}

So I can just do the following in the spec files:

var examplePage = require('../pageobjects/example.specs.js');

expect(examplePage.loginHeader.isDisplayed()).toBe­Tru­thy();
expect(examplePage.loginHeader.getText()).toEqual('Login');
examplePage.loginUser();
expect(examplePage.errorMessage.isPresent()).toBe­Fal­sy();

What are the pros and cons of this approach?

What are the pros and cons of the current setup with functions like clickLoginButton(), getLoginHeaderText(), isErrorMessageDisplayed(), etc...?